From b2e4ae2828455a578248909127817c6340be694d Mon Sep 17 00:00:00 2001
From: "xuan.huang" <5563315+Huxpro@users.noreply.github.com>
Date: Mon, 4 May 2026 01:36:27 +0200
Subject: [PATCH 1/2] feat(a2ui-playground): add theme toggle, phone/full
 preview mode, and UI polish

- Set page title to "Lynx A2UI Playground" (html.title + header brand)
- Add dark/light mode toggle in the header
- Simplify phone frame: clean bezel with border, no notch/status bar
- Add Phone/Full preview mode toggle in the preview panel header
- Fix preview header layout to handle chips + toggle without cramping
---
 .../genui/a2ui-playground/rsbuild.config.ts   |   3 +
 packages/genui/a2ui-playground/src/App.tsx    |  25 ++-
 .../src/components/MobilePreview.tsx          |  10 +-
 .../a2ui-playground/src/pages/DemosPage.tsx   |  41 ++++-
 packages/genui/a2ui-playground/src/styles.css | 152 ++++++++++--------
 5 files changed, 154 insertions(+), 77 deletions(-)

diff --git a/packages/genui/a2ui-playground/rsbuild.config.ts b/packages/genui/a2ui-playground/rsbuild.config.ts
index b36415e8a6..2c1e1ef837 100644
--- a/packages/genui/a2ui-playground/rsbuild.config.ts
+++ b/packages/genui/a2ui-playground/rsbuild.config.ts
@@ -43,6 +43,9 @@ export default defineConfig({
       render: './src/render.tsx',
     },
   },
