feat(studio): remove MSW runtime, wire @object-ui live previews

Remove MSW mode entirely from Studio — runtime is now server-only,
talking to the ObjectStack API via same-origin (when embedded) or the
Vite proxy (in dev). Drops the runtime-mode toggle, MSW badge, init
script, and corresponding optimizeDeps entries.

Add a single MetadataPreview dispatcher that renders live previews of
objects, forms, views, kanbans, calendars, and detail pages by binding
@object-ui components (ObjectForm / ObjectGrid / ObjectKanban /
DetailView / ObjectCalendar) to a memoised ObjectStack DataSource
adapter. Supports both flat view specs and multi-view documents
(e.g. { list, kanban, calendar, form }) with a sub-view tab bar.

Wire MetadataPreview into:
  • MetadataListPage — Eye-icon Preview button on every previewable
    card (object, view, dashboard)
  • Object Hub Forms + Views tabs — Preview button per row

Verified end-to-end in browser:
  • sys_user → ObjectGrid with live record (dev user)
  • crm/account view → List + Form sub-view tabs render correctly

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: os-zhuang

apps/studio/package.json

@@ -8,9 +8,8 @@
     "dist"
   ],
   "scripts": {
-    "msw:init": "msw init -y public",
-    "dev": "pnpm msw:init && vite",
-    "build": "pnpm msw:init && vite build",
+    "dev": "vite",
+    "build": "vite build",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -23,6 +22,15 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^3.0.187",
+    "@object-ui/core": "^5.0.1",
+    "@object-ui/data-objectstack": "^5.0.1",
+    "@object-ui/plugin-calendar": "^5.0.1",
+    "@object-ui/plugin-detail": "^5.0.1",
+    "@object-ui/plugin-form": "^5.0.1",
+    "@object-ui/plugin-grid": "^5.0.1",
+    "@object-ui/plugin-kanban": "^5.0.1",
+    "@object-ui/react": "^5.0.1",
+    "@object-ui/types": "^5.0.1",
     "@objectstack/client": "workspace:*",
     "@objectstack/client-react": "workspace:*",
     "@objectstack/driver-memory": "workspace:*",

apps/studio/src/components/DeveloperOverview.tsx

@@ -8,9 +8,8 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Package, Database, Layers, Globe, Terminal, Box,
-  RefreshCw, ExternalLink, Code2, Cpu
+  RefreshCw, ExternalLink, Code2
 } from 'lucide-react';
-import { config } from '@/lib/config';
 import type { InstalledPackage } from '@objectstack/spec/kernel';
 
 interface DeveloperOverviewProps {
@@ -98,10 +97,6 @@ export function DeveloperOverview({ packages, selectedPackage, onNavigate = () =
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <Badge variant="outline" className="font-mono text-xs gap-1">
-            <Cpu className="h-3 w-3" />
-            {config.mode.toUpperCase()}
-          </Badge>
           <Button variant="outline" size="sm" onClick={loadStats} disabled={stats.loading}>
             <RefreshCw className={`h-3.5 w-3.5 mr-1.5 ${stats.loading ? 'animate-spin' : ''}`} />
             Refresh

apps/studio/src/components/MetadataListPage.tsx

@@ -19,15 +19,26 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from '@tanstack/react-router';
-import { Search } from 'lucide-react';
+import { Eye, Search } from 'lucide-react';
 import { useClient, useMetadataSubscriptionCallback } from '@objectstack/client-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { MetadataPreview } from './MetadataPreview';
 import { navItemForType } from './studio-nav';
 import type { LucideIcon } from 'lucide-react';
 
+/** Metadata types we can render a live preview for via @object-ui. */
+const PREVIEWABLE_TYPES = new Set(['object', 'view', 'dashboard']);
+
 export interface MetadataListPageProps {
   /** Display title (e.g. "Objects", "Forms"). */
   title: string;
@@ -78,6 +89,7 @@ export function MetadataListPage({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [query, setQuery] = useState('');
+  const [previewRow, setPreviewRow] = useState<Row | null>(null);
   const [activeTypes, setActiveTypes] = useState<Set<string>>(new Set());
 
   const load = useCallback(async () => {
@@ -229,10 +241,11 @@ export function MetadataListPage({
           <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             {filtered.map((row) => {
               const Icon = iconForType?.(row.type) ?? navItemForType(row.type)?.icon;
+              const canPreview = PREVIEWABLE_TYPES.has(row.type);
               return (
                 <Card
                   key={`${row.type}:${row.name}`}
-                  className="cursor-pointer transition hover:border-primary hover:shadow-sm"
+                  className="group cursor-pointer transition hover:border-primary hover:shadow-sm"
                   onClick={() => openRow(row)}
                 >
                   <CardContent className="flex flex-col gap-2 p-4">
@@ -245,14 +258,49 @@ export function MetadataListPage({
                         {row.type}
                       </Badge>
                     </div>
-                    <code className="truncate text-xs text-muted-foreground">{row.name}</code>
+                    <div className="flex items-center justify-between gap-2">
+                      <code className="truncate text-xs text-muted-foreground">{row.name}</code>
+                      {canPreview && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 gap-1 px-1.5 text-[11px]"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setPreviewRow(row);
+                          }}
+                        >
+                          <Eye className="h-3 w-3" /> Preview
+                        </Button>
+                      )}
+                    </div>
                   </CardContent>
                 </Card>
               );
             })}
           </div>
         )}
       </div>
+
+      <Dialog open={!!previewRow} onOpenChange={(o) => !o && setPreviewRow(null)}>
+        <DialogContent className="max-w-5xl">
+          <DialogHeader>
+            <DialogTitle>{previewRow?.label ?? previewRow?.name}</DialogTitle>
+            <DialogDescription>
+              Live preview rendered with @object-ui against the configured backend.
+            </DialogDescription>
+          </DialogHeader>
+          {previewRow && (
+            <div className="h-[70vh] overflow-hidden">
+              <MetadataPreview
+                type={previewRow.type}
+                name={previewRow.name}
+                spec={previewRow.raw?.spec ?? previewRow.raw}
+              />
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }