fix: stabilize config draft, add widget delete, fix live preview

Critical fixes for complete ListView-parity:

1. Stabilize config references using configVersion counter pattern
   (matching ViewConfigPanel's stableActiveView approach) — prevents
   useConfigDraft from resetting the draft on every field change,
   so Save/Discard footer works correctly.

2. Add widget delete button via WidgetConfigPanel's new headerExtra
   prop — renders a Trash2 icon in the config panel header.

3. Fix dashboard config live preview — properly convert refreshInterval
   to number when updating editSchema.

4. Add headerExtra prop to WidgetConfigPanel component.

5. Add tests for widget deletion, live field change preview, and
   config panel header actions.

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

Author: Copilot

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

@@ -115,6 +115,7 @@ vi.mock('@object-ui/plugin-dashboard', () => ({
     return (
       <div data-testid="widget-config-panel">
         <span data-testid="widget-config-title">{props.config?.title ?? 'none'}</span>
+        {props.headerExtra && <div data-testid="widget-config-header-extra">{props.headerExtra}</div>}
         <button data-testid="widget-config-close" onClick={props.onClose}>Close</button>
       </div>
     );
@@ -253,4 +254,58 @@ describe('Dashboard Design Mode — Inline Config Panel', () => {
     expect(screen.getByTestId('renderer-design-mode')).toHaveTextContent('false');
     expect(screen.getByTestId('renderer-selected')).toHaveTextContent('none');
   });
+
+  it('should show delete button in widget config panel header', async () => {
+    await renderDashboardView();
+    await openConfigPanel();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('renderer-widget-w1'));
+    });
+
+    expect(screen.getByTestId('widget-config-header-extra')).toBeInTheDocument();
+    expect(screen.getByTestId('widget-delete-button')).toBeInTheDocument();
+  });
+
+  it('should remove widget and switch to dashboard config when delete is clicked', async () => {
+    await renderDashboardView();
+    await openConfigPanel();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('renderer-widget-w1'));
+    });
+    expect(screen.getByTestId('widget-config-panel')).toBeInTheDocument();
+
+    // Click the delete button
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('widget-delete-button'));
+    });
+
+    // Should switch back to dashboard config (widget deselected)
+    expect(screen.getByTestId('dashboard-config-panel')).toBeInTheDocument();
+    expect(screen.queryByTestId('widget-config-panel')).not.toBeInTheDocument();
+    // Deleted widget should be removed from the preview
+    expect(screen.queryByTestId('renderer-widget-w1')).not.toBeInTheDocument();
+    // Backend should be called to persist the deletion
+    expect(mockUpdate).toHaveBeenCalled();
+  });
+
+  it('should preserve live preview when field changes via onFieldChange', async () => {
+    await renderDashboardView();
+    await openConfigPanel();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('renderer-widget-w1'));
+    });
+
+    // Simulate a live field change via onFieldChange
+    await act(async () => {
+      widgetConfigCalls.onFieldChange?.('title', 'Live Title');
+    });
+
+    // Preview should update live
+    expect(screen.getByTestId('renderer-widget-w1')).toHaveTextContent('Live Title');
+    // Config panel should still show the widget (not reset or disappear)
+    expect(screen.getByTestId('widget-config-panel')).toBeInTheDocument();
+  });
 });

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

@@ -114,6 +114,7 @@ vi.mock('@object-ui/plugin-dashboard', () => ({
     return (
       <div data-testid="widget-config-panel">
         <span data-testid="widget-config-title">{props.config?.title ?? 'none'}</span>
+        {props.headerExtra && <div data-testid="widget-config-header-extra">{props.headerExtra}</div>}
         <button
           data-testid="widget-config-save"
           onClick={() => props.onSave?.({ ...props.config, title: 'Updated Revenue' })}
@@ -307,4 +308,56 @@ describe('DashboardView — Selection Sync Integration', () => {
       }),
     );
   });
+
+  it('should delete widget and persist to backend', async () => {
+    await renderDashboardView();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('dashboard-edit-button'));
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('renderer-widget-w1'));
+    });
+
+    // Click delete
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('widget-delete-button'));
+    });
+
+    // Widget removed from preview
+    expect(screen.queryByTestId('renderer-widget-w1')).not.toBeInTheDocument();
+    // Remaining widget still present
+    expect(screen.getByTestId('renderer-widget-w2')).toBeInTheDocument();
+    // Backend should be called without the deleted widget
+    expect(mockUpdate).toHaveBeenCalledWith(
+      'sys_dashboard',
+      'sales',
+      expect.objectContaining({
+        widgets: expect.not.arrayContaining([
+          expect.objectContaining({ id: 'w1' }),
+        ]),
+      }),
+    );
+  });
+
+  it('should update preview live when onFieldChange fires without resetting config panel', async () => {
+    await renderDashboardView();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('dashboard-edit-button'));
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('renderer-widget-w1'));
+    });
+
+    // Simulate live field change
+    await act(async () => {
+      widgetConfigCalls.onFieldChange?.('title', 'Live Preview Title');
+    });
+
+    // Preview should update
+    expect(screen.getByTestId('renderer-widget-w1')).toHaveTextContent('Live Preview Title');
+    // Widget config panel should still be visible
+    expect(screen.getByTestId('widget-config-panel')).toBeInTheDocument();
+  });
 });

apps/console/src/components/DashboardView.tsx

@@ -12,7 +12,7 @@ import {
   DashboardConfigPanel,
   WidgetConfigPanel,
 } from '@object-ui/plugin-dashboard';
