fix(studio): interface-page Design tab renders the live list, not a hint (#1695)

The page editor's Design tab showed a static 'Interface page — configured
in Properties' placeholder for interface pages (config-driven, no regions
to drag). Authors edit config on the right but the left didn't reflect it
until switching to Preview. Now PagePreview renders the live
InterfaceListPage for interface pages in BOTH design and preview modes —
right-panel edits reflect live on the left, no tab switch, no placeholder.

Removes the now-dead interface empty-state from PageBlockCanvas (interface
pages never reach it) and flips the PagePreview/PageBlockCanvas tests to
the new behavior.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>

Author: xuyushun441-sys

packages/app-shell/src/views/metadata-admin/previews/PageBlockCanvas.test.tsx

@@ -7,31 +7,13 @@ import { PageBlockCanvas } from './PageBlockCanvas';
 afterEach(cleanup);
 
 /**
- * Empty-canvas messaging (ADR-0047). An interface page (config-driven, no
- * regions) must NOT be invited to "Add region" — it points the author at the
- * Properties → Interface panel instead. A region-composed page keeps the
- * normal "No regions yet / Add region" empty state.
+ * Empty-canvas messaging. Region-composed pages with no regions yet invite
+ * the author to add one. (ADR-0047 interface pages never reach this canvas —
+ * PagePreview renders them as a live InterfaceListPage in both modes — so
+ * there is no interface-specific empty state here.)
  */
 describe('PageBlockCanvas — empty state', () => {
-  it('interface page (interfaceConfig present) shows the Properties hint, not Add region', () => {
-    render(
-      <PageBlockCanvas
-        draft={{ name: 'wb', type: 'list', regions: [], interfaceConfig: { source: 'task' } }}
-        onPatch={() => {}}
-      />,
-    );
-    expect(screen.getByText(/configured in Properties/i)).toBeInTheDocument();
-    expect(screen.queryByText(/Add region/i)).not.toBeInTheDocument();
-    expect(screen.queryByText(/No regions yet/i)).not.toBeInTheDocument();
-  });
-
-  it('a list page without regions is treated as interface mode', () => {
-    render(<PageBlockCanvas draft={{ name: 'wb', type: 'list', regions: [] }} onPatch={() => {}} />);
-    expect(screen.getByText(/configured in Properties/i)).toBeInTheDocument();
-    expect(screen.queryByText(/Add region/i)).not.toBeInTheDocument();
-  });
-
-  it('a region-composed page keeps the "No regions yet / Add region" empty state', () => {
+  it('a region-composed page shows the "No regions yet / Add region" empty state', () => {
     render(<PageBlockCanvas draft={{ name: 'home', type: 'home', regions: [] }} onPatch={() => {}} />);
     expect(screen.getByText(/No regions yet/i)).toBeInTheDocument();
     expect(screen.getByText(/Add region/i)).toBeInTheDocument();

packages/app-shell/src/views/metadata-admin/previews/PageBlockCanvas.tsx

@@ -305,32 +305,10 @@ export function PageBlockCanvas({
     [onSelectionChange, selectedId],
   );
 
-  // Empty draft → empty canvas with hint.
+  // Empty draft → empty canvas with hint. (ADR-0047 interface pages never
+  // reach this canvas — PagePreview renders them as a live InterfaceListPage
+  // in both design and preview modes — so no interface-specific hint here.)
   if (regions.length === 0) {
-    // ADR-0047 interface pages are config-driven, not composed from regions:
-    // the list surface is generated from `interfaceConfig` (source view +
-    // user filters + visualizations). Inviting the author to "add a region"
-    // here is misleading — point them at the Properties panel instead.
-    const isInterfacePage =
-      !!(draft as any)?.interfaceConfig ||
-      ((draft as any)?.type === 'list' && !(draft as any)?.regions?.length);
-    if (isInterfacePage) {
-      return (
-        <div className="h-full overflow-auto bg-muted/20" onClick={handleBgClick}>
-          <div className="mx-auto max-w-3xl px-6 py-8">
-            <div className="rounded-lg border-2 border-dashed bg-background py-16 px-6 text-center space-y-3">
-              <div className="text-sm font-medium">Interface page — configured in Properties</div>
-              <div className="text-xs text-muted-foreground">
-                This page renders a list from a source view; there are no regions
-                to design. Use the <span className="font-medium">Properties</span> panel
-                → <span className="font-medium">Interface</span> section to set the data
-                source, user filters, visualizations and toolbar actions.
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    }
     return (
       <div className="h-full overflow-auto bg-muted/20" onClick={handleBgClick}>
         <div className="mx-auto max-w-3xl px-6 py-8">

packages/app-shell/src/views/metadata-admin/previews/PagePreview.test.tsx

@@ -39,7 +39,7 @@ describe('PagePreview — interface-page routing (ADR-0047)', () => {
     expect(screen.queryByTestId('mock-schema-renderer')).not.toBeInTheDocument();
   });
 
-  it('does NOT use InterfaceListPage in design mode (keeps the canvas hint)', () => {
+  it('also renders the live InterfaceListPage in design mode (no canvas hint)', () => {
     render(
       <PagePreview
         draft={interfaceDraft}
@@ -48,8 +48,10 @@ describe('PagePreview — interface-page routing (ADR-0047)', () => {
         onPatch={() => {}}
       />,
     );
-    expect(screen.queryByTestId('mock-interface-list')).not.toBeInTheDocument();
-    expect(screen.getByTestId('mock-page-canvas')).toBeInTheDocument();
+    // Interface pages are config-driven: the design tab shows the live list
+    // (mirroring the runtime), not the region canvas/placeholder.
+    expect(screen.getByTestId('mock-interface-list')).toBeInTheDocument();
+    expect(screen.queryByTestId('mock-page-canvas')).not.toBeInTheDocument();
   });
 
   it('renders the generic SchemaRenderer for a region-composed page (not an interface page)', () => {

packages/app-shell/src/views/metadata-admin/previews/PagePreview.tsx

@@ -97,11 +97,12 @@ export function PagePreview({ draft, editing, selection, onSelectionChange, onPa
     onSelectionChange?.({ kind: 'block', id: `children[${next.length - 1}]`, label: newBlock.type });
   }, [canEdit, draft, onPatch, onSelectionChange, shape]);
 
-  // Interface page in preview mode → mirror the runtime (InterfaceListPage)
-  // so the Preview tab shows the real source view + user filters + data,
-  // live from the edited draft. Design mode falls through to the canvas,
-  // which shows the "configured in Properties" hint instead.
-  if (isInterfacePage && !designMode) {
+  // Interface page → always mirror the runtime (InterfaceListPage), in BOTH
+  // design and preview modes. These pages are config-driven, not region-
+  // composed, so there is nothing to drag on a canvas: the author edits the
+  // Properties panel on the right and sees the real list (source view + user
+  // filters + data) update live on the left — no tab switch, no placeholder.
+  if (isInterfacePage) {
     return (
       <PreviewShell hint="page · interface">
         <PreviewErrorBoundary fallbackHint="The interface page references a source object/view that isn't available.">