feat: add inline ViewConfigPanel, breadcrumb header, and record count footer

- Add ViewConfigPanel component (Airtable-style right sidebar)
- Replace "Edit View" navigation with inline panel toggle
- Add breadcrumb (Object > View) and description in header
- Add record count footer
- Add i18n keys for all 11 locales
- Add 7 new tests for panel toggle, breadcrumb, description, record count

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

Author: Copilot

apps/console/src/__tests__/ObjectView.test.tsx

@@ -137,11 +137,13 @@ describe('ObjectView Component', () => {
 
         render(<ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />);
 
-        // Check Header
-        expect(screen.getByText('Opportunity')).toBeInTheDocument();
+        // Check Header (appears in breadcrumb and h1)
+        const headers = screen.getAllByText('Opportunity');
+        expect(headers.length).toBeGreaterThanOrEqual(1);
 
-        // Check Tabs exist
-        expect(screen.getByText('All Opportunities')).toBeInTheDocument();
+        // Check Tabs exist (also appears in breadcrumb)
+        const allOppTexts = screen.getAllByText('All Opportunities');
+        expect(allOppTexts.length).toBeGreaterThanOrEqual(1);
         expect(screen.getByText('Pipeline')).toBeInTheDocument();
 
         // Check Grid is rendered (default)
@@ -247,4 +249,93 @@ describe('ObjectView Component', () => {
 
         expect(mockNavigate).toHaveBeenCalledWith('views/new', { relative: 'path' });
     });
+
+    it('shows breadcrumb with object and view name', () => {
+        mockUseParams.mockReturnValue({ objectName: 'opportunity' });
+        
+        render(<ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />);
+        
+        // Breadcrumb should show object label and active view label (may appear in tabs too)
+        const allOppTexts = screen.getAllByText('All Opportunities');
+        expect(allOppTexts.length).toBeGreaterThanOrEqual(2); // breadcrumb + tab
+    });
+
+    it('shows object description when present', () => {
+        const objectsWithDesc = [
+            {
+                ...mockObjects[0],
+                description: 'Track sales pipeline and deals',
+            },
+        ];
+        mockUseParams.mockReturnValue({ objectName: 'opportunity' });
+        
+        render(<ObjectView dataSource={mockDataSource} objects={objectsWithDesc} onEdit={vi.fn()} />);
+        
+        expect(screen.getByText('Track sales pipeline and deals')).toBeInTheDocument();
+    });
+
+    it('toggles ViewConfigPanel when "Edit View" is clicked by admin', () => {
+        mockAuthUser = { id: 'u1', name: 'Admin', role: 'admin' };
+        mockUseParams.mockReturnValue({ objectName: 'opportunity' });
+
+        render(<ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />);
+
+        // Panel should not be visible initially
+        expect(screen.queryByTestId('view-config-panel')).not.toBeInTheDocument();
+
+        // Click design tools > Edit View
+        const designBtn = screen.getByTitle('console.objectView.designTools');
+        fireEvent.click(designBtn);
+
+        const editViewBtn = screen.getByText('console.objectView.editView');
+        fireEvent.click(editViewBtn);
+
+        // Panel should now be visible
+        expect(screen.getByTestId('view-config-panel')).toBeInTheDocument();
+    });
+
+    it('closes ViewConfigPanel when close button is clicked', () => {
+        mockAuthUser = { id: 'u1', name: 'Admin', role: 'admin' };
+        mockUseParams.mockReturnValue({ objectName: 'opportunity' });
+
+        render(<ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />);
+
+        // Open the panel
+        const designBtn = screen.getByTitle('console.objectView.designTools');
+        fireEvent.click(designBtn);
+        const editViewBtn = screen.getByText('console.objectView.editView');
+        fireEvent.click(editViewBtn);
+
+        expect(screen.getByTestId('view-config-panel')).toBeInTheDocument();
+
+        // Close the panel
+        const closeBtn = screen.getByTitle('console.objectView.closePanel');
+        fireEvent.click(closeBtn);
+
+        expect(screen.queryByTestId('view-config-panel')).not.toBeInTheDocument();
+    });
+
+    it('does not show ViewConfigPanel for non-admin users', () => {
+        mockAuthUser = { id: 'u2', name: 'Viewer', role: 'viewer' };
+        mockUseParams.mockReturnValue({ objectName: 'opportunity' });
+
+        render(<ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />);
+
+        // Design tools are not available for non-admin users
+        expect(screen.queryByTestId('view-config-panel')).not.toBeInTheDocument();
+    });
+
+    it('shows record count footer when data is available', async () => {
+        const mockDsWithTotal = {
+            ...mockDataSource,
+            find: vi.fn().mockResolvedValue({ data: [], total: 42 }),
+        };
+        mockUseParams.mockReturnValue({ objectName: 'opportunity' });
+        
+        render(<ObjectView dataSource={mockDsWithTotal} objects={mockObjects} onEdit={vi.fn()} />);
+        
+        // Wait for the record count to appear
+        const footer = await screen.findByTestId('record-count-footer');
+        expect(footer).toBeInTheDocument();
+    });
 });

apps/console/src/components/ObjectView.tsx

