Remove @example/app-crm and @example/app-todo dependencies from studio; load apps dynamically from objectstack.config.ts

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/studio/objectstack.config.ts

@@ -19,14 +19,40 @@ export const TaskObject = {
   fields: {
     id: { name: 'id', label: 'ID', type: 'text', required: true },
     subject: { name: 'subject', label: 'Subject', type: 'text', required: true },
-    priority: { name: 'priority', label: 'Priority', type: 'number', defaultValue: 5 },
+    status: {
+      name: 'status',
+      label: 'Status',
+      type: 'select',
+      options: [
+        { label: 'Not Started', value: 'not_started' },
+        { label: 'In Progress', value: 'in_progress' },
+        { label: 'Waiting', value: 'waiting' },
+        { label: 'Completed', value: 'completed' },
+      ]
+    },
+    priority: {
+      name: 'priority',
+      label: 'Priority',
+      type: 'select',
+      options: [
+        { label: 'Low', value: 'low' },
+        { label: 'Normal', value: 'normal' },
+        { label: 'High', value: 'high' },
+        { label: 'Urgent', value: 'urgent' },
+      ]
+    },
+    category: { name: 'category', label: 'Category', type: 'text' },
+    due_date: { name: 'due_date', label: 'Due Date', type: 'date' },
     is_completed: { name: 'is_completed', label: 'Completed', type: 'boolean', defaultValue: false },
     created_at: { name: 'created_at', label: 'Created At', type: 'datetime' }
   }
 };
 
 /**
  * App Configuration
+ *
+ * This is the single source of truth for apps/studio in MSW (browser) mode.
+ * In server mode the studio fetches apps dynamically via the API.
  */
 export default defineStack({
   name: 'task_app',
@@ -41,6 +67,23 @@ export default defineStack({
   objects: [
     TaskObject
   ],
+  data: [
+    {
+      object: 'task',
+      mode: 'upsert' as const,
+      externalId: 'subject',
+      records: [
+        { subject: 'Learn ObjectStack', status: 'completed', priority: 'high', category: 'Work' },
+        { subject: 'Build a cool app', status: 'in_progress', priority: 'normal', category: 'Work' },
+        { subject: 'Review PR #102', status: 'completed', priority: 'high', category: 'Work' },
+        { subject: 'Write Documentation', status: 'not_started', priority: 'normal', category: 'Work' },
+        { subject: 'Fix Server bug', status: 'waiting', priority: 'urgent', category: 'Work' },
+        { subject: 'Buy groceries', status: 'not_started', priority: 'low', category: 'Shopping' },
+        { subject: 'Schedule dentist appointment', status: 'not_started', priority: 'normal', category: 'Health' },
+        { subject: 'Pay utility bills', status: 'not_started', priority: 'high', category: 'Finance' },
+      ]
+    }
+  ],
   navigation: [
     {
       id: 'group_tasks',

apps/studio/package.json

@@ -17,8 +17,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@example/app-crm": "workspace:*",
-    "@example/app-todo": "workspace:*",
     "@objectstack/client": "workspace:*",
     "@objectstack/client-react": "workspace:*",
     "@objectstack/driver-memory": "workspace:*",

apps/studio/src/mocks/browser.ts

@@ -6,13 +6,11 @@
  * This creates a complete ObjectStack environment in the browser using the In-Memory Driver
  * and the MSW Plugin which automatically exposes the API.
  * 
- * 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).
+ * App configs are loaded dynamically from objectstack.config.ts at the project root.
+ * The UI itself fetches apps via `GET /api/v1/meta/apps` — not from these imports.
  */
 import { ObjectKernel } from '@objectstack/runtime';
-import todoConfig from '@example/app-todo/objectstack.config';
-import crmConfig from '@example/app-crm/objectstack.config';
+import studioConfig from '../../objectstack.config';
 import { createKernel } from './createKernel';
 
 let kernel: ObjectKernel | null = null;
@@ -43,20 +41,19 @@ function resolveConfig(raw: any) {
 }
 
 /**
- * App configs used ONLY for kernel bootstrapping in MSW (browser) mode.
+ * Boot config loaded dynamically from objectstack.config.ts.
  * The UI never reads this directly — it discovers apps via the meta API.
  */
 const bootConfigs = [
-  resolveConfig(todoConfig),
-  resolveConfig(crmConfig),
+  resolveConfig(studioConfig),
 ];
 
 export async function startMockServer() {
   if (kernel) return;
 
   console.log('[MSW] Starting ObjectStack Runtime (Browser Mode)...');
 
-  // Use shared factory with multi-app support
+  // Use shared factory — app list comes from objectstack.config.ts
   kernel = await createKernel({
     appConfigs: bootConfigs,
     enableBrowser: true

apps/studio/src/mocks/simulateBrowser.ts

@@ -4,7 +4,7 @@ import { createKernel } from './createKernel';
 import { setupServer } from 'msw/node';
 import { http, HttpResponse } from 'msw';
 import { ObjectStackClient } from '@objectstack/client';
-import todoConfig from '@example/app-todo/objectstack.config';
+import studioConfig from '../../objectstack.config';
 
 /**
  * Creates a Realistic Browser Simulation
@@ -16,8 +16,8 @@ import todoConfig from '@example/app-todo/objectstack.config';
  * 4. Returns a ready-to-use Client
  */
 export async function simulateBrowser() {
-    // 1. Boot Kernel (Headless Mode)
-    const appConfig = (todoConfig as any).default || todoConfig;
+    // 1. Boot Kernel (Headless Mode) — config loaded from objectstack.config.ts
+    const appConfig = (studioConfig as any).default || studioConfig;
     const kernel = await createKernel({
         appConfig,
         enableBrowser: false // Disable the built-in browser MSW worker

apps/studio/test/verify-dom.test.ts

@@ -27,7 +27,7 @@ describe('DOM Simulation', () => {
             fieldCount: Object.keys(def.fields || {}).length
         });
 
-        expect(def.name).toBe('todo__task');
+        expect(def.name).toBe('task');
         expect(Object.keys(def.fields).length).toBeGreaterThan(0);
 
         // 2. Fetch Data (short name resolves via engine.resolveObjectName)

apps/studio/test/verify-metadata.test.ts

@@ -25,9 +25,9 @@ describe('Metadata Service Integration', () => {
         expect(Array.isArray(objects)).toBe(true);
         expect(objects.length).toBeGreaterThan(0);
 
-        // FQN uses double underscore: todo__task
-        const todoTask = objects.find((o: any) => o.name === 'todo__task');
-        expect(todoTask).toBeDefined();
+        // Object name without namespace prefix (studio config has no namespace)
+        const task = objects.find((o: any) => o.name === 'task');
+        expect(task).toBeDefined();
     });
 
     it('should fetch object details via client.meta.getItem("object", ...)', async () => {
@@ -37,7 +37,7 @@ describe('Metadata Service Integration', () => {
         const def = response.data || response;
 
         expect(def).toBeDefined();
-        expect(def.name).toBe('todo__task');
+        expect(def.name).toBe('task');
         expect(def.fields).toBeDefined();
 
         // Check if fields are parsed correctly (client might return Map or Object depending on version)