fix(studio): Preview tab renders interface pages via InterfaceListPage (#1691)

The metadata page editor's Preview tab rendered every page through the
generic SchemaRenderer. For ADR-0047 interface pages (config-driven,
`regions: []`, list generated from `interfaceConfig`) that produced only
a bare list shell — no source binding, no user-filter chips, no data —
so authors could not see their interfaceConfig (source view, userFilters,
visualizations) reflected in the preview.

PagePreview now mirrors the runtime PageView: when the draft is an
interface page (`interfaceConfig.source`) and not in design mode, it
renders InterfaceListPage with the live draft — exactly what end users
see. Design mode still shows the canvas (the 'configured in Properties'
hint). The interface branch sits AFTER all hooks (Rules of Hooks).

Browser-verified on the showcase Task Workbench: the Preview tab now
shows the status/priority filter dropdowns + the bound data table
(10 records), matching the runtime page; previously empty.

Locked by PagePreview.test.tsx (interface→InterfaceListPage,
design→canvas, region page→SchemaRenderer).

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

Author: 3 people

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

@@ -0,0 +1,60 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+
+// Mock the heavy runtime/canvas children so the test isolates PagePreview's
+// routing decision (which child it picks), not their internals.
+vi.mock('../../InterfaceListPage', () => ({
+  InterfaceListPage: () => <div data-testid="mock-interface-list" />,
+}));
+vi.mock('@object-ui/react', () => ({
+  SchemaRenderer: () => <div data-testid="mock-schema-renderer" />,
+}));
+vi.mock('./PageBlockCanvas', () => ({
+  PageBlockCanvas: () => <div data-testid="mock-page-canvas" />,
+}));
+
+import { PagePreview } from './PagePreview';
+
+afterEach(cleanup);
+
+const interfaceDraft = {
+  name: 'wb',
+  type: 'list',
+  regions: [],
+  interfaceConfig: { source: 'task', userFilters: { element: 'dropdown', fields: [{ field: 'status' }] } },
+};
+const regionDraft = {
+  name: 'home',
+  type: 'home',
+  regions: [{ name: 'main', components: [{ type: 'container' }] }],
+};
+
+describe('PagePreview — interface-page routing (ADR-0047)', () => {
+  it('renders the runtime InterfaceListPage for an interface page in preview mode', () => {
+    // preview mode = no onSelectionChange (not editing the canvas)
+    render(<PagePreview draft={interfaceDraft} />);
+    expect(screen.getByTestId('mock-interface-list')).toBeInTheDocument();
+    expect(screen.queryByTestId('mock-schema-renderer')).not.toBeInTheDocument();
+  });
+
+  it('does NOT use InterfaceListPage in design mode (keeps the canvas hint)', () => {
+    render(
+      <PagePreview
+        draft={interfaceDraft}
+        editing
+        onSelectionChange={() => {}}
+        onPatch={() => {}}
+      />,
+    );
+    expect(screen.queryByTestId('mock-interface-list')).not.toBeInTheDocument();
+    expect(screen.getByTestId('mock-page-canvas')).toBeInTheDocument();
+  });
+
+  it('renders the generic SchemaRenderer for a region-composed page (not an interface page)', () => {
+    render(<PagePreview draft={regionDraft} />);
+    expect(screen.queryByTestId('mock-interface-list')).not.toBeInTheDocument();
+    expect(screen.getByTestId('mock-schema-renderer')).toBeInTheDocument();
+  });
+});

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

@@ -15,6 +15,7 @@ import type { MetadataPreviewProps } from '../preview-registry';
 import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
 import { OutlineStrip } from './OutlineStrip';
 import { PageBlockCanvas } from './PageBlockCanvas';
+import { InterfaceListPage } from '../../InterfaceListPage';
 import { t as tr } from '../i18n';
 
 interface Block { type?: string; id?: string; children?: Block[]; [k: string]: unknown }
@@ -32,6 +33,13 @@ export function PagePreview({ draft, editing, selection, onSelectionChange, onPa
   const canEdit = designMode && !!onPatch;
   const selectedId = selection && selection.kind === 'block' ? selection.id : null;
 
+  // ADR-0047 interface pages are config-driven, not region-composed. The
+  // runtime (PageView) renders them via InterfaceListPage; the generic
+  // SchemaRenderer fallback would only produce a bare list shell with no
+  // source binding or user filters. Computed here, consumed after all hooks
+  // (the early return must not sit above later hooks — Rules of Hooks).
+  const isInterfacePage = !!(draft as { interfaceConfig?: { source?: string } })?.interfaceConfig?.source;
+
   // Pages may use either of two canonical shapes:
   //   1. `regions: [{ name, components: [...] }]`  (ObjectStack spec, used by seeded pages)
   //   2. `children: [...]`                         (raw SDUI tree shape)
@@ -89,6 +97,20 @@ 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) {
+    return (
+      <PreviewShell hint="page · interface">
+        <PreviewErrorBoundary fallbackHint="The interface page references a source object/view that isn't available.">
+          <InterfaceListPage page={draft as Record<string, unknown>} />
+        </PreviewErrorBoundary>
+      </PreviewShell>
+    );
+  }
+
   // Empty draft → no preview; but if we're in design mode show the
   // canvas so users can author from scratch.
   if (!schema || Object.keys(schema).length <= 1) {