diff --git a/ROADMAP.md b/ROADMAP.md
index cb273f3c54..b12c9c40eb 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -49,7 +49,7 @@ Everything below has been built, tested, and verified. These items are stable an
 - **Animation:** 7 presets, reduced-motion aware, page transitions (9 types with View Transitions API).
 - **Notifications:** Toast/banner/snackbar with full CRUD integration.
 - **View Enhancements:** Gallery, column summary, grouping, row color, density modes, view sharing, ViewTabBar (reorder, pin, context menu, type-switch, personal/shared grouping).
-- **Inline View Config Panel:** Airtable-style right sidebar for view configuration (Page, Data, Appearance, User Filters, Actions, Advanced), breadcrumb header, record count footer, responsive mobile overlay, ARIA accessibility, auto-close on view switch — no page navigation required.
+- **Inline View Config Panel:** Airtable-style right sidebar for view configuration (Page, Data, Appearance, User Filters, Actions, Advanced), breadcrumb header, record count footer, responsive mobile overlay, ARIA accessibility, auto-close on view switch — no page navigation required. Full interactive editing support: inline title editing, Switch toggles for all boolean settings, ViewType select, clickable rows to open sub-editors (columns/filters/sort), local draft state with Save/Discard workflow, i18n in all 10 locales.
 
 ### Enterprise Features ✅
 
diff --git a/ROADMAP_CONSOLE.md b/ROADMAP_CONSOLE.md
index dfac2923b7..186bc5779a 100644
--- a/ROADMAP_CONSOLE.md
+++ b/ROADMAP_CONSOLE.md
@@ -1021,7 +1021,7 @@ These were the initial tasks to bring the console prototype to production-qualit
 | **Global Undo/Redo (Ctrl+Z)** | ✅ Done (global UndoManager + batch ops + persistent stack) | Post v1.0 | Phase 16 (L1+L2) |
 | Notification center | ✅ Partial (ActivityFeed with filter preferences) | Post v1.0 | Phase 17 (L2) |
 | Activity feed | ✅ Done | Post v1.0 | Phase 17 (L1) |
-| **Inline View Config Panel** | ✅ Done (Airtable-style right sidebar, breadcrumb header, record count footer, responsive mobile overlay, ARIA accessibility, auto-close on view switch) | Post v1.0 | Phase 20 |
+| **Inline View Config Panel** | ✅ Done (Airtable-style right sidebar, breadcrumb header, record count footer, responsive mobile overlay, ARIA accessibility, auto-close on view switch, full interactive editing: Switch toggles, inline title edit, ViewType select, clickable sub-editor rows, draft state with Save/Discard) | Post v1.0 | Phase 20 |
 
 ### 5.5 Kanban & Visual Views
 
@@ -1103,7 +1103,7 @@ These were the initial tasks to bring the console prototype to production-qualit
 
 2027 Q1+ — v2.1: INLINE VIEW DESIGNER (✅ Complete)
 ═══════════════════════════════════════════════════════════
-  Phase 20: Inline ViewConfigPanel    ██████████████  ✅ Complete: Airtable-style right sidebar, breadcrumb header, record count footer, responsive mobile overlay, ARIA accessibility, auto-close on view switch
+  Phase 20: Inline ViewConfigPanel    ██████████████  ✅ Complete: Airtable-style right sidebar, full interactive editing (Switch toggles, inline title, ViewType select, sub-editor rows, draft Save/Discard), ARIA accessibility
 ```
 
 ### Milestone Summary
@@ -1118,7 +1118,7 @@ These were the initial tasks to bring the console prototype to production-qualit
 | **v1.1** | v1.1.0 | ✅ Complete | Kanban + Forms + Import/Export (Phases 13-15); all L1 ✅ |
 | **v1.2** | v1.2.0 | ✅ L1 Complete | Undo/Redo + Collaboration (Phases 16-17); L1 integrated into console |
 | **v2.0** | v2.0.0 | ✅ L2 Complete | All L2 features: batch undo, expression formatting, conditional triggers, multi-step actions, swimlane persistence, keyboard nav, file validation, thread resolution, notification prefs |
-| **v2.1** | v2.1.0 | ✅ Complete | Inline ViewConfigPanel (Phase 20): Airtable-style right sidebar for view configuration |
+| **v2.1** | v2.1.0 | ✅ Complete | Inline ViewConfigPanel (Phase 20): Airtable-style right sidebar with full interactive editing support |
 
 ---
 
diff --git a/apps/console/src/__tests__/ViewConfigPanel.test.tsx b/apps/console/src/__tests__/ViewConfigPanel.test.tsx
index 9bc031992f..c1fd75a928 100644
--- a/apps/console/src/__tests__/ViewConfigPanel.test.tsx
+++ b/apps/console/src/__tests__/ViewConfigPanel.test.tsx
@@ -2,6 +2,8 @@
  * ViewConfigPanel Tests
  *
  * Tests for the Airtable-style inline view configuration panel.
+ * Covers: read-only display, interactive editing (Switch, Input, Select),
+ * draft state, save/discard, open editor callbacks, and ARIA accessibility.
  */
 
 import { describe, it, expect, vi } from 'vitest';
@@ -24,6 +26,23 @@ vi.mock('@object-ui/components', () => ({
     Button: ({ children, onClick, title, ...props }: any) => (
         <button onClick={onClick} title={title} {...props}>{children}</button>
     ),
+    Switch: ({ checked, onCheckedChange, ...props }: any) => (
+        <button
+            role="switch"
+            aria-checked={checked}
+            onClick={() => onCheckedChange?.(!checked)}
+            {...props}
+        />
+    ),
+    Input: ({ value, onChange, readOnly, placeholder, ...props }: any) => (
+        <input
+            value={value}
+            onChange={onChange}
+            readOnly={readOnly}
+            placeholder={placeholder}
+            {...props}
+        />
+    ),
 }));
 
 const mockActiveView = {
@@ -81,7 +100,7 @@ describe('ViewConfigPanel', () => {
         expect(screen.getByText('console.objectView.advanced')).toBeInTheDocument();
     });
 
-    it('displays view title', () => {
+    it('displays view title in editable input', () => {
         render(
             <ViewConfigPanel
                 open={true}
@@ -91,10 +110,11 @@ describe('ViewConfigPanel', () => {
             />
         );
 
-        expect(screen.getByText('All Records')).toBeInTheDocument();
+        const titleInput = screen.getByTestId('view-title-input');
+        expect(titleInput).toHaveValue('All Records');
     });
 
-    it('displays object description', () => {
+    it('displays object description as plain text', () => {
         render(
             <ViewConfigPanel
                 open={true}
@@ -147,7 +167,7 @@ describe('ViewConfigPanel', () => {
         expect(screen.getByText('Opportunity')).toBeInTheDocument();
     });
 
-    it('displays view type', () => {
+    it('displays view type in select element', () => {
         render(
             <ViewConfigPanel
                 open={true}
@@ -157,7 +177,8 @@ describe('ViewConfigPanel', () => {
             />
         );
 
-        expect(screen.getByText('Grid')).toBeInTheDocument();
+        const select = screen.getByTestId('view-type-select');
+        expect(select).toHaveValue('grid');
     });
 
     it('calls onClose when close button is clicked', () => {
@@ -187,8 +208,8 @@ describe('ViewConfigPanel', () => {
             />
         );
 
-        expect(screen.getByText('All Records')).toBeInTheDocument();
-        expect(screen.getByText('Grid')).toBeInTheDocument();
+        expect(screen.getByTestId('view-title-input')).toHaveValue('All Records');
+        expect(screen.getByTestId('view-type-select')).toHaveValue('grid');
 
         // Switch to kanban view
         rerender(
@@ -200,8 +221,8 @@ describe('ViewConfigPanel', () => {
             />
         );
 
-        expect(screen.getByText('Pipeline')).toBeInTheDocument();
-        expect(screen.getByText('Kanban')).toBeInTheDocument();
+        expect(screen.getByTestId('view-title-input')).toHaveValue('Pipeline');
+        expect(screen.getByTestId('view-type-select')).toHaveValue('kanban');
     });
 
     it('shows "None" for empty filters and columns', () => {
@@ -251,4 +272,283 @@ describe('ViewConfigPanel', () => {
         expect(panel.className).toContain('absolute');
         expect(panel.className).toContain('sm:relative');
     });
+
+    // ── Interactive editing tests ──
+
+    it('toggles showSearch via Switch and shows save/discard footer', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        // Initially no footer (not dirty)
+        expect(screen.queryByTestId('view-config-footer')).not.toBeInTheDocument();
+
+        // Toggle showSearch switch (default is on → turn off)
+        const searchSwitch = screen.getByTestId('toggle-showSearch');
+        fireEvent.click(searchSwitch);
+
+        expect(onViewUpdate).toHaveBeenCalledWith('showSearch', false);
+        // Footer should appear after modification
+        expect(screen.getByTestId('view-config-footer')).toBeInTheDocument();
+    });
+
+    it('toggles showFilters via Switch', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        const filterSwitch = screen.getByTestId('toggle-showFilters');
+        fireEvent.click(filterSwitch);
+        expect(onViewUpdate).toHaveBeenCalledWith('showFilters', false);
+    });
+
+    it('toggles showSort via Switch', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        const sortSwitch = screen.getByTestId('toggle-showSort');
+        fireEvent.click(sortSwitch);
+        expect(onViewUpdate).toHaveBeenCalledWith('showSort', false);
+    });
+
+    it('toggles allowExport via Switch', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        const exportSwitch = screen.getByTestId('toggle-allowExport');
+        fireEvent.click(exportSwitch);
+        expect(onViewUpdate).toHaveBeenCalledWith('allowExport', false);
+    });
+
+    it('toggles addRecordViaForm via Switch', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        const formSwitch = screen.getByTestId('toggle-addRecordViaForm');
+        fireEvent.click(formSwitch);
+        expect(onViewUpdate).toHaveBeenCalledWith('addRecordViaForm', true);
+    });
+
+    it('edits view title via inline input', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        const titleInput = screen.getByTestId('view-title-input');
+        fireEvent.change(titleInput, { target: { value: 'My Custom View' } });
+
+        expect(onViewUpdate).toHaveBeenCalledWith('label', 'My Custom View');
+    });
+
+    it('changes view type via select', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        const typeSelect = screen.getByTestId('view-type-select');
+        fireEvent.change(typeSelect, { target: { value: 'kanban' } });
+
+        expect(onViewUpdate).toHaveBeenCalledWith('type', 'kanban');
+    });
+
+    it('calls onOpenEditor when clicking columns row', () => {
+        const onOpenEditor = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onOpenEditor={onOpenEditor}
+            />
+        );
+
+        // Click the columns row — it's a button with the columns label
+        const columnsRow = screen.getByText('console.objectView.columns').closest('button');
+        expect(columnsRow).toBeTruthy();
+        fireEvent.click(columnsRow!);
+
+        expect(onOpenEditor).toHaveBeenCalledWith('columns');
+    });
+
+    it('calls onOpenEditor when clicking filters row', () => {
+        const onOpenEditor = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onOpenEditor={onOpenEditor}
+            />
+        );
+
+        const filterRow = screen.getByText('console.objectView.filterBy').closest('button');
+        expect(filterRow).toBeTruthy();
+        fireEvent.click(filterRow!);
+
+        expect(onOpenEditor).toHaveBeenCalledWith('filters');
+    });
+
+    it('calls onOpenEditor when clicking sort row', () => {
+        const onOpenEditor = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onOpenEditor={onOpenEditor}
+            />
+        );
+
+        const sortRow = screen.getByText('console.objectView.sortBy').closest('button');
+        expect(sortRow).toBeTruthy();
+        fireEvent.click(sortRow!);
+
+        expect(onOpenEditor).toHaveBeenCalledWith('sort');
+    });
+
+    it('saves draft via onSave when Save button is clicked', () => {
+        const onSave = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onSave={onSave}
+            />
+        );
+
+        // Make a change to trigger dirty state
+        const titleInput = screen.getByTestId('view-title-input');
+        fireEvent.change(titleInput, { target: { value: 'Updated Title' } });
+
+        // Footer should be visible
+        expect(screen.getByTestId('view-config-footer')).toBeInTheDocument();
+
+        // Click save
+        const saveBtn = screen.getByTestId('view-config-save');
+        fireEvent.click(saveBtn);
+
+        expect(onSave).toHaveBeenCalledOnce();
+        expect(onSave.mock.calls[0][0]).toMatchObject({ label: 'Updated Title' });
+    });
+
+    it('discards draft changes when Discard button is clicked', () => {
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+            />
+        );
+
+        // Make a change
+        const titleInput = screen.getByTestId('view-title-input');
+        fireEvent.change(titleInput, { target: { value: 'Changed Title' } });
+
+        // Footer should be visible
+        expect(screen.getByTestId('view-config-footer')).toBeInTheDocument();
+
+        // Click discard
+        const discardBtn = screen.getByTestId('view-config-discard');
+        fireEvent.click(discardBtn);
+
+        // Title should revert to original
+        expect(screen.getByTestId('view-title-input')).toHaveValue('All Records');
+        // Footer should disappear (no longer dirty)
+        expect(screen.queryByTestId('view-config-footer')).not.toBeInTheDocument();
+    });
+
+    it('hides save/discard footer after save completes', () => {
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onSave={vi.fn()}
+            />
+        );
+
+        // Make a change
+        fireEvent.change(screen.getByTestId('view-title-input'), { target: { value: 'Tmp' } });
+        expect(screen.getByTestId('view-config-footer')).toBeInTheDocument();
+
+        // Save — footer should disappear
+        fireEvent.click(screen.getByTestId('view-config-save'));
+        expect(screen.queryByTestId('view-config-footer')).not.toBeInTheDocument();
+    });
+
+    it('renders all Switch toggles with correct initial state', () => {
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={{ ...mockActiveView, showSearch: false, showFilters: true, showSort: false, allowExport: false, addRecordViaForm: true }}
+                objectDef={mockObjectDef}
+            />
+        );
+
+        expect(screen.getByTestId('toggle-showSearch')).toHaveAttribute('aria-checked', 'false');
+        expect(screen.getByTestId('toggle-showFilters')).toHaveAttribute('aria-checked', 'true');
+        expect(screen.getByTestId('toggle-showSort')).toHaveAttribute('aria-checked', 'false');
+        expect(screen.getByTestId('toggle-allowExport')).toHaveAttribute('aria-checked', 'false');
+        expect(screen.getByTestId('toggle-addRecordViaForm')).toHaveAttribute('aria-checked', 'true');
+    });
 });
diff --git a/apps/console/src/components/ObjectView.tsx b/apps/console/src/components/ObjectView.tsx
index 84797df541..441455e2b4 100644
--- a/apps/console/src/components/ObjectView.tsx
+++ b/apps/console/src/components/ObjectView.tsx
@@ -24,7 +24,7 @@ import { Button, Empty, EmptyTitle, EmptyDescription, NavigationOverlay, Dropdow
 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 { ViewConfigPanel, type EditorPanelType } from './ViewConfigPanel';
 import { useObjectActions } from '../hooks/useObjectActions';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { usePermissions } from '@object-ui/permissions';
@@ -66,6 +66,18 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
     // Inline view config panel state (Airtable-style right sidebar)
     const [showViewConfigPanel, setShowViewConfigPanel] = useState(false);
     
+    // Draft state for view config edits — cached locally, saved on demand
+    const [viewDraft, setViewDraft] = useState<Record<string, any> | null>(null);
+    
+    const handleViewConfigSave = useCallback((draft: Record<string, any>) => {
+        setViewDraft(draft);
+        setRefreshKey(k => k + 1);
+    }, []);
+    
+    const handleOpenEditor = useCallback((editor: EditorPanelType) => {
+        console.info('[ViewConfigPanel] Open editor:', editor);
+    }, []);
+    
     // Record count tracking for footer
     const [recordCount, setRecordCount] = useState<number | undefined>(undefined);
     
@@ -115,9 +127,12 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
         return viewList;
     }, [objectDef]);
 
-    // Active View State
+    // Active View State — merge saved draft if available for this view
     const activeViewId = viewId || searchParams.get('view') || views[0]?.id;
-    const activeView = views.find((v: any) => v.id === activeViewId) || views[0];
+    const baseView = views.find((v: any) => v.id === activeViewId) || views[0];
+    const activeView = viewDraft && viewDraft.id === baseView?.id
+        ? { ...baseView, ...viewDraft }
+        : baseView;
 
     const handleViewChange = (newViewId: string) => {
         // The plugin ObjectView returns the view ID directly via onViewChange
@@ -486,6 +501,8 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
                     activeView={activeView}
                     objectDef={objectDef}
                     recordCount={recordCount}
+                    onOpenEditor={handleOpenEditor}
+                    onSave={handleViewConfigSave}
                 />
              </div>
 
diff --git a/apps/console/src/components/ViewConfigPanel.tsx b/apps/console/src/components/ViewConfigPanel.tsx
index b3a809a0a4..cf92f46077 100644
--- a/apps/console/src/components/ViewConfigPanel.tsx
+++ b/apps/console/src/components/ViewConfigPanel.tsx
@@ -2,16 +2,19 @@
  * ViewConfigPanel
  *
  * Airtable-style right-side configuration panel for inline view editing.
- * Displays view settings organized into sections: Page, Data, Appearance,
- * User Filters, User Actions, and Advanced.
+ * Supports full interactive editing: inline text fields, toggle switches,
+ * view type selection, and clickable rows for opening sub-editors.
+ *
+ * All changes are buffered in a local draft state. Clicking Save commits
+ * the draft via onSave; Discard resets to the original activeView.
  *
  * Designed to be rendered inline (no overlay/Sheet) alongside the main content,
  * following the same pattern as MetadataPanel.
  */
 
-import { useMemo, useEffect, useRef } from 'react';
-import { Button } from '@object-ui/components';
-import { X, ChevronRight } from 'lucide-react';
+import { useMemo, useEffect, useRef, useState, useCallback } from 'react';
+import { Button, Switch, Input } from '@object-ui/components';
+import { X, ChevronRight, Save, RotateCcw } from 'lucide-react';
 import { useObjectTranslation } from '@object-ui/i18n';
 
 /** View type labels for display */
@@ -26,6 +29,12 @@ const VIEW_TYPE_LABELS: Record<string, string> = {
     chart: 'Chart',
 };
 
+/** All available view type keys */
+const VIEW_TYPE_OPTIONS = Object.keys(VIEW_TYPE_LABELS);
+
+/** Editor panel types that can be opened from clickable rows */
+export type EditorPanelType = 'columns' | 'filters' | 'sort';
+
 export interface ViewConfigPanelProps {
     /** Whether the panel is open */
     open: boolean;
@@ -40,6 +49,13 @@ export interface ViewConfigPanelProps {
         filter?: any[];
         sort?: any[];
         description?: string;
+        showSearch?: boolean;
+        showFilters?: boolean;
+        showSort?: boolean;
+        allowExport?: boolean;
+        showDescription?: boolean;
+        addRecordViaForm?: boolean;
+        exportOptions?: any;
         [key: string]: any;
     };
     /** The object definition */
@@ -52,17 +68,28 @@ export interface ViewConfigPanelProps {
     };
     /** Optional record count to display */
     recordCount?: number;
+    /** Called when any view config field changes (local draft update) */
+    onViewUpdate?: (field: string, value: any) => void;
+    /** Called to open a sub-editor panel (columns, filters, sort) */
+    onOpenEditor?: (editor: EditorPanelType) => void;
+    /** Called to persist all draft changes */
+    onSave?: (draft: Record<string, any>) => void;
 }
 
 /** A single labeled row in the config panel */
-function ConfigRow({ label, value, children }: { label: string; value?: string; children?: React.ReactNode }) {
+function ConfigRow({ label, value, onClick, children }: { label: string; value?: string; onClick?: () => void; children?: React.ReactNode }) {
+    const Wrapper = onClick ? 'button' : 'div';
     return (
-        <div className="flex items-center justify-between py-1.5 min-h-[32px]">
+        <Wrapper
+            className={`flex items-center justify-between py-1.5 min-h-[32px] w-full text-left ${onClick ? 'cursor-pointer hover:bg-accent/50 rounded-sm -mx-1 px-1' : ''}`}
+            onClick={onClick}
+            type={onClick ? 'button' : undefined}
+        >
             <span className="text-xs text-muted-foreground shrink-0">{label}</span>
             {children || (
                 <span className="text-xs text-foreground truncate ml-4 text-right">{value}</span>
             )}
-        </div>
+        </Wrapper>
     );
 }
 
@@ -75,29 +102,20 @@ function SectionHeader({ title }: { title: string }) {
     );
 }
 
-/** A toggle-style indicator (read-only for now, shows on/off state) */
-function ToggleIndicator({ enabled }: { enabled: boolean }) {
-    return (
-        <div
-            className={`w-8 h-5 rounded-full relative transition-colors ${
-                enabled ? 'bg-primary' : 'bg-muted'
-            }`}
-            role="img"
-            aria-label={enabled ? 'Enabled' : 'Disabled'}
-        >
-            <div
-                className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform ${
-                    enabled ? 'translate-x-3.5' : 'translate-x-0.5'
-                }`}
-            />
-        </div>
-    );
-}
-
-export function ViewConfigPanel({ open, onClose, activeView, objectDef }: ViewConfigPanelProps) {
+export function ViewConfigPanel({ open, onClose, activeView, objectDef, onViewUpdate, onOpenEditor, onSave }: ViewConfigPanelProps) {
     const { t } = useObjectTranslation();
     const panelRef = useRef<HTMLDivElement>(null);
 
+    // Local draft state — clone of activeView, mutated by UI interactions
+    const [draft, setDraft] = useState<Record<string, any>>({});
+    const [isDirty, setIsDirty] = useState(false);
+
+    // Reset draft when activeView changes (e.g. switching views)
+    useEffect(() => {
+        setDraft({ ...activeView });
+        setIsDirty(false);
+    }, [activeView]);
+
     // Focus the panel when it opens for keyboard accessibility
     useEffect(() => {
         if (open && panelRef.current) {
@@ -105,16 +123,37 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef }: ViewCo
         }
     }, [open]);
 
-    const viewLabel = activeView.label || activeView.id;
-    const viewType = activeView.type || 'grid';
-    const columnCount = activeView.columns?.length || 0;
-    const filterCount = Array.isArray(activeView.filter) ? activeView.filter.length : 0;
-    const sortCount = Array.isArray(activeView.sort) ? activeView.sort.length : 0;
+    /** Update a single field in the draft */
+    const updateDraft = useCallback((field: string, value: any) => {
+        setDraft(prev => ({ ...prev, [field]: value }));
+        setIsDirty(true);
+        onViewUpdate?.(field, value);
+    }, [onViewUpdate]);
+
+    /** Discard all draft changes */
+    const handleDiscard = useCallback(() => {
+        setDraft({ ...activeView });
+        setIsDirty(false);
+    }, [activeView]);
+
+    /** Save draft via parent callback */
+    const handleSave = useCallback(() => {
+        onSave?.(draft);
+        setIsDirty(false);
+    }, [draft, onSave]);
+
+    const viewLabel = draft.label || draft.id || activeView.id;
+    const viewType = draft.type || 'grid';
+    const columnCount = draft.columns?.length || 0;
+    const filterCount = Array.isArray(draft.filter) ? draft.filter.length : 0;
+    const sortCount = Array.isArray(draft.sort) ? draft.sort.length : 0;
 
-    const hasSearch = activeView.showSearch !== false;
-    const hasFilter = activeView.showFilters !== false;
-    const hasSort = activeView.showSort !== false;
-    const hasExport = activeView.exportOptions !== undefined || activeView.allowExport !== false;
+    const hasSearch = draft.showSearch !== false;
+    const hasFilter = draft.showFilters !== false;
+    const hasSort = draft.showSort !== false;
+    const hasExport = draft.exportOptions !== undefined || draft.allowExport !== false;
+    const hasAddForm = draft.addRecordViaForm === true;
+    const hasShowDescription = draft.showDescription !== false;
 
     // Format filter summary
     const filterSummary = useMemo(() => {
@@ -125,8 +164,8 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef }: ViewCo
     // Format sort summary
     const sortSummary = useMemo(() => {
         if (sortCount === 0) return t('console.objectView.none');
-        return activeView.sort?.map((s: any) => `${s.field} ${s.order || s.direction || 'asc'}`).join(', ') || t('console.objectView.none');
-    }, [activeView.sort, sortCount, t]);
+        return draft.sort?.map((s: any) => `${s.field} ${s.order || s.direction || 'asc'}`).join(', ') || t('console.objectView.none');
+    }, [draft.sort, sortCount, t]);
 
     if (!open) return null;
 
