Skip to content

feat(a2ui-playground): fullscreen preview for mobile #2557

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Huxpro merged 5 commits into from
May 4, 2026
+182 −13
Merged

feat(a2ui-playground): fullscreen preview for mobile #2557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d1d10e
feat(a2ui-playground): add fullscreen preview for mobile
Huxpro May 3, 2026
e0794cf
feat(a2ui-playground): default to full preview mode on mobile
Huxpro May 3, 2026
7f43880
feat(a2ui-playground): show component tags in sidebar scenarios
Huxpro May 3, 2026
15c089a
feat(a2ui-playground): live component stack during streaming
Huxpro May 3, 2026
4748494
refactor(a2ui-playground): remove static component tags from sidebar …
Huxpro May 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions packages/genui/a2ui-playground/src/demos.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,28 @@ function tagsFromMessages(messages: unknown): string[] {
return Array.from(out).sort((a, b) => a.localeCompare(b));
}

/**
* Extract new component names introduced by each message (in order).
* Returns an array parallel to the messages array: each entry is
* the list of component names that appear for the first time in that message.
*/
export function componentsByMessage(messages: unknown): string[][] {
if (!Array.isArray(messages)) return [];
const seen = new Set<string>();
return messages.map((msg) => {
const msgComponents = new Set<string>();
collectComponentNamesFromMessages(msg, msgComponents);
const newOnes: string[] = [];
for (const name of msgComponents) {
if (!seen.has(name)) {
seen.add(name);
newOnes.push(name);
}
}
return newOnes;
});
}