+  html: {
+    title: 'Lynx A2UI Playground',
+  },
   output: {
     assetPrefix: process.env.ASSET_PREFIX,
     copy: [
diff --git a/packages/genui/a2ui-playground/src/App.tsx b/packages/genui/a2ui-playground/src/App.tsx
index a17502a822..8a7164be68 100644
--- a/packages/genui/a2ui-playground/src/App.tsx
+++ b/packages/genui/a2ui-playground/src/App.tsx
@@ -33,11 +33,24 @@ function parseHash(hash: string): Route {
   return { tab: 'chat' };
 }
 
+type Theme = 'light' | 'dark';
+
+function getSystemTheme(): Theme {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+}
+
 export function App() {
   const [route, setRoute] = useState<Route>(() =>
     parseHash(window.location.hash)
   );
   const [protocol, setProtocol] = useState<ProtocolVersion>(DEFAULT_PROTOCOL);
+  const [theme, setTheme] = useState<Theme>(getSystemTheme);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
 
   useEffect(() => {
     const onHashChange = () => {
@@ -71,7 +84,7 @@ export function App() {
   return (
     <div className='appShell'>
       <div className='topBar'>
-        <span className='brand'>A2UI Playground</span>
+        <span className='brand'>Lynx A2UI Playground</span>
 
         <nav className='tabNav'>
           {TABS.map((t) => (
@@ -94,6 +107,16 @@ export function App() {
           <div className='protocolLabel'>Protocol</div>
           <ProtocolSwitch value={protocol} onChange={setProtocol} />
         </div>
+
+        <button
+          type='button'
+          className='themeToggle'
+          onClick={() => setTheme((t) => (t === 'dark' ? 'light' : 'dark'))}
+          aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+        >
+          {theme === 'dark' ? '\u2600' : '\u263E'}
+        </button>
       </div>
 
       <div className='appBody'>
diff --git a/packages/genui/a2ui-playground/src/components/MobilePreview.tsx b/packages/genui/a2ui-playground/src/components/MobilePreview.tsx
index 6b040ef1f4..2abb8849f4 100644
--- a/packages/genui/a2ui-playground/src/components/MobilePreview.tsx
+++ b/packages/genui/a2ui-playground/src/components/MobilePreview.tsx
@@ -5,15 +5,7 @@ export function MobilePreview(props: { src: string }) {
   return (
     <div className='phoneWrap'>
       <div className='phoneFrame'>
-        <div className='phoneScreen'>
-          <div className='phoneStatusBar'>
-            <div className='phoneNotch' />
-          </div>
-          <iframe className='phoneIframe' title='preview' src={props.src} />
-          <div className='phoneHomeIndicator'>
-            <div className='phoneHomeBar' />
-          </div>
-        </div>
+        <iframe className='phoneIframe' title='preview' src={props.src} />
       </div>
     </div>
   );
diff --git a/packages/genui/a2ui-playground/src/pages/DemosPage.tsx b/packages/genui/a2ui-playground/src/pages/DemosPage.tsx
index 1915202ad9..9cb265e1e6 100644
--- a/packages/genui/a2ui-playground/src/pages/DemosPage.tsx
+++ b/packages/genui/a2ui-playground/src/pages/DemosPage.tsx
@@ -94,6 +94,7 @@ export function DemosPage(props: { protocol: ProtocolVersion }) {
   const [speed, setSpeed] = useState(1);
   const [showSimTooltip, setShowSimTooltip] = useState(false);
   const [jsonEdited, setJsonEdited] = useState(false);
+  const [previewMode, setPreviewMode] = useState<'phone' | 'full'>('phone');
 
   const baseUrl = window.location.href.replace(/#.*$/, '');
   const rspeedyDevUrl = useRspeedyDevUrl();
@@ -374,6 +375,28 @@ export function DemosPage(props: { protocol: ProtocolVersion }) {
               </div>
             )
             : null}
+          <div className='previewModeSwitch'>
+            <button
+              type='button'
+              className={previewMode === 'phone'
+                ? 'previewModeBtn active'
+                : 'previewModeBtn'}
+              onClick={() => setPreviewMode('phone')}
+              title='Phone frame'
+            >
+              Phone
+            </button>
+            <button
+              type='button'
+              className={previewMode === 'full'
+                ? 'previewModeBtn active'
+                : 'previewModeBtn'}
+              onClick={() => setPreviewMode('full')}
+              title='Full panel'
+            >
+              Full
+            </button>
+          </div>
         </div>
         {isSimulated
           ? (
@@ -416,9 +439,23 @@ export function DemosPage(props: { protocol: ProtocolVersion }) {
             </div>
           )
           : null}
-        <div className='previewPanelBody'>
+        <div
+          className={previewMode === 'full'
+            ? 'previewPanelBody previewPanelBodyFull'
+            : 'previewPanelBody'}
+        >
           {renderUrl
-            ? <MobilePreview src={renderUrl} />
+            ? (
+              previewMode === 'phone'
+                ? <MobilePreview src={renderUrl} />
+                : (
+                  <iframe
+                    className='previewFullIframe'
+                    title='preview'
+                    src={renderUrl}
+                  />
+                )
+            )
             : (
               <div className='previewEmpty'>
                 <div className='previewEmptyIcon'>▶</div>
diff --git a/packages/genui/a2ui-playground/src/styles.css b/packages/genui/a2ui-playground/src/styles.css
index 3b590379f1..af371b93a5 100644
--- a/packages/genui/a2ui-playground/src/styles.css
+++ b/packages/genui/a2ui-playground/src/styles.css
@@ -30,23 +30,21 @@
     "Liberation Mono", monospace;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --geist-foreground: #ededed;
-    --geist-background: #0a0a0a;
-    --geist-secondary: #888;
-    --geist-border: #333;
-    --geist-border-hover: #555;
-    --geist-surface: #111;
-    --geist-accent: #fff;
-    --geist-accent-foreground: #000;
-    --geist-error-light: #2a0000;
-    --geist-code-bg: #0a0a0a;
-    --geist-code-fg: #e8e8e8;
-    --geist-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
-    --geist-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.3);
-    --geist-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
-  }
+[data-theme="dark"] {
+  --geist-foreground: #ededed;
+  --geist-background: #0a0a0a;
+  --geist-secondary: #888;
+  --geist-border: #333;
+  --geist-border-hover: #555;
+  --geist-surface: #111;
+  --geist-accent: #fff;
+  --geist-accent-foreground: #000;
+  --geist-error-light: #2a0000;
+  --geist-code-bg: #0a0a0a;
+  --geist-code-fg: #e8e8e8;
+  --geist-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --geist-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.3);
+  --geist-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
 }
 
 /* ── Reset & Base ── */
@@ -120,6 +118,28 @@ a {
   flex: 1;
 }
 
+.themeToggle {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--geist-radius-sm);
+  background: transparent;
+  color: var(--geist-secondary);
+  font-size: 15px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--geist-transition);
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.themeToggle:hover {
+  color: var(--geist-foreground);
+  background: var(--geist-surface);
+}
+
 /* ── Tab Navigation ── */
 .tabNav {
   display: flex;
@@ -255,60 +275,18 @@ a {
 .phoneFrame {
   width: 300px;
   height: 560px;
-  border-radius: 36px;
-  background: var(--geist-foreground);
-  padding: 10px;
-  box-shadow:
-    var(--geist-shadow-lg),
-    inset 0 0 0 2px rgba(255, 255, 255, 0.1);
-}
-
-.phoneScreen {
-  width: 100%;
-  height: 100%;
+  border-radius: 24px;
+  border: 6px solid var(--geist-border);
   background: #fff;
-  border-radius: 28px;
   overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.phoneStatusBar {
-  height: 44px;
-  background: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.phoneNotch {
-  width: 80px;
-  height: 24px;
-  background: var(--geist-foreground);
-  border-radius: 0 0 16px 16px;
+  box-shadow: var(--geist-shadow-md);
 }
 
 .phoneIframe {
-  flex: 1;
   width: 100%;
+  height: 100%;
   border: 0;
-}
-
-.phoneHomeIndicator {
-  height: 20px;
-  background: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.phoneHomeBar {
-  width: 120px;
-  height: 4px;
-  border-radius: 2px;
-  background: #d1d1d1;
+  display: block;
 }
 
 /* ── Preview Panels (shared) ── */
@@ -324,11 +302,12 @@ a {
 .previewPanelHeader {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   padding: 8px 16px;
   border-bottom: 1px solid var(--geist-border);
   background: var(--geist-background);
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
 .previewPanelTitle {
@@ -337,9 +316,41 @@ a {
 }
 
 .previewPanelMeta {
+  flex: 1;
+  min-width: 0;
+}
+
+.previewModeSwitch {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid var(--geist-border);
+  border-radius: 6px;
+  background: var(--geist-surface);
+  flex-shrink: 0;
   margin-left: auto;
 }
 
+.previewModeBtn {
+  padding: 2px 10px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--geist-secondary);
+  transition: all var(--geist-transition);
+}
+
+.previewModeBtn:hover {
+  color: var(--geist-foreground);
+}
+
+.previewModeBtn.active {
+  background: var(--geist-accent);
+  color: var(--geist-accent-foreground);
+}
+
 .previewMetaTags {
   display: flex;
   gap: 4px;
@@ -354,6 +365,17 @@ a {
   overflow: auto;
 }
 
+.previewPanelBodyFull {
+  padding: 0;
+}
+
+.previewFullIframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+}
+
 /* ── Simulation Controls Bar ── */
 .simulationBar {
   display: flex;

From aa3bb8bee1a261d12f55920cdc23284e53e2d6d2 Mon Sep 17 00:00:00 2001
From: "xuan.huang" <5563315+Huxpro@users.noreply.github.com>
Date: Mon, 4 May 2026 01:56:10 +0200
Subject: [PATCH 2/2] fix(a2ui-playground): address review feedback for #2556

- Use useLayoutEffect for theme to prevent dark mode flash
- Guard matchMedia for environments where it's unavailable
- Remove dead .previewPanelMeta and .previewMetaTags CSS
---
 packages/genui/a2ui-playground/src/App.tsx    | 14 +++++++++-----
 packages/genui/a2ui-playground/src/styles.css | 10 ----------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/genui/a2ui-playground/src/App.tsx b/packages/genui/a2ui-playground/src/App.tsx
index 8a7164be68..f3113de2ac 100644
--- a/packages/genui/a2ui-playground/src/App.tsx
+++ b/packages/genui/a2ui-playground/src/App.tsx
@@ -1,7 +1,7 @@
 // Copyright 2026 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 
 import { ProtocolSwitch } from './components/ProtocolSwitch.js';
 import { AIChatPage } from './pages/AIChatPage.js';
@@ -36,9 +36,13 @@ function parseHash(hash: string): Route {
 type Theme = 'light' | 'dark';
 
 function getSystemTheme(): Theme {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? 'dark'
-    : 'light';
+  try {
+    return window.matchMedia?.('(prefers-color-scheme: dark)')?.matches
+      ? 'dark'
+      : 'light';
+  } catch {
+    return 'light';
+  }
 }
 
 export function App() {
@@ -48,7 +52,7 @@ export function App() {
   const [protocol, setProtocol] = useState<ProtocolVersion>(DEFAULT_PROTOCOL);
   const [theme, setTheme] = useState<Theme>(getSystemTheme);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
   }, [theme]);
 
diff --git a/packages/genui/a2ui-playground/src/styles.css b/packages/genui/a2ui-playground/src/styles.css
index af371b93a5..3eadc57ac2 100644
--- a/packages/genui/a2ui-playground/src/styles.css
+++ b/packages/genui/a2ui-playground/src/styles.css
@@ -315,11 +315,6 @@ a {
   font-weight: 600;
 }
 
-.previewPanelMeta {
-  flex: 1;
-  min-width: 0;
-}
-
 .previewModeSwitch {
   display: inline-flex;
   padding: 2px;
@@ -351,11 +346,6 @@ a {
   color: var(--geist-accent-foreground);
 }
 
-.previewMetaTags {
-  display: flex;
-  gap: 4px;
-}
-
 .previewPanelBody {
   flex: 1;
   display: flex;