-import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
 import {
   LayoutDashboard,
   Pencil,
@@ -23,6 +23,7 @@ import {
   Table2,
   LayoutGrid,
   Plus,
+  Trash2,
 } from 'lucide-react';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { SkeletonDashboard } from './skeletons';
@@ -111,6 +112,8 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
   const [isLoading, setIsLoading] = useState(true);
   const [configPanelOpen, setConfigPanelOpen] = useState(false);
   const [selectedWidgetId, setSelectedWidgetId] = useState<string | null>(null);
+  // Version counter — incremented on save to refresh the stable config reference
+  const [configVersion, setConfigVersion] = useState(0);
 
   useEffect(() => {
     setIsLoading(true);
@@ -141,6 +144,7 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
   const handleOpenConfigPanel = useCallback(() => {
     setEditSchema(dashboard as DashboardSchema);
     setConfigPanelOpen(true);
+    setConfigVersion((v) => v + 1);
   }, [dashboard]);
 
   const handleCloseConfigPanel = useCallback(() => {
@@ -168,14 +172,35 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
       setEditSchema(newSchema);
       saveSchema(newSchema);
       setSelectedWidgetId(id);
+      setConfigVersion((v) => v + 1);
     },
     [editSchema, saveSchema],
   );
 
+  const removeWidget = useCallback(
+    (widgetId: string) => {
+      if (!editSchema) return;
+      const newSchema = {
+        ...editSchema,
+        widgets: editSchema.widgets.filter((w) => w.id !== widgetId),
+      };
+      setEditSchema(newSchema);
+      saveSchema(newSchema);
+      if (selectedWidgetId === widgetId) {
+        setSelectedWidgetId(null);
+      }
+    },
+    [editSchema, selectedWidgetId, saveSchema],
+  );
+
   // ---- Dashboard config panel handlers ------------------------------------
+  // Stabilize config reference: only recompute when panel opens or after save.
+  // This prevents useConfigDraft from resetting the draft on every parent re-render
+  // (same pattern as ViewConfigPanel's stableActiveView).
   const dashboardConfig = useMemo(
     () => extractDashboardConfig(editSchema || (dashboard as DashboardSchema)),
-    [editSchema, dashboard],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dashboardName, configVersion],
   );
 
   const handleDashboardConfigSave = useCallback(
@@ -185,31 +210,40 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
         ...editSchema,
         columns: config.columns,
         gap: config.gap,
-        rowHeight: config.rowHeight,
         refreshInterval: Number(config.refreshInterval) || 0,
         title: config.title,
-        showDescription: config.showDescription,
-        theme: config.theme,
       } as DashboardSchema;
       setEditSchema(newSchema);
       saveSchema(newSchema);
+      setConfigVersion((v) => v + 1);
     },
     [editSchema, saveSchema],
   );
 
   const handleDashboardFieldChange = useCallback(
     (field: string, value: any) => {
-      setEditSchema((prev) => (prev ? { ...prev, [field]: value } : prev));
+      if (!editSchema) return;
+      // Map config field keys to proper DashboardSchema updates for live preview
+      setEditSchema((prev) => {
+        if (!prev) return prev;
+        if (field === 'refreshInterval') {
+          return { ...prev, refreshInterval: Number(value) || 0 };
+        }
+        return { ...prev, [field]: value };
+      });
     },
-    [],
+    [editSchema],
   );
 
   // ---- Widget config panel handlers ---------------------------------------
   const selectedWidget = editSchema?.widgets?.find((w) => w.id === selectedWidgetId);
 
+  // Stabilize widget config: only recompute when selecting a different widget
+  // or after save — prevents useConfigDraft from resetting the draft on live preview updates.
   const widgetConfig = useMemo(
     () => (selectedWidget ? flattenWidgetConfig(selectedWidget) : {}),
-    [selectedWidget],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedWidgetId, configVersion],
   );
 
   const handleWidgetConfigSave = useCallback(
@@ -224,6 +258,7 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
       };
       setEditSchema(newSchema);
       saveSchema(newSchema);
+      setConfigVersion((v) => v + 1);
     },
     [editSchema, selectedWidgetId, selectedWidget, saveSchema],
   );
@@ -336,6 +371,18 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
              config={widgetConfig}
              onSave={handleWidgetConfigSave}
              onFieldChange={handleWidgetFieldChange}
+             headerExtra={
+               <Button
+                 size="sm"
+                 variant="ghost"
+                 onClick={() => removeWidget(selectedWidgetId!)}
+                 className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                 data-testid="widget-delete-button"
+                 title="Delete widget"
+               >
+                 <Trash2 className="h-3.5 w-3.5" />
+               </Button>
+             }
            />
          ) : (
            <DashboardConfigPanel

packages/plugin-dashboard/src/WidgetConfigPanel.tsx

@@ -177,6 +177,8 @@ export interface WidgetConfigPanelProps {
   onSave: (config: Record<string, any>) => void;
   /** Optional live-update callback */
   onFieldChange?: (field: string, value: any) => void;
+  /** Extra content rendered in the header row (e.g. delete button) */
+  headerExtra?: React.ReactNode;
 }
 
 // ---------------------------------------------------------------------------
@@ -197,6 +199,7 @@ export function WidgetConfigPanel({
   config,
   onSave,
   onFieldChange,
+  headerExtra,
 }: WidgetConfigPanelProps) {
   const { draft, isDirty, updateField, discard } = useConfigDraft(config, {
     onUpdate: onFieldChange,
@@ -212,6 +215,7 @@ export function WidgetConfigPanel({
       onFieldChange={updateField}
       onSave={() => onSave(draft)}
       onDiscard={discard}
+      headerExtra={headerExtra}
     />
   );
 }