Merge pull request #873 from objectstack-ai/copilot/fix-254823548-1133319012-be8f04da-b197-46a0-a6e0-288e44824b63

Author: hotlong

ROADMAP.md

@@ -13,11 +13,11 @@
 
 ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind + Shadcn. It renders JSON metadata from the @objectstack/spec protocol into pixel-perfect, accessible, and interactive enterprise interfaces.
 
-**Where We Are:** Foundation is **solid and shipping** — 35 packages, 99+ components, 6,500+ tests, 80 Storybook stories, 43/43 builds passing, ~85% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Designer Phase 1 (ViewDesigner drag-to-reorder ✅), Console through Phase 20 (L3), **AppShell Navigation Renderer** (P0.1), **Flow Designer** (P2.4), **Feed/Chatter UI** (P1.5), **App Creation & Editing Flow** (P1.11), **System Settings & App Management** (P1.12), **Page/Dashboard Editor Console Integration** (P1.11), and **Right-Side Visual Editor Drawer** (P1.11) — all ✅ complete.
+**Where We Are:** Foundation is **solid and shipping** — 35 packages, 99+ components, 6,500+ tests, 80 Storybook stories, 43/43 builds passing, ~85% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Console through Phase 20 (L3), **AppShell Navigation Renderer** (P0.1), **Flow Designer** (P2.4), **Feed/Chatter UI** (P1.5), **App Creation & Editing Flow** (P1.11), **System Settings & App Management** (P1.12), **Page/Dashboard Editor Console Integration** (P1.11), and **Right-Side Visual Editor Drawer** (P1.11) — all ✅ complete. **ViewDesigner** has been removed — its capabilities (drag-to-reorder, undo/redo) are now provided by the ViewConfigPanel (right-side config panel).
 
 **What Remains:** The gap to **Airtable-level UX** is primarily in:
 1. ~~**AppShell** — No dynamic navigation renderer from spec JSON (last P0 blocker)~~ ✅ Complete
-2. **Designer Interaction** — ViewDesigner and DataModelDesigner have undo/redo, field type selectors, inline editing, Ctrl+S save, column drag-to-reorder with dnd-kit ✅
+2. **Designer Interaction** — DataModelDesigner has undo/redo, field type selectors, inline editing, Ctrl+S save. ViewDesigner has been removed; its capabilities (drag-to-reorder columns via @dnd-kit, undo/redo via useConfigDraft history) are now integrated into ViewConfigPanel (right-side config panel) ✅
 3. **View Config Live Preview Sync** — Config panel changes sync in real-time for Grid, but `showSort`/`showSearch`/`showFilters`/`striped`/`bordered` not yet propagated to Kanban/Calendar/Timeline/Gallery/Map/Gantt (see P1.8.1)
 4. **Dashboard Config Panel** — Airtable-style right-side configuration panel for dashboards (data source, layout, widget properties, sub-editors, type definitions). Widget config live preview sync and scatter chart type switch ✅ fixed (P1.10 Phase 10). Dashboard save/refresh metadata sync ✅ fixed (P1.10 Phase 11). Data provider field override for live preview ✅ fixed (P1.10 Phase 12).
 5. **Console Advanced Polish** — Remaining upgrades for forms, import/export, automation, comments
@@ -89,15 +89,18 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 
 > **Priority #1.** All items below directly affect end-user experience. Target: indistinguishable from Airtable for core CRUD workflows.
 
-### P1.1 Designer Interaction (ViewDesigner + DataModelDesigner)
+### P1.1 Designer Interaction (DataModelDesigner)
 
-> Source: ROADMAP_DESIGNER Phase 2. These two designers are the core user workflow.
+> Source: ROADMAP_DESIGNER Phase 2. ViewDesigner has been removed — its capabilities (column reorder, undo/redo) are now provided by ViewConfigPanel.
 
-**ViewDesigner:**
+**ViewDesigner:** _(Removed — replaced by ViewConfigPanel)_
 - [x] Column drag-to-reorder via `@dnd-kit/core` (replace up/down buttons with drag handles)
 - [x] Add `Ctrl+S`/`Cmd+S` keyboard shortcut to save
 - [x] Add field type selector dropdown with icons from `DESIGNER_FIELD_TYPES`
 - [x] Column width validation (min/max/pattern check)
+- [x] Removed: ViewDesigner replaced by ViewConfigPanel (right-side config panel)
+- [x] ViewConfigPanel upgraded: undo/redo integrated into `useConfigDraft` hook
+- [x] ViewConfigPanel upgraded: drag-and-drop column sorting via `@dnd-kit/sortable`
 
 **DataModelDesigner:**
 - [x] Entity drag-to-move on canvas