@@ -160,7 +199,14 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef }: ViewCo
                 {/* Page Section */}
                 <SectionHeader title={t('console.objectView.page')} />
                 <div className="space-y-0.5">
-                    <ConfigRow label={t('console.objectView.title')} value={viewLabel} />
+                    <ConfigRow label={t('console.objectView.title')}>
+                        <Input
+                            data-testid="view-title-input"
+                            className="h-7 text-xs w-32 text-right"
+                            value={viewLabel}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateDraft('label', e.target.value)}
+                        />
+                    </ConfigRow>
                     <ConfigRow label={t('console.objectView.description')}>
                         <span className="text-xs text-muted-foreground italic truncate ml-4 text-right">
                             {objectDef.description || t('console.objectView.noDescription')}
@@ -172,19 +218,19 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef }: ViewCo
                 <SectionHeader title={t('console.objectView.data')} />
                 <div className="space-y-0.5">
                     <ConfigRow label={t('console.objectView.source')} value={objectDef.label || objectDef.name} />
-                    <ConfigRow label={t('console.objectView.columns')}>
+                    <ConfigRow label={t('console.objectView.columns')} onClick={() => onOpenEditor?.('columns')}>
                         <span className="text-xs text-foreground flex items-center gap-1">
                             {columnCount > 0 ? t('console.objectView.columnsConfigured', { count: columnCount }) : t('console.objectView.none')}
                             <ChevronRight className="h-3 w-3 text-muted-foreground" />
                         </span>
                     </ConfigRow>
