@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/canvas/widgets/MarkdownBlock.module.css

@@ -1,10 +1,10 @@
 .block {
   position: relative;
   min-height: 80px;
-  --sb--markdown-bg: var(--bgColor-default, #ffffff);
-  --sb--markdown-fg: var(--fgColor-default, #1f2328);
-  --sb--markdown-muted: var(--fgColor-muted, #656d76);
-  --sb--markdown-accent: var(--bgColor-accent-emphasis, #2f81f7);
+  --sb--markdown-bg: var(--color-background, #ffffff);
+  --sb--markdown-fg: var(--color-foreground, #1f2328);
+  --sb--markdown-muted: var(--color-foreground-muted, #656d76);
+  --sb--markdown-accent: var(--color-background-accent-emphasis, #2f81f7);
   background: var(--sb--markdown-bg);
   color: var(--sb--markdown-fg);
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
@@ -49,7 +49,7 @@
   max-width: 100%;
   height: auto;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  border: 1px solid var(--color-border, #d0d7de);
   margin: 8px 0;
   display: block;
   pointer-events: auto;
@@ -59,11 +59,11 @@
   max-width: 100%;
   height: auto;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  border: 1px solid var(--color-border, #d0d7de);
   margin: 8px 0;
   display: block;
   pointer-events: auto;
-  background: var(--bgColor-muted, #f6f8fa);
+  background: var(--color-background-muted, #f6f8fa);
 }
 
 .preview h1 {
@@ -92,7 +92,7 @@
 }
 
 .preview code {
-  background: var(--bgColor-neutral-muted, #afb8c133);
+  background: var(--color-background-neutral-muted, #afb8c133);
   padding: 2px 5px;
   border-radius: 4px;
   font-size: 12px;
@@ -145,13 +145,13 @@
 
 .preview th,
 .preview td {
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  border: 1px solid var(--color-border, #d0d7de);
   padding: 6px 12px;
   text-align: left;
 }
 
 .preview th {
-  background: var(--bgColor-muted, #f6f8fa);
+  background: var(--color-background-muted, #f6f8fa);
   font-weight: 600;
 }
 
@@ -159,17 +159,17 @@
 .preview pre {
   padding: 12px 16px;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-muted, #d8dee4);
+  border: 1px solid var(--color-border-muted, #d8dee4);
   overflow-x: auto;
   margin: 8px 0;
-  background: var(--bgColor-neutral-muted, #afb8c133);
+  background: var(--color-background-neutral-muted, #afb8c133);
   line-height: 1.4;
 }
 
 /* When inspector highlighter sets inline background, let it through */
 .preview pre[style] {
   border-radius: 6px;
-  border: 1px solid var(--borderColor-muted, #d8dee4);
+  border: 1px solid var(--color-border-muted, #d8dee4);
   overflow-x: auto;
   margin: 8px 0;
 }
@@ -193,7 +193,7 @@
 
 /* Blockquotes */
 .preview blockquote {
-  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  border-left: 4px solid var(--color-border, #d0d7de);
   margin: 8px 0;
   padding: 4px 16px;
   color: var(--sb--markdown-muted);
@@ -202,7 +202,7 @@
 /* Horizontal rules */
 .preview hr {
   border: none;
-  border-top: 1px solid var(--borderColor-default, #d0d7de);
+  border-top: 1px solid var(--color-border, #d0d7de);
   margin: 16px 0;
 }
 
@@ -231,10 +231,10 @@
 /* ── Expanded preview in modal ──────────────────────────────────── */
 
 .expandedPreview {
-  --sb--markdown-bg: var(--bgColor-default, #ffffff);
-  --sb--markdown-fg: var(--fgColor-default, #1f2328);
-  --sb--markdown-muted: var(--fgColor-muted, #656d76);
-  --sb--markdown-accent: var(--bgColor-accent-emphasis, #2f81f7);
+  --sb--markdown-bg: var(--color-background, #ffffff);
+  --sb--markdown-fg: var(--color-foreground, #1f2328);
+  --sb--markdown-muted: var(--color-foreground-muted, #656d76);
+  --sb--markdown-accent: var(--color-background-accent-emphasis, #2f81f7);
   padding: 32px 40px;
   font-size: 15px;
   line-height: 1.7;
@@ -264,7 +264,7 @@
   max-width: 100%;
   height: auto;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  border: 1px solid var(--color-border, #d0d7de);
   margin: 8px 0;
   display: block;
 }
@@ -273,7 +273,7 @@
   max-width: 100%;
   height: auto;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  border: 1px solid var(--color-border, #d0d7de);
   margin: 8px 0;
   display: block;
 }
@@ -284,7 +284,7 @@
 .expandedPreview p { margin: 0 0 12px; }
 
 .expandedPreview code {
-  background: var(--bgColor-neutral-muted, #afb8c133);
+  background: var(--color-background-neutral-muted, #afb8c133);
   padding: 2px 5px;
   border-radius: 4px;
   font-size: 13px;
@@ -294,10 +294,10 @@
 .expandedPreview pre {
   padding: 12px 16px;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-muted, #d8dee4);
+  border: 1px solid var(--color-border-muted, #d8dee4);
   overflow-x: auto;
   margin: 8px 0;
-  background: var(--bgColor-neutral-muted, #afb8c133);
+  background: var(--color-background-neutral-muted, #afb8c133);
   line-height: 1.4;
 }
 
@@ -314,7 +314,7 @@
 .expandedPreview li { margin: 0 0 4px; display: list-item; }
 
 .expandedPreview blockquote {
-  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  border-left: 4px solid var(--color-border, #d0d7de);
   margin: 12px 0;
   padding: 4px 16px;
   color: var(--sb--markdown-muted);
@@ -329,19 +329,19 @@
 
 .expandedPreview th,
 .expandedPreview td {
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  border: 1px solid var(--color-border, #d0d7de);
   padding: 6px 12px;
   text-align: left;
 }
 
 .expandedPreview th {
-  background: var(--bgColor-muted, #f6f8fa);
+  background: var(--color-background-muted, #f6f8fa);
   font-weight: 600;
 }
 
 .expandedPreview hr {
   border: none;
-  border-top: 1px solid var(--borderColor-default, #d0d7de);
+  border-top: 1px solid var(--color-border, #d0d7de);
   margin: 16px 0;
 }
 
@@ -365,7 +365,7 @@
   height: 100%;
   min-height: 0;
   overflow: hidden;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
 }
 
 .expandedEditor {
@@ -380,10 +380,10 @@
   border: none;
   outline: none;
   resize: none;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
   font-family: ui-monospace, SFMono-Regular, monospace;
   font-size: 14px;
   line-height: 1.6;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   overflow: auto;
 }

package/src/internals/canvas/widgets/PromptWidget.jsx

@@ -2,7 +2,6 @@ import { useState, useCallback, useEffect, useRef, forwardRef, useImperativeHand
 import { readProp, promptSchema } from './widgetProps.js'
 import { CopilotIcon, SquareFillIcon, CheckCircleIcon, XIcon } from '@primer/octicons-react'
 import ResizeHandle from './ResizeHandle.jsx'
-import { useWebGLSlot, Priority } from '../WebGLContextPool.jsx'
 import styles from './PromptWidget.module.css'
 
 function getBase() {
@@ -122,18 +121,6 @@ const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, res
   const termDisposedRef = useRef(false)
   const textareaRef = useRef(null)
 
-  // ── WebGL context pool integration ──
-  // Only request a live slot when the output terminal is actually shown
-  const { isLive, setPriority } = useWebGLSlot(id)
-
-  useEffect(() => {
-    if (showOutput && execStatus !== 'idle') {
-      setPriority(Priority.VISIBLE)
-    } else {
-      setPriority(Priority.OFFSCREEN)
-    }
-  }, [showOutput, execStatus, setPriority])
-
   const onUpdateRef = useRef(onUpdate)
   useEffect(() => { onUpdateRef.current = onUpdate }, [onUpdate])
 
@@ -304,9 +291,8 @@ const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, res
     }
   }, [onUpdate])
 
-  // Embedded read-only terminal (only created when pool grants a live slot)
+  // Embedded read-only terminal — created when the prompt has an active session
   useEffect(() => {
-    if (!isLive) return
     if (!showOutput || execStatus === 'idle') return
     if (!termContainerRef.current) return
 
@@ -376,7 +362,7 @@ const PromptWidget = forwardRef(function PromptWidget({ id, props, onUpdate, res
       termRef.current = null
       wsRef.current = null
     }
-  }, [isLive, showOutput, execStatus, id, width, height])
+  }, [showOutput, execStatus, id, width, height])
 
   const isPending = execStatus === 'pending'
   const isDone = execStatus === 'done'

package/src/internals/canvas/widgets/PromptWidget.module.css

@@ -1,12 +1,12 @@
 /* ── Loom-style prompt widget ── */
 
 .wrapper {
-  background: var(--bgColor-default, #fff);
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  background: var(--color-background, #fff);
+  border: 1px solid var(--color-border, #d0d7de);
   border-radius: 16px;
   padding: 20px;
   min-width: 200px;
-  font-family: var(--fontStack-system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.06);
 }
 
@@ -23,24 +23,24 @@
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: var(--bgColor-neutral-muted, #eaeef2);
+  background: var(--color-background-neutral-muted, #eaeef2);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--fgColor-muted, #636c76);
+  color: var(--color-foreground-muted, #636c76);
 }
 
 .avatarDone {
-  background: var(--bgColor-success-muted, #dafbe1);
-  color: var(--fgColor-success, #1a7f37);
+  background: var(--color-background-success-muted, #dafbe1);
+  color: var(--color-foreground-success, #1a7f37);
 }
 
 .textarea {
   flex: 1;
   border: none;
   background: transparent;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   font-size: 14px;
   font-family: inherit;
   line-height: 1.5;
@@ -55,7 +55,7 @@
 }
 
 .textarea::placeholder {
-  color: var(--fgColor-muted, #636c76);
+  color: var(--color-foreground-muted, #636c76);
 }
 
 /* ── Toolbar: icons + submit ── */
@@ -72,9 +72,9 @@
   font-size: 12px;
   padding: 4px 14px;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-default, #d0d7de);
-  background: var(--bgColor-default, #fff);
-  color: var(--fgColor-muted, #636c76);
+  border: 1px solid var(--color-border, #d0d7de);
+  background: var(--color-background, #fff);
+  color: var(--color-foreground-muted, #636c76);
   cursor: pointer;
   white-space: nowrap;
   font-weight: 500;
@@ -82,8 +82,8 @@
 }
 
 .submitBtn:hover:not(:disabled) {
-  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.2));
-  color: var(--fgColor-default, #1f2328);
+  background: var(--color-background-neutral-muted, rgba(175, 184, 193, 0.2));
+  color: var(--color-foreground, #1f2328);
 }
 
 .submitBtn:disabled {
@@ -96,9 +96,9 @@
 .errorText {
   margin: 0 0 12px;
   padding: 6px 10px;
-  background: var(--bgColor-danger-muted, #ffebe9);
+  background: var(--color-background-danger-muted, #ffebe9);
   border-radius: 8px;
-  color: var(--fgColor-danger, #cf222e);
+  color: var(--color-foreground-danger, #cf222e);
   font-size: 12px;
   line-height: 1.4;
   overflow: hidden;
@@ -122,7 +122,7 @@
 
 .pendingText {
   font-size: 14px;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   line-height: 1.5;
   margin: 0;
   padding-top: 4px;
@@ -136,7 +136,7 @@
 
 .pendingHint {
   font-size: 12px;
-  color: var(--fgColor-muted, #636c76);
+  color: var(--color-foreground-muted, #636c76);
   margin: 0;
 }
 
@@ -149,7 +149,7 @@
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  color: var(--fgColor-accent, #0969da);
+  color: var(--color-foreground-accent, #0969da);
   transition: background 0.15s;
   position: relative;
   width: 24px;
@@ -157,18 +157,18 @@
 }
 
 .cancelBtn:hover {
-  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.2));
+  background: var(--color-background-neutral-muted, rgba(175, 184, 193, 0.2));
 }
 
 .spinnerSvg {
   animation: spin 1s linear infinite;
-  color: var(--fgColor-accent, #0969da);
+  color: var(--color-foreground-accent, #0969da);
 }
 
 .stopIcon {
   display: none;
   position: absolute;
-  color: var(--fgColor-danger, #cf222e);
+  color: var(--color-foreground-danger, #cf222e);
 }
 
 .cancelBtn:hover .spinnerSvg {
@@ -200,7 +200,7 @@
 
 .doneText {
   font-size: 14px;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   line-height: 1.5;
   margin: 0;
   padding-top: 4px;
@@ -210,8 +210,8 @@
   align-self: flex-end;
   padding: 4px 14px;
   background: transparent;
-  color: var(--fgColor-accent, #0969da);
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  color: var(--color-foreground-accent, #0969da);
+  border: 1px solid var(--color-border, #d0d7de);
   border-radius: 6px;
   font-size: 12px;
   cursor: pointer;
@@ -219,14 +219,14 @@
 }
 
 .resetBtn:hover {
-  background: var(--bgColor-muted, #f6f8fa);
+  background: var(--color-background-muted, #f6f8fa);
 }
 
 /* ── Inline terminal output (flush to bottom edge) ── */
 
 .terminalArea {
   margin: 16px -20px -20px;
-  border-top: 1px solid var(--borderColor-muted, #d8dee4);
+  border-top: 1px solid var(--color-border-muted, #d8dee4);
   overflow: hidden;
   border-radius: 0 0 16px 16px;
 }
@@ -236,14 +236,14 @@
   align-items: center;
   justify-content: space-between;
   padding: 4px 10px;
-  background: var(--bgColor-muted, #f6f8fa);
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  background: var(--color-background-muted, #f6f8fa);
+  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
 }
 
 .terminalLabel {
   font-size: 11px;
   font-weight: 600;
-  color: var(--fgColor-muted, #636c76);
+  color: var(--color-foreground-muted, #636c76);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -257,13 +257,13 @@
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  color: var(--fgColor-muted, #636c76);
+  color: var(--color-foreground-muted, #636c76);
   transition: background 0.15s;
 }
 
 .terminalClose:hover {
-  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.2));
-  color: var(--fgColor-default, #1f2328);
+  background: var(--color-background-neutral-muted, rgba(175, 184, 193, 0.2));
+  color: var(--color-foreground, #1f2328);
 }
 
 .terminalContainer {

package/src/internals/canvas/widgets/PrototypeEmbed.jsx

@@ -7,6 +7,7 @@ import { readProp, prototypeEmbedSchema } from './widgetProps.js'
 import { getEmbedChromeVars } from './embedTheme.js'
 import { useIframeDevLogs } from './iframeDevLogs.js'
 import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
+import { normalizeLegacyEmbedSrc } from './normalizeLegacyEmbedSrc.js'
 import ExpandedPane from './ExpandedPane.jsx'
 import styles from './PrototypeEmbed.module.css'
 import overlayStyles from './embedOverlay.module.css'
@@ -46,27 +47,87 @@ function resolveCanvasThemeFromStorage() {
 const HEADER_HEIGHT = 37
 
 export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdate, resizable }, ref) {
-  const src = readProp(props, 'src', prototypeEmbedSchema)
+  const rawStoredSrc = readProp(props, 'src', prototypeEmbedSchema)
+  const src = normalizeLegacyEmbedSrc(rawStoredSrc)
   const width = readProp(props, 'width', prototypeEmbedSchema) || 800
   const height = readProp(props, 'height', prototypeEmbedSchema) || 600
   const zoom = readProp(props, 'zoom', prototypeEmbedSchema) || 100
   const label = readProp(props, 'label', prototypeEmbedSchema) || src
 
+  // Self-healing write-back: if normalization changed the src, persist the
+  // clean form so the canvas JSONL stops carrying the broken URL. Without
+  // this, every render keeps recovering at runtime but the file stays
+  // poisoned and any consumer on an older library still sees the bug.
+  useEffect(() => {
+    if (!onUpdate) return
+    if (typeof rawStoredSrc !== 'string' || rawStoredSrc === src) return
+    onUpdate({ src })
+  }, [rawStoredSrc, src, onUpdate])
+
   const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
   const baseSegment = basePath.replace(/^\//, '')
-  const rawSrc = useMemo(() => {
-    if (!src) return ''
-    if (/^https?:\/\//.test(src)) return src
+  // Two URLs are derived from `src`:
+  //   - rawSrc — the iframe URL. In DEV this routes through the isolated
+  //     prototypes.html entry so a broken prototype's transform/HMR errors
+  //     stay inside the iframe (see .agents/plans/vite-isolation.md):
+  //     /MyProto/SignupForm becomes prototypes.html/MyProto/SignupForm.
+  //     Routing happens in the *pathname* (createBrowserRouter), not in the
+  //     hash, so the hash and search stay free for storyboard URL state
+  //     (`?flow=...` and `#key=value` overrides). In PROD it loads the
+  //     prototype path directly through the canvas SPA (prototypes.html is
+  //     a build-time isolation artifact that must not leak into deployed URLs).
+  //   - externalSrc — the URL used by "Open in new tab". Always direct
+  //     (`${basePath}/<protoPath>`), never prototypes.html, even in dev —
+  //     opening prototypes.html/... in a fresh tab is a leaky surprise
+  //     for users navigating from the canvas.
+  // External http(s) URLs are left alone in both cases. basePath already
+  // carries the /branch--xxx/ prefix on branch deploys, so both work for
+  // main and branch deploys alike.
+  const { rawSrc, externalSrc } = useMemo(() => {
+    if (!src) return { rawSrc: '', externalSrc: '' }
+    if (/^https?:\/\//.test(src)) return { rawSrc: src, externalSrc: src }
     const cleaned = src.replace(/^\/branch--[^/]+/, '')
-    if (baseSegment && cleaned.startsWith(basePath)) return cleaned
-    if (baseSegment && cleaned.startsWith(baseSegment)) return `/${cleaned}`
-    return `${basePath}${cleaned}`
+    let normalized
+    if (baseSegment && cleaned.startsWith(basePath)) normalized = cleaned
+    else if (baseSegment && cleaned.startsWith(baseSegment)) normalized = `/${cleaned}`
+    else normalized = `${basePath}${cleaned}`
+    // Strip basePath so we can split path/query/hash cleanly and
+    // re-anchor for whichever mode we're in. Any pre-existing #hash on
+    // the original src is preserved.
+    const withoutBase = baseSegment && normalized.startsWith(basePath)
+      ? normalized.slice(basePath.length) || '/'
+      : normalized
+    const hashIdx = withoutBase.indexOf('#')
+    const innerHash = hashIdx >= 0 ? withoutBase.slice(hashIdx + 1) : ''
+    const pathAndQuery = hashIdx >= 0 ? withoutBase.slice(0, hashIdx) : withoutBase
+    const routePath = pathAndQuery.startsWith('/') ? pathAndQuery : `/${pathAndQuery}`
+    const suffix = innerHash ? `#${innerHash}` : ''
+    // Direct path through the canvas SPA — used in prod for the iframe and
+    // always for "Open in new tab".
+    const directUrl = `${basePath}${routePath}${suffix}`
+    if (import.meta.env.PROD) {
+      return { rawSrc: directUrl, externalSrc: directUrl }
+    }
+    // Dev iframe: prototypes.html with the route as a sub-path. The library
+    // middleware (`data-plugin.js`) serves the same HTML shell for
+    // `/prototypes.html/*` so a hard reload / open-in-new-tab works. The
+    // prototype name (first path segment) narrows getRoutesForProto so a
+    // broken sibling prototype can't poison the lazy() chain. Hash and
+    // search stay attached so storyboard URL state (`#key=value` overrides,
+    // `?flow=name`) survives the redirect through the isolation entry.
+    const iframeUrl = `${basePath}/prototypes.html${routePath}${suffix}`
+    return { rawSrc: iframeUrl, externalSrc: directUrl }
   }, [src, basePath, baseSegment])
 
   const scale = zoom / 100
 
   const [editing, setEditing] = useState(false)
   const [interactive, setInteractive] = useState(false)
+  // Track which src URL has fired its onLoad callback so we can overlay a
+  // spinner while a new iframe is fetching. Stored as the URL itself (not
+  // a boolean) so changing src naturally invalidates the loaded state
+  // without an effect.
+  const [loadedSrc, setLoadedSrc] = useState(null)
   const [expandOverride, setExpandOverride, clearExpandOverride] = useOverride(`_prototype_expanded_${widgetId}`)
   const expandMode = expandOverride === 'immersive' ? 'immersive' : expandOverride === 'split' ? 'split' : expandOverride === 'single' ? 'single' : null
   const setExpandMode = useCallback((mode) => {
@@ -268,7 +329,10 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     function handleMessage(e) {
       if (e.source !== iframeRef.current?.contentWindow) return
       if (e.data?.type !== 'storyboard:embed:navigate') return
-      const newSrc = e.data.src
+      // Defensive: older consumer embeds reported `/prototypes.html#/route`
+      // here (loader path + hash). Normalize to the inner route so we never
+      // persist the broken form.
+      const newSrc = normalizeLegacyEmbedSrc(e.data.src)
       if (newSrc && newSrc !== src) {
         const originalSrc = readProp(props, 'originalSrc', prototypeEmbedSchema)
         onUpdate?.({ src: newSrc, originalSrc: originalSrc || src })
@@ -295,7 +359,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
       } else if (actionId === 'split-screen') {
         setExpandMode('split')
       } else if (actionId === 'open-external') {
-        if (rawSrc) window.open(rawSrc, '_blank', 'noopener')
+        if (externalSrc) window.open(externalSrc, '_blank', 'noopener')
       } else if (actionId === 'refresh-frame') {
         const iframe = iframeRef.current
         if (iframe) {
@@ -310,7 +374,7 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
         onUpdate?.({ zoom: Math.max(25, zoom - step) })
       }
     },
-  }), [rawSrc, zoom, onUpdate])
+  }), [externalSrc, zoom, onUpdate])
 
   function handlePickRoute(route) {
     onUpdate?.({ src: route })
@@ -340,12 +404,18 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
     <WidgetWrapper>
       <div
         ref={embedRef}
-        className={styles.embed}
-        style={{ width, height, ...chromeVars }}
+        className="relative overflow-hidden rounded-lg bg-background shadow-[0_4px_16px_rgba(0,0,0,0.08)]"
+        style={{
+          width,
+          height,
+          ...chromeVars,
+        }}
       >
-        <div className={styles.header}>
-          <span className={styles.headerIcon}><CollageFrameIcon size={16} /></span>
-          <span className={styles.headerTitle}>{prototypeTitle}</span>
+        <div
+          className="flex items-center gap-1.5 px-2.5 py-2.5 text-xs font-medium whitespace-nowrap overflow-hidden text-ellipsis select-none border-b border-border-muted bg-background-muted text-foreground-muted"
+        >
+          <span className="inline-flex flex-shrink-0"><CollageFrameIcon size={16} /></span>
+          <span className="overflow-hidden text-ellipsis">{prototypeTitle}</span>
         </div>
         {editing ? (
           <div
@@ -420,9 +490,14 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
                 }}
                 title={`${prototypeTitle} prototype`}
                 sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
-                onLoad={(e) => e.target.blur()}
+              onLoad={(e) => { e.target.blur(); setLoadedSrc(effectiveSrc) }}
               />
-            </div>
+            {loadedSrc !== effectiveSrc && (
+              <div className={styles.placeholder} aria-hidden="true">
+                <div className={styles.spinner} />
+              </div>
+            )}
+          </div>
             {!interactive && !expanded && (
               <div
                 className={overlayStyles.interactOverlay}