@@ -107,7 +110,7 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 
 **Shared Infrastructure:**
 - [x] Implement `useDesignerHistory` hook (command pattern with undo/redo stacks)
-- [x] Wire undo/redo to ViewDesigner and DataModelDesigner
+- [x] Wire undo/redo to DataModelDesigner
 
 ### P1.2 Console — Forms & Data Collection
 
@@ -207,7 +210,7 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Type-specific options in config panel (kanban/calendar/map/gallery/timeline/gantt)
 - [x] Unified create/edit mode (`mode="create"|"edit"`) — single panel entry point
 - [x] Unified data model (`UnifiedViewConfig`) for view configuration
-- [x] ViewDesigner retained as "Advanced Editor" with weaker entry point
+- [x] ViewDesigner removed — its capabilities replaced by ViewConfigPanel (right-side config panel)
 - [x] Panel header breadcrumb navigation (Page > List/Kanban/Gallery)
 - [x] Collapsible/expandable sections with chevron toggle
 - [x] Data section: Sort by (summary), Group by, Prefix field, Fields (count visible)
@@ -1012,7 +1015,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 |--------|---------|-------------|--------------|
 | **Protocol Alignment** | ~85% | 90%+ (UI-facing) | Protocol Consistency Assessment |
 | **AppShell Renderer** | ✅ Complete | Sidebar + nav tree from `AppSchema` JSON | Console renders from spec JSON |
-| **Designer Interaction** | Phase 2 (most complete) | ViewDesigner + DataModelDesigner drag/undo | Manual UX testing |
+| **Designer Interaction** | Phase 2 (most complete) | DataModelDesigner drag/undo; ViewDesigner removed (replaced by ViewConfigPanel) | Manual UX testing |
 | **Build Status** | 42/42 pass | 42/42 pass | `pnpm build` |
 | **Test Count** | 5,070+ | 5,618+ | `pnpm test` summary |
 | **Test Coverage** | 90%+ | 90%+ | `pnpm test:coverage` |
@@ -1046,7 +1049,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 | Risk | Mitigation |
 |------|------------|
 | AppShell complexity (7 nav types, areas, mobile) | Start with static nav tree, add mobile modes incrementally |
-| Designer DnD integration time | Use `@dnd-kit/core` (already proven in Kanban/Dashboard); ViewDesigner first |
+| Designer DnD integration time | Use `@dnd-kit/core` (already proven in Kanban/Dashboard) |
 | Airtable UX bar is high | Focus on Grid + Kanban + Form triad first; defer Gallery/Timeline polish |
 | PWA real sync complexity | Keep simulated sync as fallback; real sync behind feature flag |
 | Performance regression | Performance budgets in CI, 10K-record benchmarks |

apps/console/package.json

@@ -33,6 +33,9 @@
     "test:ui": "vitest --ui"
   },
   "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@object-ui/auth": "workspace:*",
     "@object-ui/collaboration": "workspace:*",
     "@object-ui/components": "workspace:*",

apps/console/src/App.tsx

@@ -28,7 +28,6 @@ const RecordDetailView = lazy(() => import('./components/RecordDetailView').then
 const DashboardView = lazy(() => import('./components/DashboardView').then(m => ({ default: m.DashboardView })));
 const PageView = lazy(() => import('./components/PageView').then(m => ({ default: m.PageView })));
 const ReportView = lazy(() => import('./components/ReportView').then(m => ({ default: m.ReportView })));
-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)
@@ -346,14 +345,6 @@ export function AppContent() {
             <RecordDetailView key={refreshKey} dataSource={dataSource} objects={allObjects} onEdit={handleEdit} />
         } />
 
-        {/* View Designer - Create/Edit Views */}
-        <Route path=":objectName/views/new" element={
-            <ViewDesignerPage objects={allObjects} />
-        } />
-        <Route path=":objectName/views/:viewId" element={
-            <ViewDesignerPage objects={allObjects} />
-        } />
-
         <Route path="dashboard/:dashboardName" element={
             <DashboardView dataSource={dataSource} />
         } />

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

@@ -283,21 +283,6 @@ describe('ObjectView Component', () => {
         expect(screen.getByTestId('view-config-panel')).toBeInTheDocument();
     });
 
