web: adopt Notra UI components

web/components.json

@@ -21,5 +21,7 @@
   },
   "menuColor": "default",
   "menuAccent": "subtle",
-  "registries": {}
+  "registries": {
+    "@notra": "https://ui.usenotra.com/r/{name}.json"
+  }
 }

web/package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^4.0.50",
+    "@base-ui/react": "^1.8.0",
     "@fontsource-variable/geist-mono": "^5.2.8",
     "@fontsource-variable/inter": "^5.2.8",
     "@posthog/react": "^1.10.3",
@@ -29,6 +30,7 @@
     "ai": "^7.0.47",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cn": "^0.4.0",
     "lucide-react": "^1.21.0",
     "posthog-js": "^1.395.0",
     "radix-ui": "^1.6.0",

web/src/App.tsx

@@ -28,6 +28,7 @@ const Billing = lazy(() => import('./pages/Billing'))
 const SandboxDetail = lazy(() => import('./pages/SandboxDetail'))
 const SandboxWebhooks = lazy(() => import('./pages/SandboxWebhooks'))
 const DeferredAction = lazy(() => import('./pages/DeferredAction'))
+const UiDemo = lazy(() => import('./pages/UiDemo'))
 const ManagedAgentsHome = lazy(() => import('./managed-agents/Home'))
 const ManagedAgentDetail = lazy(() => import('./managed-agents/Detail'))
 const ManagedProjectDetail = lazy(() => import('./managed-agents/Project'))
@@ -57,6 +58,9 @@ export default function App() {
         {/* Deferred-action executor — outside ProtectedRoute so the anonymous
             branch can fire analytics + capture returnTo before login. */}
         <Route path="do" element={<DeferredAction />} />
+        {/* Component playground — public so the design system can be previewed
+            without a backend session. */}
+        <Route path="ui-demo" element={<UiDemo />} />
         {/* Template links are shareable: anonymous visitors see the template
             and its deploy form, and sign up when they actually deploy. */}
         <Route element={<PublicTemplateRoute />}>