-                    <ConfigRow label={t('console.objectView.filterBy')}>
+                    <ConfigRow label={t('console.objectView.filterBy')} onClick={() => onOpenEditor?.('filters')}>
                         <span className="text-xs text-foreground flex items-center gap-1">
                             {filterSummary}
                             <ChevronRight className="h-3 w-3 text-muted-foreground" />
                         </span>
                     </ConfigRow>
-                    <ConfigRow label={t('console.objectView.sortBy')}>
+                    <ConfigRow label={t('console.objectView.sortBy')} onClick={() => onOpenEditor?.('sort')}>
                         <span className="text-xs text-foreground flex items-center gap-1 truncate max-w-[140px]">
                             {sortSummary}
                             <ChevronRight className="h-3 w-3 text-muted-foreground shrink-0" />
@@ -196,22 +242,53 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef }: ViewCo
                 <SectionHeader title={t('console.objectView.appearance')} />
                 <div className="space-y-0.5">
                     <ConfigRow label={t('console.objectView.showDescription')}>
-                        <ToggleIndicator enabled={!!objectDef.description} />
+                        <Switch
+                            data-testid="toggle-showDescription"
+                            checked={hasShowDescription}
+                            onCheckedChange={(checked: boolean) => updateDraft('showDescription', checked)}
+                            className="scale-75"
+                        />
+                    </ConfigRow>
+                    <ConfigRow label={t('console.objectView.viewType')}>
+                        <select
+                            data-testid="view-type-select"
+                            className="text-xs h-7 rounded-md border border-input bg-background px-2 text-foreground"
+                            value={viewType}
+                            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => updateDraft('type', e.target.value)}
+                        >
+                            {VIEW_TYPE_OPTIONS.map(vt => (
+                                <option key={vt} value={vt}>{VIEW_TYPE_LABELS[vt]}</option>
+                            ))}
+                        </select>
                     </ConfigRow>