@@ -21,9 +21,10 @@ import '@object-ui/plugin-grid';
 import '@object-ui/plugin-kanban';
 import '@object-ui/plugin-calendar';
 import { Button, Empty, EmptyTitle, EmptyDescription, NavigationOverlay, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from '@object-ui/components';
-import { Plus, Table as TableIcon, Settings2, Wrench, KanbanSquare, Calendar, LayoutGrid, Activity, GanttChart, MapPin, BarChart3 } from 'lucide-react';
+import { Plus, Table as TableIcon, Settings2, Wrench, KanbanSquare, Calendar, LayoutGrid, Activity, GanttChart, MapPin, BarChart3, ChevronRight } from 'lucide-react';
 import type { ListViewSchema, ViewNavigationConfig } from '@object-ui/types';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { ViewConfigPanel } from './ViewConfigPanel';
 import { useObjectActions } from '../hooks/useObjectActions';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { usePermissions } from '@object-ui/permissions';
@@ -62,6 +63,12 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
     const { showDebug, toggleDebug } = useMetadataInspector();
     const { t } = useObjectTranslation();
 
+    // Inline view config panel state (Airtable-style right sidebar)
+    const [showViewConfigPanel, setShowViewConfigPanel] = useState(false);
+    
+    // Record count tracking for footer
+    const [recordCount, setRecordCount] = useState<number | undefined>(undefined);
+    
     // Admin users automatically get design tools (no toggle needed)
     const { user } = useAuth();
     const isAdmin = user?.role === 'admin';
@@ -152,6 +159,23 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
         }
     }, [realtimeMessage, hasConflicts, resolveAllConflicts]);
 
+    // Fetch record count for footer display
+    useEffect(() => {
+        if (dataSource?.find && objectDef.name) {
+            dataSource.find(objectDef.name, { limit: 0 }).then((result: any) => {
+                if (typeof result?.total === 'number') {
+                    setRecordCount(result.total);
+                } else if (Array.isArray(result?.data)) {
+                    setRecordCount(result.data.length);
+                } else if (Array.isArray(result)) {
+                    setRecordCount(result.length);
+                }
+            }).catch(() => {
+                // Silently ignore — record count is non-critical
+            });
+        }
+    }, [dataSource, objectDef.name, refreshKey]);
+
     // Navigation overlay for record detail (supports drawer/modal/split/popover via config)
     const detailNavigation: ViewNavigationConfig = objectDef.navigation ?? { mode: 'drawer' };
     const drawerRecordId = searchParams.get('recordId');
@@ -301,14 +325,23 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
 
     return (
         <div className="h-full flex flex-col bg-background">
-             {/* 1. Simplified Header */}
+             {/* 1. Header with breadcrumb + description */}
              <div className="flex justify-between items-center py-2.5 sm:py-3 px-3 sm:px-4 border-b shrink-0 bg-background z-10">
                  <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                     <div className="bg-primary/10 p-1.5 sm:p-2 rounded-md shrink-0">
                         <TableIcon className="h-4 w-4 text-primary" />
                     </div>
                     <div className="min-w-0">
+                        {/* Breadcrumb: Object > View */}
+                        <div className="flex items-center gap-1 text-xs text-muted-foreground mb-0.5">
+                            <span className="truncate">{objectDef.label}</span>
+                            <ChevronRight className="h-3 w-3 shrink-0" />
+                            <span className="truncate font-medium text-foreground">{activeView?.label || t('console.objectView.allRecords')}</span>
+                        </div>
                         <h1 className="text-base sm:text-lg font-semibold tracking-tight text-foreground truncate">{objectDef.label}</h1>
+                        {objectDef.description && (
+                            <p className="text-xs text-muted-foreground truncate hidden sm:block max-w-md">{objectDef.description}</p>
+                        )}
                     </div>
                  </div>
 
@@ -353,7 +386,7 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
                           {t('console.objectView.metadataInspector')}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
-                        <DropdownMenuItem onClick={() => navigate(viewId ? `../../views/${viewId}` : `views/${activeViewId}`, { relative: 'path' })}>
+                        <DropdownMenuItem onClick={() => setShowViewConfigPanel(prev => !prev)}>
                           <Settings2 className="h-4 w-4 mr-2" />
                           {t('console.objectView.editView')}
                         </DropdownMenuItem>
@@ -415,8 +448,8 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
 
              {/* 2. Content — Plugin ObjectView with ViewSwitcher + Filter + Sort */}
              <div className="flex-1 overflow-hidden relative flex flex-row">
-                <div className="flex-1 relative h-full">
-                    <div className="absolute inset-0 overflow-auto p-3 sm:p-4">
+                <div className="flex-1 relative h-full flex flex-col">
+                    <div className="flex-1 relative overflow-auto p-3 sm:p-4">
                         <PluginObjectView
                             key={refreshKey}
                             schema={objectViewSchema}
@@ -429,6 +462,12 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
                             renderListView={renderListView}
                         />
                     </div>
+                    {/* Footer — Record count */}
+                    {typeof recordCount === 'number' && (
+                        <div data-testid="record-count-footer" className="border-t px-3 sm:px-4 py-1.5 text-xs text-muted-foreground bg-muted/5 shrink-0">
+                            {t('console.objectView.recordCount', { count: recordCount })}
+                        </div>
+                    )}
                 </div>
                 {/* Metadata panel only shows for admin users */}
                 <MetadataPanel
@@ -438,6 +477,14 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
                         { title: 'Object Definition', data: objectDef },
                     ]}
                 />
+                {/* Inline View Config Panel — Airtable-style right sidebar */}
+                <ViewConfigPanel
+                    open={showViewConfigPanel && isAdmin}
+                    onClose={() => setShowViewConfigPanel(false)}
+                    activeView={activeView}
+                    objectDef={objectDef}
+                    recordCount={recordCount}
+                />
              </div>
 
              {/* Record Detail Overlay — navigation mode driven by objectDef.navigation */}