Merge pull request #435 from objectstack-ai/copilot/optimize-console-ui-components

Author: hotlong

ROADMAP.md

@@ -204,6 +204,39 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - Widget manifest system ✅
 - @objectstack/client integration hardening (in progress)
 
+#### 1.7 Console UX Polish (2 weeks) ✅ Completed
+**Target:** Enterprise-grade UX across every console component
+
+**Loading & Connection (Completed):**
+- [x] Multi-step progress indicator on LoadingScreen (animated step transitions)
+- [x] Brief "Connected" flash on successful connection (auto-dismiss after 2s)
+
+**Navigation & Wayfinding (Completed):**
+- [x] Humanized breadcrumb labels (slug → Title Case, e.g. `crm_dashboard` → `Crm Dashboard`)
+- [x] System admin route support in breadcrumbs
+- [x] Improved record ID display in breadcrumbs (`#abc123…` format)
+
+**Empty States (Completed):**
+- [x] Contextual icons in all "Not Found" empty states (ObjectView, DashboardView, PageView, ReportView, RecordDetailView)
+- [x] Helpful descriptions guiding users on what to do next
+
+**Error Recovery (Completed):**
+- [x] Added "Go Home" recovery action alongside "Try Again" in ErrorBoundary
+
+**System Admin Pages (Completed):**
+- [x] ProfilePage: Migrated from raw HTML to Shadcn Card/Input/Label/Alert/Avatar/Badge components
+- [x] User/Org/Role/Audit pages: Shadcn Button/Card/Badge, contextual page icons, improved empty state visuals
+
+**Next Steps (Q2 2026):**
+- [ ] Skeleton loading states for all data-heavy views (grid, dashboard, detail)
+- [ ] Toast notifications for CRUD operations (create/update/delete success/error)
+- [ ] Keyboard shortcuts help dialog (? key)
+- [ ] Responsive sidebar auto-collapse on tablet
+- [ ] Onboarding walkthrough for first-time users
+- [ ] Notification center with unread count badge
+- [ ] Global search results page (beyond command palette)
+- [ ] Drag-and-drop sidebar navigation reordering
+
 **Q1 Milestone:**
 - **v0.6.0 Release (March 2026):** Infrastructure Complete + Auth Foundation + Client Integration Validated
 
@@ -282,6 +315,20 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [ ] Optimistic UI updates with rollback on failure
 - [ ] Batch operation progress tracking with connection-aware retry
 
+#### 2.7 Console UX Enhancement Phase 2 (3 weeks)
+**Target:** Production-grade console experience
+
+- [ ] Skeleton loading states for data-heavy views (grid, dashboard, detail)
+- [ ] Toast notifications for CRUD operations (create/update/delete)
+- [ ] Keyboard shortcuts help dialog (? key)
+- [ ] Responsive sidebar auto-collapse on tablet breakpoints
+- [ ] Onboarding walkthrough for first-time users
+- [ ] Notification center with unread count badge
+- [ ] Global search results page (beyond command palette)
+- [ ] Drag-and-drop sidebar navigation reordering
+- [ ] Breadcrumb-based quick navigation dropdown
+- [ ] Recent items / favorites in sidebar
+
 **Q2 Milestone:**
 - **v1.0.0 Release (June 2026):** Feature Complete + Full @objectstack/client Integration
 

apps/console/src/components/AppHeader.tsx

@@ -26,6 +26,13 @@ import { ModeToggle } from './mode-toggle';
 import { ConnectionStatus } from './ConnectionStatus';
 import type { ConnectionState } from '../dataSource';
 
