fix: resolve hydration mismatch and cap widget height

Defer CopilotChat render to client-only to avoid Radix UI generating
different IDs on server vs client. Cap widget iframe height at 800px
to reduce whitespace from MCP widgets with large viewports.

Author: jerelvelarde

apps/app/src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { ExampleLayout } from "@/components/example-layout";
 import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
 import { ExplainerCardsPortal } from "@/components/explainer-cards";
@@ -11,6 +11,10 @@ export default function HomePage() {
   useGenerativeUIExamples();
   useExampleSuggestions();
 
+  // Defer CopilotChat to client-only to avoid Radix hydration ID mismatch
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
   // Widget bridge: handle openLink from widget iframes
   useEffect(() => {
     const handler = (e: MessageEvent) => {
@@ -75,11 +79,13 @@ export default function HomePage() {
           </div>
 
           <ExampleLayout chatContent={
-            <CopilotChat
-              labels={{
-                welcomeMessageText: "What do you want to visualize today?",
-              }}
-            />
+            mounted ? (
+              <CopilotChat
+                labels={{
+                  welcomeMessageText: "What do you want to visualize today?",
+                }}
+              />
+            ) : null
           } />
           <ExplainerCardsPortal />
         </div>

apps/app/src/components/generative-ui/widget-renderer.tsx

@@ -455,7 +455,7 @@ export function WidgetRenderer({ title, description, html }: WidgetRendererProps
       e.data?.type === "widget-resize" &&
       typeof e.data.height === "number"
     ) {
-      setHeight(Math.max(50, Math.min(e.data.height + 8, 4000)));
+      setHeight(Math.max(50, Math.min(e.data.height + 8, 800)));
     }
   }, []);