Merge pull request #765 from objectstack-ai/copilot/add-defineapp-api-integration

Author: hotlong

ROADMAP.md

@@ -498,9 +498,11 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] CommandPalette "Create New App" command (⌘+K → Actions group)
 - [x] Empty state CTA "Create Your First App" when no apps configured
 - [x] `wizardDraftToAppSchema()` conversion on completion
+- [x] `client.meta.saveItem('app', name, schema)` — persists app metadata to backend on create/edit
+- [x] MSW PUT handler for `/meta/:type/:name` — dev/mock mode metadata persistence
 - [x] Draft persistence to localStorage with auto-clear on success
 - [x] `createApp` i18n key added to all 10 locales
-- [x] 11 console integration tests (routes, wizard callbacks, draft persistence, CommandPalette)
+- [x] 13 console integration tests (routes, wizard callbacks, draft persistence, saveItem, CommandPalette)
 
 ---
 

apps/console/src/__tests__/app-creation-integration.test.tsx

@@ -83,6 +83,13 @@ const MockAdapterInstance = {
   connect: vi.fn().mockResolvedValue(true),
   onConnectionStateChange: vi.fn().mockReturnValue(() => {}),
   getConnectionState: vi.fn().mockReturnValue('connected'),
+  getClient: vi.fn().mockReturnValue({
+    meta: {
+      saveItem: vi.fn().mockResolvedValue({ ok: true }),
+      getItems: vi.fn().mockResolvedValue({ items: [] }),
+      getItem: vi.fn().mockResolvedValue(null),
+    },
+  }),
   discovery: {},
 };
 
@@ -349,6 +356,25 @@ describe('Console App Creation Integration', () => {
         expect(localStorage.getItem('objectui-app-wizard-draft')).toBeNull();
       });
     });
+
+    it('calls client.meta.saveItem on wizard completion', async () => {
+      renderApp('/apps/sales/create-app');
+
+      await waitFor(() => {
+        expect(screen.getByTestId('wizard-complete')).toBeInTheDocument();
+      }, { timeout: 10000 });
+
+      fireEvent.click(screen.getByTestId('wizard-complete'));
+
+      await waitFor(() => {
+        const client = MockAdapterInstance.getClient();
+        expect(client.meta.saveItem).toHaveBeenCalledWith(
+          'app',
+          'my_app',
+          expect.objectContaining({ name: 'my_app' }),
+        );
+      });
+    });
   });
 
   // --- Route: Edit App ---
@@ -379,6 +405,25 @@ describe('Console App Creation Integration', () => {
         expect(screen.getByTestId('edit-app-not-found')).toBeInTheDocument();
       }, { timeout: 10000 });
     });
+
+    it('calls client.meta.saveItem on wizard completion (edit)', async () => {
+      renderApp('/apps/sales/edit-app/sales');
+
+      await waitFor(() => {
+        expect(screen.getByTestId('wizard-complete')).toBeInTheDocument();
+      }, { timeout: 10000 });
+
+      fireEvent.click(screen.getByTestId('wizard-complete'));
+
+      await waitFor(() => {
+        const client = MockAdapterInstance.getClient();
+        expect(client.meta.saveItem).toHaveBeenCalledWith(
+          'app',
+          'my_app',
+          expect.objectContaining({ name: 'my_app' }),
+        );
+      });
+    });
   });
 
   // --- CommandPalette: Create App Command ---

apps/console/src/mocks/handlers.ts

@@ -127,6 +127,40 @@ export function createHandlers(baseUrl: string, kernel: ObjectKernel, driver: In
       }
     }),
 
