Merge pull request #761 from objectstack-ai/copilot/integrate-app-creation-wizard

Author: hotlong

ROADMAP.md

@@ -482,6 +482,19 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 **ComponentRegistry:**
 - [x] Registered: `app-creation-wizard`, `navigation-designer`, `dashboard-editor`, `page-canvas-editor`, `object-view-configurator`
 
+**Console Integration:**
+- [x] `CreateAppPage` — renders `AppCreationWizard` with `useMetadata()` objects, `onComplete`/`onCancel`/`onSaveDraft` callbacks
+- [x] `EditAppPage` — reuses wizard with `initialDraft` from existing app config
+- [x] Routes: `/apps/:appName/create-app`, `/apps/:appName/edit-app/:editAppName`
+- [x] AppSidebar "Add App" button → navigates to `/create-app`
+- [x] AppSidebar "Edit App" button → navigates to `/edit-app/:appName`
+- [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] 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)
+
 ---
 
 ## 🧩 P2 — Polish & Advanced Features

apps/console/src/App.tsx

@@ -30,6 +30,10 @@ const ReportView = lazy(() => import('./components/ReportView').then(m => ({ def
 const ViewDesignerPage = lazy(() => import('./components/ViewDesignerPage').then(m => ({ default: m.ViewDesignerPage })));
 const SearchResultsPage = lazy(() => import('./components/SearchResultsPage').then(m => ({ default: m.SearchResultsPage })));
 
+// App Creation / Edit Pages (lazy — only needed during app management)
+const CreateAppPage = lazy(() => import('./pages/CreateAppPage').then(m => ({ default: m.CreateAppPage })));
+const EditAppPage = lazy(() => import('./pages/EditAppPage').then(m => ({ default: m.EditAppPage })));
+
 // Auth Pages (lazy — only needed before login)
 const LoginPage = lazy(() => import('./pages/LoginPage').then(m => ({ default: m.LoginPage })));
 const RegisterPage = lazy(() => import('./pages/RegisterPage').then(m => ({ default: m.RegisterPage })));
@@ -246,14 +250,37 @@ export function AppContent() {
   );
 
   if (!dataSource || metadataLoading) return <LoadingScreen />;
-  if (!activeApp) return (
+
+  // Allow create-app route even when no active app exists
+  const isCreateAppRoute = location.pathname.endsWith('/create-app');
+
+  if (!activeApp && !isCreateAppRoute) return (
     <div className="h-screen flex items-center justify-center">
       <Empty>
         <EmptyTitle>No Apps Configured</EmptyTitle>
+        <EmptyDescription>No applications have been registered.</EmptyDescription>
+        <button
+          className="mt-4 inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+          onClick={() => navigate('create-app')}
+          data-testid="create-first-app-btn"
+        >
+          Create Your First App
+        </button>
       </Empty>
     </div>
   );
 
+  // When on create-app without an active app, render a minimal layout with just the wizard
+  if (!activeApp && isCreateAppRoute) {
+    return (
+      <Suspense fallback={<LoadingScreen />}>
+        <Routes>
+          <Route path="create-app" element={<CreateAppPage />} />
+        </Routes>
+      </Suspense>
+    );
+  }
+
   // Expression context for dynamic visibility/disabled/hidden expressions
   const expressionUser = user
     ? { name: user.name, email: user.email, role: user.role ?? 'user' }
@@ -331,6 +358,10 @@ export function AppContent() {
             <SearchResultsPage />
         } />
 
+        {/* App Creation & Editing */}
+        <Route path="create-app" element={<CreateAppPage />} />
+        <Route path="edit-app/:editAppName" element={<EditAppPage />} />
+
         {/* System Administration Routes */}
         <Route path="system/users" element={<UserManagementPage />} />
         <Route path="system/organizations" element={<OrgManagementPage />} />
@@ -402,6 +433,7 @@ function findFirstRoute(items: any[]): string {
 // Redirect root to default app
 function RootRedirect() {
     const { apps, loading, error } = useMetadata();
+    const navigate = useNavigate();
     const activeApps = apps.filter((a: any) => a.active !== false);
     const defaultApp = activeApps.find((a: any) => a.isDefault === true) || activeApps[0];
 
@@ -416,6 +448,15 @@ function RootRedirect() {
           <EmptyDescription>
             {error ? error.message : 'No applications have been registered. Check your ObjectStack configuration.'}
           </EmptyDescription>
+          {!error && (
+            <button
+              className="mt-4 inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+              onClick={() => navigate('/apps/_new/create-app')}
+              data-testid="create-first-app-btn"
+            >
+              Create Your First App
+            </button>
+          )}
         </Empty>
       </div>
     );