Extract metadata table and add schema editor preview

apps/visualizer/.gitignore

@@ -0,0 +1,4 @@
+.vercel
+.next
+.env*.local
+tsconfig.tsbuildinfo

apps/visualizer/README.md

@@ -0,0 +1,48 @@
+# Stripe Schema Visualizer
+
+This package contains the standalone browser UI for exploring generated Stripe schema data with PGlite.
+
+The visualizer has two parts:
+
+- `pnpm explorer:build` generates static artifacts.
+- `apps/visualizer` loads those artifacts into PGlite and lets you run SQL in the browser.
+
+## Generated artifacts
+
+- `apps/visualizer/public/explorer-data/bootstrap.sql`
+- `apps/visualizer/public/explorer-data/manifest.json`
+
+These files are generated and should stay out of version control.
+
+## Common commands
+
+```bash
+pnpm explorer:build
+pnpm visualizer
+pnpm visualizer:with-data
+```
+
+`pnpm visualizer:with-data` rebuilds the explorer data and then starts the visualizer app.
+
+## How the app loads data
+
+At runtime, the app loads `manifest.json` first and then hydrates PGlite from `bootstrap.sql`.
+After hydration, all SQL runs locally in the browser against the generated Stripe schema.
+
+## Direct phase debugging
+
+`pnpm explorer:build` is the normal command, but the underlying phase scripts still exist for debugging:
+
+```bash
+bun run scripts/explorer-harness.ts start
+bun run scripts/explorer-migrate.ts --api-version=2020-08-27
+bun run scripts/explorer-seed.ts --api-version=2020-08-27 --seed=42
+bun run scripts/explorer-export.ts
+bun run scripts/explorer-harness.ts stop
+```
+
+## Notes
+
+- SQL bootstrap is preferred for speed and consistency.
+- The build pipeline recreates the artifacts from scratch on each run.
+- The deploy/install dashboard stays in `packages/dashboard`; this package only contains the schema visualizer UI.

apps/visualizer/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/visualizer/next.config.ts

@@ -0,0 +1,39 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  typescript: {
+    ignoreBuildErrors: false,
+  },
+  webpack: (config) => {
+    config.experiments = {
+      ...config.experiments,
+      asyncWebAssembly: true,
+    }
+
+    config.module.rules.push({
+      test: /\.wasm$/,
+      type: 'asset/resource',
+    })
+
+    return config
+  },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Cross-Origin-Embedder-Policy',
+            value: 'require-corp',
+          },
+          {
+            key: 'Cross-Origin-Opener-Policy',
+            value: 'same-origin',
+          },
+        ],
+      },
+    ]
+  },
+}
+
+export default nextConfig

apps/visualizer/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@stripe/sync-visualizer",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@stripe/sync-source-stripe": "workspace:*",
+    "@codemirror/lang-sql": "^6.7.0",
+    "@codemirror/state": "^6.4.0",
+    "@codemirror/view": "^6.26.0",
+    "@electric-sql/pglite": "^0.2.0",
+    "codemirror": "^6.0.1",
+    "next": "^15",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5"
+  }
+}

apps/visualizer/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+
+export default config