50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3130,"use client"; import type { ComponentProps, ReactNode } from "react"; import { useState } from "react"; import { AnimatedWash } from "@/components/animated-wash/animated-wash"; import { NeonLoader } from "@/components/neon-loader/neon-loader"; import { Button, buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export type PreviewFrameState = "ready" | "sleeping" | "waking" | "error"; export type PreviewFrameProps = Omit, "title"> & { /** The sandbox URL the frame renders. */ src: string; /** * What the header readout shows when the real src is an internal * sandbox host. Defaults to src. */ displaySrc?: string; /** Accessible name for the iframe, e.g. the app's name. */ title: string; /** * Lifecycle state: "ready" shows the app, "sleeping" dims it behind * a wake-on-click scrim, "waking" covers it with the loader while * the sandbox spins up, "error" offers a restart. */ state?: PreviewFrameState; /** Renders the wake action in the sleeping state. */ onWake?: () => void; /** One line under the sleeping title. */ sleepingDetail?: string; /** * Bump this number to force a reload from outside — e.g. after the * agent finishes an edit. Merged with the internal refresh count. */ reloadSignal?: number; /** Renders the restart action (header and error panel). */ onRestart?: () => void; /** Notified after the built-in refresh action reloads the frame. */ onRefresh?: () => void; /** One line of detail under the error title. */ errorDetail?: string; /** Copy under the loader while waking. */ wakingLabel?: string; /** Extra actions rendered before the built-in header buttons. */ actions?: ReactNode; /** * The agent is editing the app right now: the header dot breathes and a * quiet "editing…" readout joins the URL. The app stays visible — it is * still live and hot-reloading under the changes. */ working?: boolean; /** The iframe sandbox policy. */ sandbox?: string; }; /* ───────────────────────────────────────────────────────── * LIFECYCLE STORYBOARD * * The chrome stays constant; only the stage changes. Every * overlay is absolute, so the frame never changes height. * * ready the app, full bleed; the header dot holds * primary and the URL reads in mono * refresh the refresh glyph spins one turn (500ms * ease-out) while the iframe remounts — the * chrome acknowledges the click even when the * app reloads too fast to notice * sleeping the app dims behind the scrim — suspended, not * gone; the dot rests dim, and a click anywhere * on the frame (or the wake action) brings the * compute back * waking a scrim covers the app; the NeonLoader * resolves out of grain with one mono line under * it; the dot breathes muted * error the scrim holds; mono "error" prefix, one * detail line, and a restart action; the dot * cools to destructive * signal reloadSignal bumps from outside (e.g. the * agent finished an edit) and the frame remounts * without any chrome motion * ───────────────────────────────────────────────────────── */ const STATE_DOT: Record = { error: "bg-destructive", ready: "bg-primary", sleeping: "bg-muted-foreground/40", waking: "animate-pulse bg-muted-foreground/60 motion-reduce:animate-none", }; const SPIN_MS = 500; const RefreshIcon = ({ spinning }: { spinning: boolean }) => ( ); const RestartIcon = () => ( ); const ExternalIcon = () => ( ); /** Strips the scheme so the readout stays quiet, like a browser. */ const displayUrl = (src: string) => src.replace(/^https?:\/\//u, ""); const MoonIcon = () => ( ); /** The header's live vocabulary: state dot, URL, and the editing readout. */ const HeaderStatus = ({ state, url, working, }: { state: PreviewFrameState; url: string; working: boolean; }) => { const editing = working && state === "ready"; return ( <> {url} {editing && ( agent editing… )} ); }; export const PreviewFrame = ({ actions, className, displaySrc, errorDetail, onRefresh, onRestart, onWake, sleepingDetail = "Compute suspended after inactivity.", reloadSignal = 0, sandbox = "allow-scripts allow-same-origin allow-forms", src, state = "ready", title, wakingLabel = "Waking sandbox", working = false, ...props }: PreviewFrameProps) => { const [refreshCount, setRefreshCount] = useState(0); const [spinning, setSpinning] = useState(false); const refresh = () => { setRefreshCount((count) => count + 1); setSpinning(true); window.setTimeout(() => setSpinning(false), SPIN_MS); onRefresh?.(); }; return (

{actions} {onRestart ? ( ) : null}