-                    <ConfigRow label={t('console.objectView.viewType')} value={VIEW_TYPE_LABELS[viewType] || viewType} />
                 </div>
 
                 {/* User Filters Section */}
                 <SectionHeader title={t('console.objectView.userFilters')} />
                 <div className="space-y-0.5">
                     <ConfigRow label={t('console.objectView.enableSearch')}>
-                        <ToggleIndicator enabled={hasSearch} />
+                        <Switch
+                            data-testid="toggle-showSearch"
+                            checked={hasSearch}
+                            onCheckedChange={(checked: boolean) => updateDraft('showSearch', checked)}
+                            className="scale-75"
+                        />
                     </ConfigRow>
                     <ConfigRow label={t('console.objectView.enableFilter')}>
-                        <ToggleIndicator enabled={hasFilter} />
+                        <Switch
+                            data-testid="toggle-showFilters"
+                            checked={hasFilter}
+                            onCheckedChange={(checked: boolean) => updateDraft('showFilters', checked)}
+                            className="scale-75"
+                        />
                     </ConfigRow>
                     <ConfigRow label={t('console.objectView.enableSort')}>
-                        <ToggleIndicator enabled={hasSort} />
+                        <Switch
+                            data-testid="toggle-showSort"
+                            checked={hasSort}
+                            onCheckedChange={(checked: boolean) => updateDraft('showSort', checked)}
+                            className="scale-75"
+                        />
                     </ConfigRow>
                 </div>
 