+    // ── Metadata: save item by type + name ───────────────────────────────
+    http.put(`${prefix}${baseUrl}/meta/:type/:name`, async ({ params, request }) => {
+      try {
+        const body = await request.json();
+        if (typeof protocol.saveMetaItem === 'function') {
+          const result = await protocol.saveMetaItem({
+            type: params.type as string,
+            name: params.name as string,
+            item: body,
+          });
+          return HttpResponse.json(result, { status: 200 });
+        }
+        return HttpResponse.json({ error: 'Save not supported' }, { status: 501 });
+      } catch (e) {
+        return HttpResponse.json({ error: String(e) }, { status: 500 });
+      }
+    }),
+    http.put(`${prefix}${baseUrl}/metadata/:type/:name`, async ({ params, request }) => {
+      try {
+        const body = await request.json();
+        if (typeof protocol.saveMetaItem === 'function') {
+          const result = await protocol.saveMetaItem({
+            type: params.type as string,
+            name: params.name as string,
+            item: body,
+          });
+          return HttpResponse.json(result, { status: 200 });
+        }
+        return HttpResponse.json({ error: 'Save not supported' }, { status: 501 });
+      } catch (e) {
+        return HttpResponse.json({ error: String(e) }, { status: 500 });
+      }
+    }),
+
     // ── Data: find all ──────────────────────────────────────────────────
     http.get(`${prefix}${baseUrl}/data/:objectName`, async ({ params, request }) => {
       const url = new URL(request.url);

apps/console/src/pages/CreateAppPage.tsx

@@ -13,6 +13,7 @@ import { AppCreationWizard } from '@object-ui/plugin-designer';
 import { wizardDraftToAppSchema } from '@object-ui/types';
 import type { AppWizardDraft, ObjectSelection } from '@object-ui/types';
 import { useMetadata } from '../context/MetadataProvider';
+import { useAdapter } from '../context/AdapterProvider';
 import { toast } from 'sonner';
 
 const DRAFT_STORAGE_KEY = 'objectui-app-wizard-draft';
@@ -21,6 +22,7 @@ export function CreateAppPage() {
   const navigate = useNavigate();
   const { appName } = useParams();
   const { objects, refresh } = useMetadata();
+  const adapter = useAdapter();
 
   // Map metadata objects to ObjectSelection format
   const availableObjects: ObjectSelection[] = (objects || []).map((obj: any) => ({
@@ -46,7 +48,12 @@ export function CreateAppPage() {
   const handleComplete = useCallback(
     async (draft: AppWizardDraft) => {
       try {
-        const _appSchema = wizardDraftToAppSchema(draft);
+        const appSchema = wizardDraftToAppSchema(draft);
+        // Persist app metadata to backend
+        const client = adapter?.getClient();
+        if (client) {
+          await client.meta.saveItem('app', draft.name, appSchema);
+        }
         // Clear draft from localStorage on successful creation
         localStorage.removeItem(DRAFT_STORAGE_KEY);
         toast.success(`Application "${draft.title}" created successfully`);
@@ -58,7 +65,7 @@ export function CreateAppPage() {
         toast.error(err?.message || 'Failed to create application');
       }
     },
-    [navigate, refresh],
+    [navigate, refresh, adapter],
   );
 
   const handleCancel = useCallback(() => {

apps/console/src/pages/EditAppPage.tsx

@@ -13,12 +13,14 @@ import { AppCreationWizard } from '@object-ui/plugin-designer';
 import { wizardDraftToAppSchema } from '@object-ui/types';
 import type { AppWizardDraft, ObjectSelection } from '@object-ui/types';
 import { useMetadata } from '../context/MetadataProvider';
+import { useAdapter } from '../context/AdapterProvider';
 import { toast } from 'sonner';
 
 export function EditAppPage() {
   const navigate = useNavigate();
   const { appName, editAppName } = useParams();
   const { apps, objects, refresh } = useMetadata();
+  const adapter = useAdapter();
 
   const targetAppName = editAppName || appName;
 
@@ -56,15 +58,20 @@ export function EditAppPage() {
   const handleComplete = useCallback(
     async (draft: AppWizardDraft) => {
       try {
-        const _appSchema = wizardDraftToAppSchema(draft);
+        const appSchema = wizardDraftToAppSchema(draft);
+        // Persist app metadata to backend
+        const client = adapter?.getClient();
+        if (client) {
+          await client.meta.saveItem('app', draft.name, appSchema);
+        }
         toast.success(`Application "${draft.title}" updated successfully`);
         await refresh?.();
         navigate(`/apps/${draft.name}`);
       } catch (err: any) {
         toast.error(err?.message || 'Failed to update application');
       }
     },
-    [navigate, refresh],
+    [navigate, refresh, adapter],
   );
 
   const handleCancel = useCallback(() => {