feat: update development plan status to complete

feat: enhance App component with CommandPalette and ErrorBoundary, and apply app branding

feat: modify AppHeader for command palette integration and adjust mobile search button

feat: update DashboardView to accept dataSource prop for improved data handling

feat: enhance LoadingScreen with gradient background

feat: update ObjectView to include filtering and sorting capabilities

feat: modify PageView and ReportView to accept dataSource prop for better data management

refactor: remove obsolete config.ts file

fix: improve mock server initialization in browser.ts

feat: add CommandPalette component for quick navigation

feat: implement ErrorBoundary component for better error handling

feat: create useBranding hook for dynamic app theming

feat: add useObjectActions hook for streamlined CRUD operations

Author: hotlong

apps/console/DEVELOPMENT_PLAN.md

@@ -1,7 +1,7 @@
 # ObjectStack Console — Development Plan
 
 > Generated: 2026-02-07  
-> Status: **Active**
+> Status: **Complete** ✅ (All 10 phases executed)
 
 ## Current State
 

apps/console/src/App.tsx

@@ -9,16 +9,35 @@ import appConfig from '../objectstack.shared';
 
 // Components
 import { ConsoleLayout } from './components/ConsoleLayout';
+import { CommandPalette } from './components/CommandPalette';
+import { ErrorBoundary } from './components/ErrorBoundary';
 import { LoadingScreen } from './components/LoadingScreen';
 import { ObjectView } from './components/ObjectView';
 import { DashboardView } from './components/DashboardView';
 import { PageView } from './components/PageView';
 import { ReportView } from './components/ReportView';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './components/MetadataInspector';
+import { useBranding } from './hooks/useBranding';
 
 import { DetailView } from '@object-ui/plugin-detail';
 import { useParams } from 'react-router-dom';
 
+/**
+ * Patch: MSW discovery response uses 'routes' instead of 'endpoints'.
+ * This normalizes the shape until @objectstack/plugin-msw is fixed upstream.
+ */
+function patchDiscoveryEndpoints(adapter: ObjectStackAdapter) {
+  try {
+    const client = adapter.getClient();
+    const info = (client as any).discoveryInfo;
+    if (info?.routes && !info.endpoints) {
+      info.endpoints = info.routes;
+    }
+  } catch {
+    // Silently ignore — adapter may not expose getClient()
+  }
+}
+
 // Detail View Component
 function RecordDetailView({ dataSource, objects, onEdit }: any) {
   const { objectName, recordId } = useParams();
@@ -99,24 +118,13 @@ export function AppContent() {
   const [editingRecord, setEditingRecord] = useState<any>(null);
   const [refreshKey, setRefreshKey] = useState(0);
 
+  // Apply app branding (primaryColor, favicon, title)
+  useBranding(activeApp);
+
   useEffect(() => {
     initializeDataSource();
   }, []);
 
-  // Sync title
-  useEffect(() => {
-    const favicon = activeApp?.branding?.favicon;
-    if (favicon) {
-      const link = document.querySelector<HTMLLinkElement>('#favicon');
-      if (link) {
-        link.href = favicon;
-      }
-    }
-    if (activeApp?.label) {
-      document.title = `${activeApp.label} - ObjectStack Console`;
-    }
-  }, [activeApp]);
-
   async function initializeDataSource() {
     try {
       const adapter = new ObjectStackAdapter({
@@ -135,17 +143,11 @@ export function AppContent() {
         }
       });
 
-      await new Promise(resolve => setTimeout(resolve, 500));
       await adapter.connect();
 
-      // FIX: MSW Mock Server returns incorrect 'endpoints' in discovery.
-      // The 'routes' property has the correct paths with /v1 prefix.
-      const client = adapter.getClient();
-      // @ts-ignore - accessing private property for fix
-      if (client.discoveryInfo && client.discoveryInfo.routes) {
-        // @ts-ignore - accessing private property for fix
-        client.discoveryInfo.endpoints = client.discoveryInfo.routes;
-      }
+      // Patch: MSW discovery returns 'routes' instead of 'endpoints'.
+      // TODO: Fix in @objectstack/plugin-msw to emit correct discovery shape.
+      patchDiscoveryEndpoints(adapter);
 
       setDataSource(adapter);
     } catch (err) {
@@ -208,7 +210,14 @@ export function AppContent() {
         objects={allObjects}
         connectionState={connectionState}
     >
+      <CommandPalette
+        apps={apps}
+        activeApp={activeApp}
+        objects={allObjects}
+        onAppChange={handleAppChange}
+      />
       <SchemaRendererProvider dataSource={dataSource || {}}>
+      <ErrorBoundary>
       <Routes>
         <Route path="/" element={
             // Redirect to first route within the app
@@ -241,15 +250,16 @@ export function AppContent() {
         } />
 
         <Route path="dashboard/:dashboardName" element={
-            <DashboardView />
+            <DashboardView dataSource={dataSource} />
         } />
         <Route path="report/:reportName" element={
-            <ReportView />
+            <ReportView dataSource={dataSource} />
         } />
         <Route path="page/:pageName" element={
-            <PageView />
+            <PageView dataSource={dataSource} />
         } />
       </Routes>
+      </ErrorBoundary>
 
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
           <DialogContent className="sm:max-w-xl max-h-[90vh] flex flex-col gap-0 p-0 overflow-hidden">

apps/console/src/components/AppHeader.tsx

@@ -7,7 +7,6 @@ import {
   BreadcrumbPage, 
   BreadcrumbSeparator,
   SidebarTrigger,
-  Input,
   Button,
   Separator,
 } from '@object-ui/components';
@@ -91,7 +90,7 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
                 </Breadcrumb>
 
                 {/* Mobile: Just show current page */}
-                <span className="text-sm font-medium sm:hidden truncate max-w-[150px]">
+                <span className="text-sm font-medium sm:hidden truncate max-w-37.5">
                   {breadcrumbItems[breadcrumbItems.length - 1]?.label || appName}
                 </span>
              </div>
@@ -100,17 +99,25 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
                 {/* Connection Status */}
                 {connectionState && <ConnectionStatus state={connectionState} />}
 
-                {/* Search - Desktop */}
-                <div className="hidden lg:flex relative">
-                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                  <Input 
-                    placeholder="Search..." 
-                    className="w-[200px] xl:w-[280px] pl-8 h-8 bg-muted/50"
-                  />
-                </div>
+                {/* Search - Desktop — opens ⌘K command palette */}
+                <button
+                  onClick={() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))}
+                  className="hidden lg:flex relative items-center gap-2 w-50 xl:w-70 h-8 px-3 text-sm rounded-md border bg-muted/50 text-muted-foreground hover:bg-muted transition-colors"
+                >
+                  <Search className="h-4 w-4" />
+                  <span className="flex-1 text-left">Search...</span>
+                  <kbd className="pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border bg-muted px-1.5 text-[10px] font-medium text-muted-foreground">
+                    <span className="text-xs">⌘</span>K
+                  </kbd>
+                </button>
 
                 {/* Search button - Mobile/Tablet */}
-                <Button variant="ghost" size="icon" className="lg:hidden h-8 w-8">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="lg:hidden h-8 w-8"
+                  onClick={() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))}
+                >
                   <Search className="h-4 w-4" />
                 </Button>