export interface StaticDemo {
id: string;
title: string;
Expand Down
74 changes: 61 additions & 13 deletions packages/genui/a2ui-playground/src/pages/DemosPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ import { json } from '@codemirror/lang-json';
import CodeMirror from '@uiw/react-codemirror';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

import { Chip } from '../components/Chip.js';
import { MobilePreview } from '../components/MobilePreview.js';
import { QrCode } from '../components/QrCode.js';
import { DYNAMIC_PRESETS, STATIC_DEMOS } from '../demos.js';
import {
DYNAMIC_PRESETS,
STATIC_DEMOS,
componentsByMessage,
} from '../demos.js';
import { DEFAULT_DEMO_URL } from '../utils/demoUrl.js';
import type { ProtocolVersion } from '../utils/protocol.js';
import { buildRenderUrl } from '../utils/renderUrl.js';
Expand Down Expand Up @@ -94,7 +97,12 @@ 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 [previewMode, setPreviewMode] = useState<'phone' | 'full'>(
() => window.innerWidth <= 980 ? 'full' : 'phone',
);
const [fullscreen, setFullscreen] = useState(false);
const [liveComponents, setLiveComponents] = useState<string[]>([]);
const liveTimersRef = useRef<ReturnType<typeof setTimeout>[]>([]);

const baseUrl = window.location.href.replace(/#.*$/, '');
const rspeedyDevUrl = useRspeedyDevUrl();
Expand Down Expand Up @@ -151,6 +159,28 @@ export function DemosPage(props: { protocol: ProtocolVersion }) {
);
setRenderUrl(url);

// Live component stack: reveal component names as they would appear
// during streaming, synced with the replay speed.
for (const t of liveTimersRef.current) clearTimeout(t);
liveTimersRef.current = [];
setLiveComponents([]);
const perMsg = componentsByMessage(parsed);
const delayMs = 800 / (speed || 1);
let accumulated: string[] = [];
perMsg.forEach((newNames, i) => {
if (newNames.length === 0) return;
const timer = setTimeout(() => {
accumulated = [...accumulated, ...newNames];
setLiveComponents([...accumulated]);
}, delayMs * (i + 1));
liveTimersRef.current.push(timer);
});
Comment on lines +162 to +177
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Clear timers on component unmount to prevent memory leaks and stale state updates.

The timers stored in liveTimersRef.current are cleared when doRender is called again, but they are not cleared when the component unmounts. This can cause setLiveComponents to be called on an unmounted component.

🛡️ Proposed fix: Add cleanup effect

Add a cleanup effect after the existing state declarations (around line 106):

// Clean up live component timers on unmount
useEffect(() => {
  return () => {
    for (const t of liveTimersRef.current) clearTimeout(t);
  };
}, []);
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/genui/a2ui-playground/src/pages/DemosPage.tsx` around lines 162 -
177, The liveTimersRef timers are only cleared when doRender runs, so on unmount
pending timeouts can still call setLiveComponents; add a React cleanup effect
that on unmount iterates liveTimersRef.current and calls clearTimeout for each
to prevent stale updates. Place this useEffect (with an empty deps array) near
the component's state/hooks initialization (after the existing state
declarations) and reference liveTimersRef and setLiveComponents so any
outstanding timers are cleared when the component unmounts.


// On mobile, auto-expand preview to fullscreen when rendering.
if (window.innerWidth <= 980) {
setFullscreen(true);
}

// Native in-app preview: pass A2UI payload via global props, directly through URL query.
// In Lynx, query params are exposed in `lynx.__globalProps` / `useGlobalProps()`.
const seq = ++lynxUrlSeqRef.current;
Expand Down Expand Up @@ -363,18 +393,14 @@ export function DemosPage(props: { protocol: ProtocolVersion }) {
</div>

{/* Preview Panel */}
<div className='previewPanel'>
<div
className={fullscreen
? 'previewPanel previewPanelFullscreen'
: 'previewPanel'}
>
<div className='previewPanelHeader'>
<span className='previewPanelTitle'>Lynx Preview</span>
{currentScenario
? (
<div className='previewPanelMeta'>
<div className='previewMetaTags'>
{currentScenario.tags.map((t) => <Chip key={t}>{t}</Chip>)}
</div>
</div>
)
: null}
<div className='spacer' />
<div className='previewModeSwitch'>
<button
type='button'
Expand All @@ -397,6 +423,14 @@ export function DemosPage(props: { protocol: ProtocolVersion }) {
Full
</button>
</div>
<button
type='button'
className='previewExpandBtn'
onClick={() => setFullscreen((v) => !v)}
title={fullscreen ? 'Exit fullscreen' : 'Expand preview'}
>
{fullscreen ? '\u2715' : '\u2922'}
</button>
Comment on lines +404 to +433
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add explicit accessibility semantics to preview controls.

At Line 408, the fullscreen icon button should have an explicit aria-label.
At Lines 387-403, expose selected state on Phone/Full buttons via aria-pressed.

Suggested patch 
           <div className='previewModeSwitch'>
             <button
               type='button'
               className={previewMode === 'phone'
                 ? 'previewModeBtn active'
                 : 'previewModeBtn'}
               onClick={() => setPreviewMode('phone')}
               title='Phone frame'
+              aria-pressed={previewMode === 'phone'}
             >
               Phone
             </button>
             <button
               type='button'
               className={previewMode === 'full'
                 ? 'previewModeBtn active'
                 : 'previewModeBtn'}
               onClick={() => setPreviewMode('full')}
               title='Full panel'
+              aria-pressed={previewMode === 'full'}
             >
               Full
             </button>
           </div>
           <button
             type='button'
             className='previewExpandBtn'
             onClick={() => setFullscreen((v) => !v)}
             title={fullscreen ? 'Exit fullscreen' : 'Expand preview'}
+            aria-label={fullscreen ? 'Exit fullscreen preview' : 'Expand preview to fullscreen'}
           >
             {fullscreen ? '\u2715' : '\u2922'}
           </button>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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>
<button
type='button'
className='previewExpandBtn'
onClick={() => setFullscreen((v) => !v)}
title={fullscreen ? 'Exit fullscreen' : 'Expand preview'}
>
{fullscreen ? '\u2715' : '\u2922'}
</button>
<div className='previewModeSwitch'>
<button
type='button'
className={previewMode === 'phone'
? 'previewModeBtn active'
: 'previewModeBtn'}
onClick={() => setPreviewMode('phone')}
title='Phone frame'
aria-pressed={previewMode === 'phone'}
>
Phone
</button>
<button
type='button'
className={previewMode === 'full'
? 'previewModeBtn active'
: 'previewModeBtn'}
onClick={() => setPreviewMode('full')}
title='Full panel'
aria-pressed={previewMode === 'full'}
>
Full
</button>
</div>
<button
type='button'
className='previewExpandBtn'
onClick={() => setFullscreen((v) => !v)}
title={fullscreen ? 'Exit fullscreen' : 'Expand preview'}
aria-label={fullscreen ? 'Exit fullscreen preview' : 'Expand preview to fullscreen'}
>
{fullscreen ? '\u2715' : '\u2922'}
</button>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/genui/a2ui-playground/src/pages/DemosPage.tsx` around lines 386 -
415, In DemosPage.tsx update the preview control buttons to include explicit
ARIA semantics: for the Phone and Full buttons inside the previewModeSwitch (the
buttons that call setPreviewMode and read previewMode) add an aria-pressed
attribute that evaluates to true when previewMode === 'phone' or previewMode ===
'full' respectively; and for the fullscreen toggle button with class
previewExpandBtn (the one that calls setFullscreen and reads fullscreen) add an
aria-label that reflects the action (e.g., "Exit fullscreen" when fullscreen is
true, otherwise "Expand preview") so screen readers get a meaningful
description.

</div>
{isSimulated
? (
Expand Down Expand Up @@ -467,6 +501,20 @@ export function DemosPage(props: { protocol: ProtocolVersion }) {
)}
</div>

{/* Live Component Stack */}
{liveComponents.length > 0
? (
<div className='liveComponentStack'>
<span className='liveComponentLabel'>Components</span>
<div className='liveComponentTags'>
{liveComponents.map((name) => (
<span key={name} className='liveComponentTag'>{name}</span>
))}
</div>
</div>
)
: null}

{/* QR Code Section — only shown when there's a render URL */}
{renderUrl || lynxDevUrl
? (
Expand Down
99 changes: 99 additions & 0 deletions packages/genui/a2ui-playground/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,6 +299,37 @@ a {
border-left: 1px solid var(--geist-border);
}

.previewPanelFullscreen {
position: fixed;
inset: 0;
z-index: 200;
width: 100%;
border-left: none;
background: var(--geist-background);
}

.previewExpandBtn {
width: 28px;
height: 28px;
border: none;
border-radius: var(--geist-radius-sm);
background: transparent;
color: var(--geist-secondary);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--geist-transition);
flex-shrink: 0;
padding: 0;
}

.previewExpandBtn:hover {
color: var(--geist-foreground);
background: var(--geist-surface);
}

.previewPanelHeader {
display: flex;
align-items: center;
Expand Down Expand Up @@ -359,6 +390,57 @@ a {
padding: 0;
}

/* ── Live Component Stack ── */
.liveComponentStack {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-top: 1px solid var(--geist-border);
background: var(--geist-background);
font-size: 12px;
overflow-x: auto;
}

.liveComponentLabel {
font-weight: 600;
color: var(--geist-secondary);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
}

.liveComponentTags {
display: flex;
gap: 4px;
flex-wrap: nowrap;
}

.liveComponentTag {
padding: 2px 8px;
border-radius: 4px;
background: var(--geist-surface);
border: 1px solid var(--geist-border);
font-size: 11px;
font-weight: 500;
color: var(--geist-foreground);
white-space: nowrap;
animation: tagAppear 300ms ease-out;
}

@keyframes tagAppear {
from {
opacity: 0;
transform: translateY(4px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
Comment on lines +430 to +442
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Rename tagAppear to kebab-case so Stylelint passes.

The current keyframe name violates the configured keyframes-name-pattern, so this stylesheet will fail lint as-is.

Suggested patch 
 .liveComponentTag {
   padding: 2px 8px;
   border-radius: 4px;
   background: var(--geist-surface);
   border: 1px solid var(--geist-border);
   font-size: 11px;
   font-weight: 500;
   color: var(--geist-foreground);
   white-space: nowrap;
-  animation: tagAppear 300ms ease-out;
+  animation: tag-appear 300ms ease-out;
 }
 
-@keyframes tagAppear {
+@keyframes tag-appear {
   from {
     opacity: 0;
     transform: translateY(4px) scale(0.9);
   }
🧰 Tools
🪛 Stylelint (17.9.0)

[error] 443-443: Expected keyframe name "tagAppear" to be kebab-case (keyframes-name-pattern)

(keyframes-name-pattern)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/genui/a2ui-playground/src/styles.css` around lines 440 - 452, The
keyframes name tagAppear violates the keyframes-name-pattern; rename the
`@keyframes` rule to a kebab-case name (e.g., tag-appear) and update any
references to it (the animation property on the selector that currently uses
"tagAppear 300ms ease-out") to use the new kebab-case identifier so Stylelint
passes.


.previewFullIframe {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -665,6 +747,23 @@ a {
color: var(--geist-foreground);
}

.scenarioTags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}

.scenarioTag {
font-size: 10px;
font-weight: 500;
color: var(--geist-secondary);
padding: 1px 6px;
border-radius: 4px;
background: var(--geist-surface);
border: 1px solid var(--geist-border);
}

.scenarioDesc {
font-size: 11px;
color: var(--geist-secondary);
Expand Down
Loading