@@ -219,7 +296,12 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef }: ViewCo
                 <SectionHeader title={t('console.objectView.userActions')} />
                 <div className="space-y-0.5">
                     <ConfigRow label={t('console.objectView.addRecordViaForm')}>
-                        <ToggleIndicator enabled={false} />
+                        <Switch
+                            data-testid="toggle-addRecordViaForm"
+                            checked={hasAddForm}
+                            onCheckedChange={(checked: boolean) => updateDraft('addRecordViaForm', checked)}
+                            className="scale-75"
+                        />
                     </ConfigRow>
                 </div>
 
@@ -227,10 +309,40 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef }: ViewCo
                 <SectionHeader title={t('console.objectView.advanced')} />
                 <div className="space-y-0.5">
                     <ConfigRow label={t('console.objectView.allowExport')}>
-                        <ToggleIndicator enabled={hasExport} />
+                        <Switch
+                            data-testid="toggle-allowExport"
+                            checked={hasExport}
+                            onCheckedChange={(checked: boolean) => updateDraft('allowExport', checked)}
+                            className="scale-75"
+                        />
                     </ConfigRow>
                 </div>
             </div>
+
+            {/* Footer — Save / Discard buttons */}
+            {isDirty && (
+                <div data-testid="view-config-footer" className="px-4 py-3 border-t flex items-center justify-end gap-2 shrink-0 bg-background">
+                    <Button
+                        size="sm"
+                        variant="outline"
+                        className="h-8 gap-1.5"
+                        onClick={handleDiscard}
+                        data-testid="view-config-discard"
+                    >
+                        <RotateCcw className="h-3.5 w-3.5" />
+                        {t('console.objectView.discard')}
+                    </Button>
+                    <Button
+                        size="sm"
+                        className="h-8 gap-1.5"
+                        onClick={handleSave}
+                        data-testid="view-config-save"
+                    >
+                        <Save className="h-3.5 w-3.5" />
+                        {t('console.objectView.save')}
+                    </Button>
+                </div>
+            )}
         </div>
     );
 }
