feat(a2ui-playground): fix URI Too Long, add simulation controls, and polish UI

packages/genui/a2ui-playground/lynx-src/App.tsx

@@ -26,7 +26,7 @@ type ActionMocks = Record<string, unknown>;
 
 type ResponseMessages = A2uiMessage[];
 
-const STREAM_MESSAGE_DELAY_MS = 800;
+const DEFAULT_STREAM_DELAY_MS = 800;
 
 function randomId(prefix: string) {
   return prefix + Date.now().toString(36)
@@ -199,13 +199,25 @@ export function App() {
     [globalPropsData, initData],
   );
 
+  // Speed multiplier from URL query (e.g. ?speed=2 → 2x faster).
+  const streamDelay = useMemo(() => {
+    const raw = (globalProps as Record<string, unknown> | null)?.speed
+      ?? (rawInitData as Record<string, unknown> | null)?.speed;
+    const speed = typeof raw === 'string'
+      ? Number(raw)
+      : (typeof raw === 'number' ? raw : 1);
+    if (!speed || speed <= 0) return DEFAULT_STREAM_DELAY_MS;
+    return DEFAULT_STREAM_DELAY_MS / speed;
+  }, [globalProps, rawInitData]);
+
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   const clientRef = useRef<any>(null);
 
   const [resource, setResource] = useState<Resource | null>(null);
   const [error, setError] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
 
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   useEffect(() => {
     let cancelled = false;
 
@@ -252,9 +264,7 @@ export function App() {
             if (cancelled) break;
             // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
             client.processor?.processMessages?.([msg]);
-            await new Promise((resolve) =>
-              setTimeout(resolve, STREAM_MESSAGE_DELAY_MS)
-            );
+            await new Promise((resolve) => setTimeout(resolve, streamDelay));
           }
         })();
 
@@ -284,9 +294,7 @@ export function App() {
           if (cancelled) break;
           // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
           client.processor?.processMessages?.([msg]);
-          await new Promise((resolve) =>
-            setTimeout(resolve, STREAM_MESSAGE_DELAY_MS)
-          );
+          await new Promise((resolve) => setTimeout(resolve, streamDelay));
         }
       };
 
@@ -309,7 +317,7 @@ export function App() {
     return () => {
       cancelled = true;
     };
-  }, [effectiveData]);
+  }, [effectiveData, streamDelay]);
 
   return (
     <view

packages/genui/a2ui-playground/rsbuild.config.ts

@@ -45,6 +45,12 @@ export default defineConfig({
   },
   output: {
     assetPrefix: process.env.ASSET_PREFIX,
+    copy: [
+      {
+        from: 'src/mock/messages/*.json',
+        to: 'demos/[name][ext]',
+      },
+    ],
   },
   server: {
     port: PORT,

packages/genui/a2ui-playground/src/pages/AIChatPage.tsx

@@ -7,7 +7,7 @@ import type { ProtocolVersion } from '../utils/protocol.js';
 
 interface ChatMessage {
   role: 'user' | 'ai';
-  content: string;
+  content: string | React.ReactNode;
 }
 
 const WELCOME_MESSAGE: ChatMessage = {
@@ -18,8 +18,14 @@ const WELCOME_MESSAGE: ChatMessage = {
 
 const MOCK_AI_RESPONSE: ChatMessage = {
   role: 'ai',
-  content:
-    'AI generation is not yet connected. This is a preview of the AI Chat interface. In the future, this will generate A2UI components based on your description.',
+  content: (
+    <>
+      AI generation is not yet connected. In the meantime, check out the{' '}
+      <a href='#/demos' style={{ textDecoration: 'underline' }}>Demos</a>{' '}
+      tab to see pre-recorded A2UI scenarios with simulated streaming — you can
+      even adjust the playback speed.
+    </>
+  ),
 };
 
 export function AIChatPage(