+/** Convert a slug like "crm_dashboard" or "audit-log" to "Crm Dashboard" / "Audit Log" */
+function humanizeSlug(slug: string): string {
+  return slug
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
 export function AppHeader({ appName, objects, connectionState }: { appName: string, objects: any[], connectionState?: ConnectionState }) {
     const location = useLocation();
     const params = useParams();
@@ -43,19 +50,24 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
     ];
 
     if (routeType === 'dashboard') {
-      breadcrumbItems.push({ label: 'Dashboard' });
+      breadcrumbItems.push({ label: 'Dashboards', href: `${breadcrumbItems[0].href}` });
       if (pathParts[3]) {
-        breadcrumbItems.push({ label: pathParts[3] });
+        breadcrumbItems.push({ label: humanizeSlug(pathParts[3]) });
       }
     } else if (routeType === 'page') {
-      breadcrumbItems.push({ label: 'Page' });
+      breadcrumbItems.push({ label: 'Pages', href: `${breadcrumbItems[0].href}` });
       if (pathParts[3]) {
-        breadcrumbItems.push({ label: pathParts[3] });
+        breadcrumbItems.push({ label: humanizeSlug(pathParts[3]) });
       }
     } else if (routeType === 'report') {
-      breadcrumbItems.push({ label: 'Report' });
+      breadcrumbItems.push({ label: 'Reports', href: `${breadcrumbItems[0].href}` });
+      if (pathParts[3]) {
+        breadcrumbItems.push({ label: humanizeSlug(pathParts[3]) });
+      }
+    } else if (routeType === 'system') {
+      breadcrumbItems.push({ label: 'System' });
       if (pathParts[3]) {
-        breadcrumbItems.push({ label: pathParts[3] });
+        breadcrumbItems.push({ label: humanizeSlug(pathParts[3]) });
       }
     } else if (routeType) {
       // Object route
@@ -68,9 +80,10 @@ export function AppHeader({ appName, objects, connectionState }: { appName: stri
 
         // Check if viewing a specific record
         if (pathParts[3] === 'record' && pathParts[4]) {
-          breadcrumbItems.push({ label: `Record ${pathParts[4].slice(0, 8)}...` });
+          const shortId = pathParts[4].length > 12 ? `${pathParts[4].slice(0, 8)}…` : pathParts[4];
+          breadcrumbItems.push({ label: `#${shortId}` });
         } else if (pathParts[3] === 'view' && pathParts[4]) {
-          breadcrumbItems.push({ label: pathParts[4] });
+          breadcrumbItems.push({ label: humanizeSlug(pathParts[4]) });
         }
       }
     }

apps/console/src/components/ConnectionStatus.tsx

@@ -2,21 +2,22 @@
  * ConnectionStatus
  *
  * Displays the current ObjectStack connection state in the header area.
- * Shows a subtle indicator when connected, and a prominent one when
- * reconnecting or in error state.
+ * Shows a subtle indicator when connected (auto-hides after a moment),
+ * and a prominent one when reconnecting or in error state.
  */
 
+import { useState, useEffect } from 'react';
 import type { ConnectionState } from '../dataSource';
 import { cn } from '@object-ui/components';
-import { Wifi, WifiOff, Loader2 } from 'lucide-react';
+import { Wifi, WifiOff, Loader2, CheckCircle2 } from 'lucide-react';
 
 interface ConnectionStatusProps {
   state: ConnectionState;
   className?: string;
 }
 
 const statusConfig: Record<ConnectionState, { label: string; color: string; icon: typeof Wifi }> = {
-  connected: { label: 'Connected', color: 'text-green-500', icon: Wifi },
+  connected: { label: 'Connected', color: 'text-green-500', icon: CheckCircle2 },
   connecting: { label: 'Connecting...', color: 'text-yellow-500', icon: Loader2 },
   reconnecting: { label: 'Reconnecting...', color: 'text-yellow-500', icon: Loader2 },
   disconnected: { label: 'Disconnected', color: 'text-muted-foreground', icon: WifiOff },
@@ -26,15 +27,27 @@ const statusConfig: Record<ConnectionState, { label: string; color: string; icon
 export function ConnectionStatus({ state, className }: ConnectionStatusProps) {
   const config = statusConfig[state];
   const Icon = config.icon;
+  const [showConnected, setShowConnected] = useState(false);
 
-  // Don't show anything when connected (clean UI)
-  if (state === 'connected') return null;
+  // Briefly show "Connected" when transitioning to connected state
+  useEffect(() => {
+    if (state === 'connected') {
+      setShowConnected(true);
+      const timer = setTimeout(() => setShowConnected(false), 2000);
+      return () => clearTimeout(timer);
+    }
+    setShowConnected(false);
+  }, [state]);
+
+  // Hide when connected (after the brief flash)
+  if (state === 'connected' && !showConnected) return null;
 
   return (
     <div
       className={cn(
-        'flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-md',
+        'flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded-md transition-opacity duration-300',
         config.color,
+        state === 'connected' && 'bg-green-500/10',
         state === 'error' && 'bg-destructive/10',
         state === 'reconnecting' && 'bg-yellow-500/10',
         className

apps/console/src/components/DashboardView.tsx

@@ -6,6 +6,7 @@
 import { useParams } from 'react-router-dom';
 import { DashboardRenderer } from '@object-ui/plugin-dashboard';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { LayoutDashboard } from 'lucide-react';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import appConfig from '../../objectstack.shared';
 
@@ -21,8 +22,14 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
     return (
       <div className="h-full flex items-center justify-center p-8">
          <Empty>
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+            <LayoutDashboard className="h-6 w-6 text-muted-foreground" />
+          </div>
           <EmptyTitle>Dashboard Not Found</EmptyTitle>
-          <EmptyDescription>The dashboard "{dashboardName}" could not be found.</EmptyDescription>
+          <EmptyDescription>
+            The dashboard &quot;{dashboardName}&quot; could not be found.
+            It may have been removed or renamed.
+          </EmptyDescription>
         </Empty>
       </div>
     );

apps/console/src/components/ErrorBoundary.tsx

@@ -17,7 +17,7 @@
 
 import { Component, type ErrorInfo, type ReactNode } from 'react';
 import { Button, Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
-import { AlertTriangle, RotateCcw } from 'lucide-react';
+import { AlertTriangle, RotateCcw, Home } from 'lucide-react';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
@@ -76,15 +76,26 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
               <EmptyDescription className="mb-4">
                 {this.state.error.message || 'An unexpected error occurred while rendering this view.'}
               </EmptyDescription>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={this.resetErrorBoundary}
-                className="gap-2"
-              >
-                <RotateCcw className="h-4 w-4" />
-                Try Again
-              </Button>
+              <div className="flex items-center justify-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={this.resetErrorBoundary}
+                  className="gap-2"
+                >
+                  <RotateCcw className="h-4 w-4" />
+                  Try Again
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => { window.location.href = '/'; }}
+                  className="gap-2"
+                >
+                  <Home className="h-4 w-4" />
+                  Go Home
+                </Button>
+              </div>
             </Empty>
             {import.meta.env.DEV && (
               <details className="mt-6 text-left">

apps/console/src/components/LoadingScreen.tsx

@@ -1,8 +1,30 @@
 
 import { Spinner } from '@object-ui/components';
-import { Database } from 'lucide-react';
+import { Database, CheckCircle2, Loader2 } from 'lucide-react';
+import { useState, useEffect } from 'react';
+
+interface LoadingScreenProps {
+  /** Optional message override */
+  message?: string;
+}
+
+const LOADING_STEPS = [
+  'Connecting to data source',
+  'Loading configuration',
+  'Preparing workspace',
+];
+
+export function LoadingScreen({ message }: LoadingScreenProps) {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  useEffect(() => {
+    if (message) return; // skip auto-progression when message is overridden
+    const timer = setInterval(() => {
+      setCurrentStep((prev) => Math.min(prev + 1, LOADING_STEPS.length - 1));
+    }, 1200);
+    return () => clearInterval(timer);
+  }, [message]);
 
-export function LoadingScreen() {
   return (
     <div className="flex flex-col items-center justify-center h-screen bg-background">
       <div className="flex flex-col items-center gap-6">
@@ -20,11 +42,34 @@ export function LoadingScreen() {
           <p className="text-sm text-muted-foreground">Initializing application...</p>
         </div>
 
-        {/* Loading indicator */}
-        <div className="flex items-center gap-3 px-4 py-2 bg-muted/50 rounded-full">
-          <Spinner className="h-4 w-4 text-primary" />
-          <span className="text-sm text-muted-foreground">Connecting to data source</span>
-        </div>
+        {/* Progress steps */}
+        {message ? (
+          <div className="flex items-center gap-3 px-4 py-2 bg-muted/50 rounded-full">
+            <Spinner className="h-4 w-4 text-primary" />
+            <span className="text-sm text-muted-foreground">{message}</span>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-2 w-64">
+            {LOADING_STEPS.map((step, index) => (
+              <div
+                key={step}
+                className="flex items-center gap-2.5 text-sm transition-opacity duration-300"
+                style={{ opacity: index <= currentStep ? 1 : 0.3 }}
+              >
+                {index < currentStep ? (
+                  <CheckCircle2 className="h-4 w-4 text-primary shrink-0" />
+                ) : index === currentStep ? (
+                  <Loader2 className="h-4 w-4 text-primary shrink-0 animate-spin" />
+                ) : (
+                  <div className="h-4 w-4 rounded-full border border-muted-foreground/30 shrink-0" />
+                )}
+                <span className={index <= currentStep ? 'text-foreground' : 'text-muted-foreground'}>
+                  {step}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

apps/console/src/components/ObjectView.tsx

@@ -38,8 +38,14 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
       return (
         <div className="h-full p-4 flex items-center justify-center">
           <Empty>
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+              <TableIcon className="h-6 w-6 text-muted-foreground" />
+            </div>
             <EmptyTitle>Object Not Found</EmptyTitle>
-            <EmptyDescription>The object &quot;{objectName}&quot; does not exist in the current configuration.</EmptyDescription>
+            <EmptyDescription>
+              The object &quot;{objectName}&quot; does not exist in the current configuration.
+              Check your app navigation settings or select a different object from the sidebar.
+            </EmptyDescription>
           </Empty>
         </div>
       );

apps/console/src/components/PageView.tsx

@@ -6,6 +6,7 @@
 import { useParams, useSearchParams } from 'react-router-dom';
 import { SchemaRenderer } from '@object-ui/react';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { FileText } from 'lucide-react';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import appConfig from '../../objectstack.shared';
 
@@ -22,8 +23,14 @@ export function PageView() {
     return (
       <div className="h-full flex items-center justify-center p-8">
         <Empty>
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+            <FileText className="h-6 w-6 text-muted-foreground" />
+          </div>
           <EmptyTitle>Page Not Found</EmptyTitle>
-          <EmptyDescription>The page "{pageName}" could not be found.</EmptyDescription>
+          <EmptyDescription>
+            The page &quot;{pageName}&quot; could not be found.
+            It may have been removed or renamed.
+          </EmptyDescription>
         </Empty>
       </div>
     );

apps/console/src/components/RecordDetailView.tsx

@@ -8,7 +8,8 @@
 
 import { useParams } from 'react-router-dom';
 import { DetailView } from '@object-ui/plugin-detail';
-import { Empty, EmptyTitle } from '@object-ui/components';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { Database } from 'lucide-react';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
 
 interface RecordDetailViewProps {
@@ -26,8 +27,14 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
     return (
       <div className="flex h-full items-center justify-center p-4">
         <Empty>
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+            <Database className="h-6 w-6 text-muted-foreground" />
+          </div>
           <EmptyTitle>Object Not Found</EmptyTitle>
-          <p>Object "{objectName}" definition missing.</p>
+          <EmptyDescription>
+            Object &quot;{objectName}&quot; definition missing.
+            Check your configuration or navigate back to select a valid object.
+          </EmptyDescription>
         </Empty>
       </div>
     );