diff --git a/packages/i18n/src/locales/ar.ts b/packages/i18n/src/locales/ar.ts
index a6f9b6d923..f4711b60e4 100644
--- a/packages/i18n/src/locales/ar.ts
+++ b/packages/i18n/src/locales/ar.ts
@@ -208,6 +208,8 @@ const ar = {
       noDescription: 'لا يوجد وصف',
       none: 'لا شيء',
       columnsConfigured: '{{count}} أعمدة',
+      save: 'حفظ',
+      discard: 'تجاهل',
     },
     localeSwitcher: {
       label: 'اللغة',
diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts
index 0e9d2ce7d4..9cd28e7104 100644
--- a/packages/i18n/src/locales/de.ts
+++ b/packages/i18n/src/locales/de.ts
@@ -212,6 +212,8 @@ const de = {
       noDescription: 'Keine Beschreibung',
       none: 'Keine',
       columnsConfigured: '{{count}} Spalten',
+      save: 'Speichern',
+      discard: 'Verwerfen',
     },
     localeSwitcher: {
       label: 'Sprache',
diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts
index 8b5d886e01..f6fde1052f 100644
--- a/packages/i18n/src/locales/en.ts
+++ b/packages/i18n/src/locales/en.ts
@@ -212,6 +212,8 @@ const en = {
       noDescription: 'No description',
       none: 'None',
       columnsConfigured: '{{count}} columns',
+      save: 'Save',
+      discard: 'Discard',
     },
     localeSwitcher: {
       label: 'Language',
diff --git a/packages/i18n/src/locales/es.ts b/packages/i18n/src/locales/es.ts
index 4009d84651..9757d1ce58 100644
--- a/packages/i18n/src/locales/es.ts
+++ b/packages/i18n/src/locales/es.ts
@@ -207,6 +207,8 @@ const es = {
       noDescription: 'Sin descripción',
       none: 'Ninguno',
       columnsConfigured: '{{count}} columnas',
+      save: 'Guardar',
+      discard: 'Descartar',
     },
     localeSwitcher: {
       label: 'Idioma',
diff --git a/packages/i18n/src/locales/fr.ts b/packages/i18n/src/locales/fr.ts
index 092b03adcf..30d20b6c02 100644
--- a/packages/i18n/src/locales/fr.ts
+++ b/packages/i18n/src/locales/fr.ts
@@ -212,6 +212,8 @@ const fr = {
       noDescription: 'Aucune description',
       none: 'Aucun',
       columnsConfigured: '{{count}} colonnes',
+      save: 'Enregistrer',
+      discard: 'Annuler',
     },
     localeSwitcher: {
       label: 'Langue',
diff --git a/packages/i18n/src/locales/ja.ts b/packages/i18n/src/locales/ja.ts
index 0d445dd041..a3a6c563d3 100644
--- a/packages/i18n/src/locales/ja.ts
+++ b/packages/i18n/src/locales/ja.ts
@@ -207,6 +207,8 @@ const ja = {
       noDescription: '説明なし',
       none: 'なし',
       columnsConfigured: '{{count}} 列',
+      save: '保存',
+      discard: '破棄',
     },
     localeSwitcher: {
       label: '言語',
diff --git a/packages/i18n/src/locales/ko.ts b/packages/i18n/src/locales/ko.ts
index bc478ca44e..4c70883d0f 100644
--- a/packages/i18n/src/locales/ko.ts
+++ b/packages/i18n/src/locales/ko.ts
@@ -207,6 +207,8 @@ const ko = {
       noDescription: '설명 없음',
       none: '없음',
       columnsConfigured: '{{count}}개 열',
+      save: '저장',
+      discard: '취소',
     },
     localeSwitcher: {
       label: '언어',
diff --git a/packages/i18n/src/locales/pt.ts b/packages/i18n/src/locales/pt.ts
index 79c4bb657a..5183c758b3 100644
--- a/packages/i18n/src/locales/pt.ts
+++ b/packages/i18n/src/locales/pt.ts
@@ -207,6 +207,8 @@ const pt = {
       noDescription: 'Sem descrição',
       none: 'Nenhum',
       columnsConfigured: '{{count}} colunas',
+      save: 'Salvar',
+      discard: 'Descartar',
     },
     localeSwitcher: {
       label: 'Idioma',
diff --git a/packages/i18n/src/locales/ru.ts b/packages/i18n/src/locales/ru.ts
index fa85f6f176..da7808da10 100644
--- a/packages/i18n/src/locales/ru.ts
+++ b/packages/i18n/src/locales/ru.ts
@@ -207,6 +207,8 @@ const ru = {
       noDescription: 'Нет описания',
       none: 'Нет',
       columnsConfigured: '{{count}} столбцов',
+      save: 'Сохранить',
+      discard: 'Отменить',
     },
     localeSwitcher: {
       label: 'Язык',
diff --git a/packages/i18n/src/locales/zh.ts b/packages/i18n/src/locales/zh.ts
index 21af88de80..6db20be51f 100644
--- a/packages/i18n/src/locales/zh.ts
+++ b/packages/i18n/src/locales/zh.ts
@@ -212,6 +212,8 @@ const zh = {
       noDescription: '无描述',
       none: '无',
       columnsConfigured: '{{count}} 列',
+      save: '保存',
+      discard: '丢弃',
     },
     localeSwitcher: {
       label: '语言',