feat(ui): add manual reload button to preview device toggles

This commit is contained in:
2026-05-15 16:31:31 -07:00
parent feebeccd8e
commit 8cb7a9450b
3 changed files with 49 additions and 8 deletions

View File

@@ -26,7 +26,7 @@ export default function PreviewTab() {
const previews = anatomy?.hosting.previews ?? [];
// Find the port 3000 preview if it exists, otherwise fall back to null
const primaryPreview = previews.find(p => p.port === 3000);
const primaryPreview = previews.find((p) => p.port === 3000);
const [iframeSrc, setIframeSrc] = useState<string | null>(null);
const iframeDomRef = useRef<HTMLIFrameElement | null>(null);
@@ -34,6 +34,7 @@ export default function PreviewTab() {
const origin = typeof window !== "undefined" ? window.location.origin : "";
const deviceMode = usePreviewToolbarStore((s) => s.deviceMode);
const refreshKey = usePreviewToolbarStore((s) => s.refreshKey);
useLayoutEffect(() => {
setIframeSrc(primaryPreview?.url ?? null);
@@ -72,7 +73,7 @@ export default function PreviewTab() {
</div>
) : iframeSrc ? (
<iframe
key={iframeSrc}
key={`${iframeSrc}-${refreshKey}`}
src={iframeSrc}
title="Preview"
ref={(el) => {
@@ -91,7 +92,9 @@ export default function PreviewTab() {
) : (
<div style={loaderWrap}>
<p style={emptyText}>Preview not running on port 3000.</p>
<p style={{...emptyText, fontSize: '0.75rem', marginTop: 8}}>Ask the AI to start the dev server.</p>
<p style={{ ...emptyText, fontSize: "0.75rem", marginTop: 8 }}>
Ask the AI to start the dev server.
</p>
</div>
)}