-    it('navigates to view designer when Advanced Editor is clicked', () => {
-        mockAuthUser = { id: 'u1', name: 'Admin', role: 'admin' };
-        mockUseParams.mockReturnValue({ objectName: 'opportunity' });
-
-        render(<ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />);
-
-        const designBtn = screen.getByTitle('console.objectView.designTools');
-        fireEvent.click(designBtn);
-
-        const advancedBtn = screen.getByText('console.objectView.advancedEditor');
-        fireEvent.click(advancedBtn);
-
-        expect(mockNavigate).toHaveBeenCalledWith('views/new', { relative: 'path' });
-    });
-
     it('shows breadcrumb with object and view name', () => {
         mockUseParams.mockReturnValue({ objectName: 'opportunity' });
 

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

@@ -27,26 +27,64 @@ vi.mock('@object-ui/components', () => {
 
     // useConfigDraft mock — mirrors real implementation
     function useConfigDraft(source: any, options?: any) {
+        const maxHistory = options?.maxHistory ?? 50;
         const [draft, setDraft] = React.useState({ ...source });
         const [isDirty, setIsDirty] = React.useState(options?.mode === 'create');
+        const pastRef = React.useRef<any[]>([]);
+        const futureRef = React.useRef<any[]>([]);
+        const [, forceRender] = React.useState(0);
 
         React.useEffect(() => {
             setDraft({ ...source });
             setIsDirty(options?.mode === 'create');
+            pastRef.current = [];
+            futureRef.current = [];
         }, [source]); // eslint-disable-line react-hooks/exhaustive-deps
 
         const updateField = React.useCallback((field: string, value: any) => {
-            setDraft((prev: any) => ({ ...prev, [field]: value }));
+            setDraft((prev: any) => {
+                pastRef.current = [...pastRef.current.slice(-(maxHistory - 1)), prev];
+                futureRef.current = [];
+                return { ...prev, [field]: value };
+            });
             setIsDirty(true);
+            forceRender((n: number) => n + 1);
             options?.onUpdate?.(field, value);
         }, [options?.onUpdate]);
 
+        const undo = React.useCallback(() => {
+            if (pastRef.current.length === 0) return;
+            setDraft((prev: any) => {
+                const past = [...pastRef.current];
+                const previous = past.pop()!;
+                pastRef.current = past;
+                futureRef.current = [prev, ...futureRef.current];
+                return previous;
+            });
+            forceRender((n: number) => n + 1);
+        }, []);
+
+        const redo = React.useCallback(() => {
+            if (futureRef.current.length === 0) return;
+            setDraft((prev: any) => {
+                const future = [...futureRef.current];
+                const next = future.shift()!;
+                futureRef.current = future;
+                pastRef.current = [...pastRef.current, prev];
+                return next;
+            });
+            forceRender((n: number) => n + 1);
+        }, []);
+
         const discard = React.useCallback(() => {
             setDraft({ ...source });
             setIsDirty(false);
+            pastRef.current = [];
+            futureRef.current = [];
+            forceRender((n: number) => n + 1);
         }, [source]);
 
-        return { draft, isDirty, updateField, discard, setDraft };
+        return { draft, isDirty, updateField, discard, setDraft, undo, redo, canUndo: pastRef.current.length > 0, canRedo: futureRef.current.length > 0 };
     }
 
     // ConfigPanelRenderer mock — renders schema sections with proper collapse/visibility

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

@@ -512,11 +512,6 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
                           <Plus className="h-4 w-4 mr-2" />
                           {t('console.objectView.addView')}
                         </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem onClick={() => navigate(viewId ? '../../views/new' : 'views/new', { relative: 'path' })}>
-                          <Wrench className="h-4 w-4 mr-2" />
-                          {t('console.objectView.advancedEditor')}
-                        </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
                     )}

apps/console/src/components/ObjectView.tsx

@@ -90,7 +90,7 @@ export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, obje
     const effectiveActiveView = mode === 'create' ? defaultNewView : stableActiveView;
 
     // Schema-driven draft state management
-    const { draft, isDirty, updateField, discard } = useConfigDraft(effectiveActiveView, {
+    const { draft, isDirty, updateField, discard, undo, redo, canUndo, canRedo } = useConfigDraft(effectiveActiveView, {
         mode,
         onUpdate: onViewUpdate,
     });
@@ -162,6 +162,12 @@ export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, obje
             onFieldChange={updateField}
             onSave={handleSave}
             onDiscard={handleDiscard}
+            onUndo={undo}
+            onRedo={redo}
+            canUndo={canUndo}
+            canRedo={canRedo}
+            undoLabel={t('designer.undo')}
+            redoLabel={t('designer.redo')}
             objectDef={objectDef}
             saveLabel={t('console.objectView.save')}
             discardLabel={t('console.objectView.discard')}