fix hydration and validation errors in theater app

- Fix hydration error on initial load by delaying rendering
  until the component is mounted on the client.
  This handles scenario initialization from URL query parameters
  correctly without server/client mismatch.

- Fix Zod validation error (`Array must contain at least 1
  element(s)`) by ensuring `A2UIViewer` is only rendered when the
  aggregated components list is not empty.

Author: nan-yu

tools/composer/src/app/theater/page.tsx

@@ -58,9 +58,14 @@ function formatBytes(bytes: number): string {
 }
 
 export default function TheaterPage() {
+  const [mounted, setMounted] = useState(false);
   const [leftTab, setLeftTab] = useState<LeftTab>('data');
   const [mobileView, setMobileView] = useState<'left' | 'renderer'>('renderer');
   const [renderer, setRenderer] = useState<RendererType>(RENDERERS[0]);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
   const [selectedScenario, setSelectedScenario] = useState<ScenarioId>(() => {
     const url = readURL();
     return (url.scenario && url.scenario in scenarios) ? url.scenario as ScenarioId : 'restaurant-booking';
@@ -134,6 +139,10 @@ export default function TheaterPage() {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [playbackState, progress, totalChunks, play, pause, seek]);
 
+  if (!mounted) {
+    return <div className="flex h-screen items-center justify-center bg-background text-foreground">Loading...</div>;
+  }
+
   return (
     <div className="flex h-screen flex-col overflow-hidden bg-background text-foreground font-sans selection:bg-primary/30">
       {/* Header */}
@@ -381,7 +390,7 @@ export default function TheaterPage() {
                     <span className="text-[10px] text-muted-foreground font-mono">{selectedScenario}</span>
                   </div>
                   <div className="p-4 bg-dot-pattern">
-                    {activeMessages.length > 0 ? (
+                    {activeMessages.length > 0 && surfaceState.components.length > 0 ? (
                       <div className="w-full flex items-start justify-center">
                         <A2UIViewer
                           root={surfaceState.root}