@dfosco/storyboard-react 4.2.0-beta.17 → 4.2.0-beta.18

package/src/canvas/CanvasPage.jsx

@@ -6,12 +6,16 @@ import { shouldPreventCanvasTextSelection } from './textSelection.js'
 import { getCanvasThemeVars, getCanvasPrimerAttrs } from './canvasTheme.js'
 import { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
-import { getFeatures, isResizable, isExpandable, getAnchorState, canAcceptConnection } from './widgets/widgetConfig.js'
+import { getFeatures, isResizable, isExpandable, getAnchorState, canAcceptConnection, isSplitScreenCapable } from './widgets/widgetConfig.js'
 import { createPasteContext, resolvePaste } from './widgets/pasteRules.js'
 import { getPasteRules } from '@dfosco/storyboard-core'
+import { isTerminalResizable, getTerminalDimensions } from '@dfosco/storyboard-core'
+import { getFlag } from '@dfosco/storyboard-core'
+import { getCanvasZoom } from '@dfosco/storyboard-core'
 import { registerSmoothCorners } from '@dfosco/storyboard-core/smooth-corners'
+import { registerHotPoolDevLogs } from './hotPoolDevLogs.js'
 import { isGitHubEmbedUrl } from './widgets/githubUrl.js'
-import { findConnectedSplitTarget } from './widgets/expandUtils.js'
+
 import WidgetChrome from './widgets/WidgetChrome.jsx'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
 import useUndoRedo from './useUndoRedo.js'
@@ -20,6 +24,7 @@ import MarqueeOverlay from './MarqueeOverlay.jsx'
 import {
   addWidget as addWidgetApi,
   checkGitHubCliAvailable,
+  duplicateImage,
   fetchGitHubEmbed,
   getCanvas as getCanvasApi,
   removeWidget as removeWidgetApi,
@@ -28,6 +33,8 @@ import {
   uploadImage,
   addConnector as addConnectorApi,
   removeConnector as removeConnectorApi,
+  updateConnector as updateConnectorApi,
+  batchOperations,
 } from './canvasApi.js'
 import PageSelector from './PageSelector.jsx'
 import Icon from '../Icon.jsx'
@@ -35,8 +42,11 @@ import { stories as storyIndex } from 'virtual:storyboard-data-index'
 import styles from './CanvasPage.module.css'
 import ConnectorLayer from './ConnectorLayer.jsx'
 
-const ZOOM_MIN = 25
-const ZOOM_MAX = 200
+/** Canvas zoom limits — read from storyboard.config.json via canvasConfig. */
+function zoomLimits() {
+  const z = getCanvasZoom()
+  return { ZOOM_MIN: z.min, ZOOM_MAX: z.max, ZOOM_STEP: z.step }
+}
 
 /** Saved viewport state older than this is considered stale — zoom-to-fit instead. */
 const VIEWPORT_TTL_MS = 15 * 60 * 1000
@@ -45,6 +55,7 @@ const CANVAS_BRIDGE_STATE_KEY = '__storyboardCanvasBridgeState'
 const GH_INSTALL_URL = 'https://github.com/cli/cli'
 
 registerSmoothCorners()
+registerHotPoolDevLogs()
 
 /** Matches branch-deploy base path prefixes like /branch--my-feature/ */
 const BRANCH_PREFIX_RE = /^\/branch--[^/]+/
@@ -133,16 +144,17 @@ function getViewportStorageKey(canvasId) {
 function loadViewportState(canvasId) {
   try {
     const raw = localStorage.getItem(getViewportStorageKey(canvasId))
-    if (!raw) { console.log('[viewport] no saved state for', canvasId); return null }
+    if (!raw) { if (getFlag('dev-logs')) console.log('[viewport] no saved state for', canvasId); return null }
     const state = JSON.parse(raw)
     const timestamp = typeof state.timestamp === 'number' ? state.timestamp : 0
     const age = Date.now() - timestamp
     if (age > VIEWPORT_TTL_MS) {
-      console.log('[viewport] stale state for', canvasId, '— age:', Math.round(age / 1000), 's')
+      if (getFlag('dev-logs')) console.log('[viewport] stale state for', canvasId, '— age:', Math.round(age / 1000), 's')
       localStorage.removeItem(getViewportStorageKey(canvasId))
       return null
     }
-    console.log('[viewport] loaded state for', canvasId, '— age:', Math.round(age / 1000), 's, zoom:', state.zoom, 'scroll:', state.scrollLeft, state.scrollTop)
+    if (getFlag('dev-logs')) console.log('[viewport] loaded state for', canvasId, '— age:', Math.round(age / 1000), 's, zoom:', state.zoom, 'scroll:', state.scrollLeft, state.scrollTop)
+    const { ZOOM_MIN, ZOOM_MAX } = zoomLimits()
     return {
       zoom: typeof state.zoom === 'number' ? Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, state.zoom)) : null,
       scrollLeft: typeof state.scrollLeft === 'number' ? state.scrollLeft : null,
@@ -272,13 +284,15 @@ function computeCanvasBounds(widgets, componentEntries) {
 }
 
 /** Renders a single JSON-defined widget by type lookup. */
-function WidgetRenderer({ widget, onUpdate, widgetRef, onRefreshGitHub, canRefreshGitHub }) {
+function WidgetRenderer({ widget, onUpdate, widgetRef, onRefreshGitHub, canRefreshGitHub, multiSelected }) {
   const Component = getWidgetComponent(widget.type)
   if (!Component) {
     console.warn(`[canvas] Unknown widget type: ${widget.type}`)
     return null
   }
-  const resizable = isResizable(widget.type) && !!onUpdate
+  const resizable = (widget.type === 'terminal' || widget.type === 'agent')
+    ? isTerminalResizable(widget.props?.agentId) && !!onUpdate
+    : isResizable(widget.type) && !!onUpdate
   // Only pass ref to forwardRef-wrapped components (e.g. PrototypeEmbed)
   const elementProps = {
     id: widget.id,
@@ -287,6 +301,7 @@ function WidgetRenderer({ widget, onUpdate, widgetRef, onRefreshGitHub, canRefre
     resizable,
     onRefreshGitHub,
     canRefreshGitHub,
+    multiSelected,
   }
   if (Component.$$typeof === Symbol.for('react.forward_ref')) {
     elementProps.ref = widgetRef
@@ -305,11 +320,13 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
   selected,
   multiSelected,
   connectorCount,
+  allWidgets,
   onSelect,
   onDeselect,
   onUpdate,
   onRemove,
   onCopy,
+  onCopyWithConnectors,
   onRefreshGitHub,
   canRefreshGitHub,
   onConnectorDragStart,
@@ -336,9 +353,15 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
       return f
     }).filter(Boolean)
 
-    // Add dynamic "Split Screen" action when a connected split target exists
+    // Add dynamic "Split Screen" action when a connected split target exists.
+    // Uses connectorCount/allWidgets props (reactive) instead of the global
+    // bridge state which may be stale during React render.
     if (isExpandable(widget.type)) {
-      const hasConnected = Boolean(findConnectedSplitTarget(widget.id))
+      const hasConnected = (connectorCount || []).some((c) => {
+        const otherId = c.start?.widgetId === widget.id ? c.end?.widgetId : c.start?.widgetId
+        const otherWidget = (allWidgets || []).find((w) => w.id === otherId)
+        return otherWidget && isSplitScreenCapable(otherWidget.type)
+      })
       if (hasConnected) {
         // Insert before the first menu-only feature
         const insertIdx = adjusted.findIndex((f) => f.menu)
@@ -355,14 +378,52 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
       }
     }
 
+    // Add dynamic "Broadcast" toggle for terminal/agent widgets with connected peers
+    if (widget.type === 'terminal' || widget.type === 'agent') {
+      const widgetConnectors = connectorCount || []
+      const widgetList = allWidgets || []
+      let hasBroadcastPeers = false
+      let allBroadcastActive = true
+      const broadcastConnectorIds = []
+
+      for (const conn of widgetConnectors) {
+        const peerId = conn.start?.widgetId === widget.id ? conn.end?.widgetId : conn.start?.widgetId
+        const peer = widgetList.find((w) => w.id === peerId)
+        if (peer && (peer.type === 'terminal' || peer.type === 'agent')) {
+          hasBroadcastPeers = true
+          broadcastConnectorIds.push(conn.id)
+          if (conn.meta?.messagingMode !== 'two-way') allBroadcastActive = false
+        }
+      }
+
+      if (hasBroadcastPeers) {
+        const isActive = allBroadcastActive
+        const insertIdx = adjusted.findIndex((f) => f.menu)
+        const broadcastFeature = {
+          id: 'broadcast',
+          type: 'action',
+          action: `broadcast-toggle:${broadcastConnectorIds.join(',')}:${isActive ? 'off' : 'on'}`,
+          label: isActive ? 'Broadcast On' : 'Broadcast',
+          icon: 'broadcast',
+          active: isActive,
+        }
+        if (insertIdx >= 0) adjusted.splice(insertIdx, 0, broadcastFeature)
+        else adjusted.push(broadcastFeature)
+      }
+    }
+
     return adjusted
-  }, [rawFeatures, widget.props?.github, widget.props?.collapsed, widget.type, widget.id, connectorCount])
+  }, [rawFeatures, widget.props?.github, widget.props?.collapsed, widget.type, widget.id, connectorCount, allWidgets])
 
-  const handleAction = useCallback((actionId) => {
+  const handleAction = useCallback((actionId, opts) => {
     if (actionId === 'delete') {
       onRemove?.(widget.id)
     } else if (actionId === 'copy') {
-      onCopy?.(widget)
+      if (opts?.altKey && onCopyWithConnectors) {
+        onCopyWithConnectors(widget)
+      } else {
+        onCopy?.(widget)
+      }
     } else if (actionId === 'copy-text') {
       const title = widget.props?.title || ''
       const body = widget.props?.text || widget.props?.content || widget.props?.github?.body || ''
@@ -384,8 +445,20 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
           if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
         })
       }
+    } else if (actionId.startsWith('broadcast-toggle:')) {
+      // broadcast-toggle:<connectorId1,connectorId2,...>:<on|off>
+      const parts = actionId.split(':')
+      const connectorIds = parts[1].split(',')
+      const turnOn = parts[2] === 'on'
+      const bridge = window.__storyboardCanvasBridgeState
+      const canvasId = bridge?.canvasId || ''
+      const meta = turnOn ? { messagingMode: 'two-way' } : { messagingMode: null }
+      for (const cid of connectorIds) {
+        updateConnectorApi(canvasId, cid, meta)
+          .catch((err) => console.error('[canvas] Failed to toggle broadcast:', err))
+      }
     }
-  }, [widget, onRemove, onCopy, onRefreshGitHub])
+  }, [widget, onRemove, onCopy, onCopyWithConnectors, onRefreshGitHub])
 
   const handleWidgetFieldUpdate = useCallback((updates) => {
     onUpdate?.(widget.id, updates)
@@ -413,6 +486,7 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
         widgetRef={widgetRef}
         onRefreshGitHub={onRefreshGitHub}
         canRefreshGitHub={canRefreshGitHub}
+        multiSelected={multiSelected}
       />
     </WidgetChrome>
   )
@@ -422,6 +496,7 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
     prev.selected === next.selected &&
     prev.multiSelected === next.multiSelected &&
     prev.connectorCount === next.connectorCount &&
+    prev.allWidgets === next.allWidgets &&
     prev.readOnly === next.readOnly &&
     prev.onSelect === next.onSelect &&
     prev.onDeselect === next.onDeselect &&
@@ -556,6 +631,11 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   const [snapGridSize, setSnapGridSize] = useState(canvas?.gridSize || 40)
   const [showGhInstallBanner, setShowGhInstallBanner] = useState(false)
 
+  // Scroll lock: prevents focus-triggered scroll jumps when adding terminal/agent widgets.
+  // The lock captures the current scroll position and forces it back on every scroll event
+  // until unlocked by the widget's ready signal or a safety timeout.
+  // Visual UI (outline + banner) only appears after 1.5s if still locked.
+
   // Refs for snap settings (used by drop handler inside effect closure)
   const snapEnabledRef = useRef(snapEnabled)
   const snapGridSizeRef = useRef(snapGridSize)
@@ -599,12 +679,38 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   // Prevents HMR echoes from overwriting in-flight local state.
   const dirtyRef = useRef(false)
 
+  // Counter of in-flight writes. dirtyRef is only cleared when this reaches 0,
+  // preventing early clears when multiple writes are queued in sequence.
+  const inflightWritesRef = useRef(0)
+
+  // Grace period timer — after all writes complete, dirtyRef stays true for a
+  // brief window to absorb delayed file-watcher HMR events that arrive after
+  // the server's immediate push. Defense-in-depth for the write guard.
+  const dirtyGraceTimerRef = useRef(null)
+
   // Serialized write queue — ensures JSONL events land in the right order
   const writeQueueRef = useRef(Promise.resolve())
   function queueWrite(fn) {
-    writeQueueRef.current = writeQueueRef.current.then(fn).catch((err) =>
-      console.error('[canvas] Write queue error:', err)
-    )
+    clearTimeout(dirtyGraceTimerRef.current)
+    inflightWritesRef.current += 1
+    writeQueueRef.current = writeQueueRef.current
+      .then(fn)
+      .catch((err) => console.error('[canvas] Write queue error:', err))
+      .finally(() => {
+        inflightWritesRef.current -= 1
+        if (inflightWritesRef.current < 0) {
+          console.warn('[canvas] Write queue counter underflow — resetting')
+          inflightWritesRef.current = 0
+        }
+        if (inflightWritesRef.current === 0) {
+          // Grace period — absorb delayed watcher HMR events before clearing
+          dirtyGraceTimerRef.current = setTimeout(() => {
+            if (inflightWritesRef.current === 0) {
+              dirtyRef.current = false
+            }
+          }, 600)
+        }
+      })
     return writeQueueRef.current
   }
 
@@ -691,7 +797,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
   if (canvas !== trackedCanvas) {
     const isCanvasSwitch = trackedCanvas && canvas && trackedCanvas._route !== canvas._route
-    console.log('[viewport] canvas changed —', isCanvasSwitch ? 'new canvas, resetting viewport' : 'same canvas, updating widgets only')
+    if (getFlag('dev-logs')) console.log('[viewport] canvas changed —', isCanvasSwitch ? 'new canvas, resetting viewport' : 'same canvas, updating widgets only')
     setTrackedCanvas(canvas)
 
     // Skip replacing local state with server data when optimistic edits are
@@ -705,7 +811,9 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
     setSnapEnabled(canvas?.snapToGrid ?? false)
     setSnapGridSize(canvas?.gridSize || 40)
-    undoRedo.reset()
+    if (isCanvasSwitch) {
+      undoRedo.reset()
+    }
     // Only reset viewport state when switching to a different canvas,
     // not when the same canvas refreshes with server data.
     if (isCanvasSwitch) {
@@ -725,7 +833,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       queueWrite(() =>
         updateCanvas(canvasId, { widgets })
           .catch((err) => console.error('[canvas] Failed to save:', err))
-          .finally(() => { dirtyRef.current = false })
       )
     }, 2000)
   ).current
@@ -773,7 +880,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     queueWrite(() =>
       removeWidgetApi(canvasId, widgetId)
         .catch((err) => console.error('[canvas] Failed to remove widget:', err))
-        .finally(() => { dirtyRef.current = false })
     )
   }, [canvasId, undoRedo, debouncedSave])
 
@@ -792,6 +898,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   const handleConnectorRemove = useCallback((connectorId) => {
     undoRedo.snapshot(stateRef.current, 'connector-remove')
     setLocalConnectors((prev) => prev.filter((c) => c.id !== connectorId))
+    dirtyRef.current = true
     queueWrite(() =>
       removeConnectorApi(canvasId, connectorId).catch((err) =>
         console.error('[canvas] Failed to remove connector:', err)
@@ -963,10 +1070,16 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       n++
     }
     const position = { x: baseX + n * 40, y: baseY + n * 40 }
+    const isTerminal = widget.type === 'terminal' || widget.type === 'agent'
     try {
       const copyProps = { ...widget.props }
       // Terminal widgets must get unique names — strip prettyName so the server generates a fresh one
-      if (widget.type === 'terminal' || widget.type === 'agent') delete copyProps.prettyName
+      if (isTerminal) delete copyProps.prettyName
+      // Image widgets: duplicate the asset file so each widget owns its own copy
+      if (widget.type === 'image' && copyProps.src) {
+        const dupResult = await duplicateImage(copyProps.src)
+        if (dupResult.success) copyProps.src = dupResult.filename
+      }
 
       undoRedo.snapshot(stateRef.current, 'add')
       const result = await addWidgetApi(canvasId, {
@@ -983,6 +1096,293 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
   }, [canvasId, localWidgets, undoRedo])
 
+  // Duplicate a single widget WITH its connectors (Alt+click on duplicate button)
+  const handleWidgetCopyWithConnectors = useCallback(async (widget) => {
+    if (!widget) return
+    const widgets = [widget]
+
+    undoRedo.snapshot(stateRef.current, 'add')
+
+    const occupied = new Set(
+      (localWidgets ?? []).map((w) => `${w.position?.x ?? 0},${w.position?.y ?? 0}`)
+    )
+    let offset = 1
+    while (occupied.has(`${(widget.position?.x ?? 0) + offset * 40},${(widget.position?.y ?? 0) + offset * 40}`)) offset++
+
+    const imageOverrides = new Map()
+    if (widget.type === 'image' && widget.props?.src) {
+      try {
+        const dupResult = await duplicateImage(widget.props.src)
+        if (dupResult.success) imageOverrides.set(widget.id, dupResult.filename)
+      } catch { /* use original src as fallback */ }
+    }
+
+    const selectedIds = new Set([widget.id])
+    const relevantConnectors = (localConnectors ?? []).filter(
+      (c) => selectedIds.has(c.start?.widgetId) || selectedIds.has(c.end?.widgetId)
+    )
+
+    const ops = []
+    for (const w of widgets) {
+      const copyProps = { ...w.props }
+      const isTerminal = w.type === 'terminal' || w.type === 'agent'
+      if (isTerminal) delete copyProps.prettyName
+      if (imageOverrides.has(w.id)) copyProps.src = imageOverrides.get(w.id)
+      ops.push({
+        op: 'create-widget',
+        ref: `clone-${w.id}`,
+        type: w.type,
+        props: copyProps,
+        position: {
+          x: (w.position?.x ?? 0) + offset * 40,
+          y: (w.position?.y ?? 0) + offset * 40,
+        },
+      })
+    }
+
+    for (const conn of relevantConnectors) {
+      const startInSelection = selectedIds.has(conn.start?.widgetId)
+      const endInSelection = selectedIds.has(conn.end?.widgetId)
+      ops.push({
+        op: 'create-connector',
+        startWidgetId: startInSelection ? `$clone-${conn.start.widgetId}` : conn.start.widgetId,
+        startAnchor: conn.start.anchor,
+        endWidgetId: endInSelection ? `$clone-${conn.end.widgetId}` : conn.end.widgetId,
+        endAnchor: conn.end.anchor,
+        connectorType: conn.connectorType || 'default',
+      })
+    }
+
+    try {
+      const response = await batchOperations(canvasId, ops)
+      if (!response.success) {
+        console.error('[canvas] Batch duplicate failed:', response.error)
+        return
+      }
+
+      const newWidgets = []
+      const newConnectors = []
+      const refMap = response.refs || {}
+
+      for (const result of response.results) {
+        if (result.op === 'create-widget' && result.widget) {
+          newWidgets.push(result.widget)
+        }
+        if (result.op === 'create-connector' && result.connectorId) {
+          const origOp = ops[result.index]
+          const resolveId = (val) => {
+            if (typeof val === 'string' && val.startsWith('$')) {
+              return refMap[val.slice(1)] ?? val
+            }
+            return val
+          }
+          newConnectors.push({
+            id: result.connectorId,
+            type: 'connector',
+            connectorType: origOp.connectorType || 'default',
+            start: { widgetId: resolveId(origOp.startWidgetId), anchor: origOp.startAnchor },
+            end: { widgetId: resolveId(origOp.endWidgetId), anchor: origOp.endAnchor },
+            meta: {},
+          })
+        }
+      }
+
+      if (newWidgets.length > 0) {
+        setLocalWidgets((prev) => [...(prev || []), ...newWidgets])
+        setSelectedWidgetIds(new Set(newWidgets.map((w) => w.id)))
+      }
+      if (newConnectors.length > 0) {
+        setLocalConnectors((prev) => [...prev, ...newConnectors])
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to duplicate with connectors:', err)
+    }
+  }, [canvasId, localWidgets, localConnectors, undoRedo])
+
+  // Duplicate all selected widgets in one undo step (Cmd+D)
+  const handleDuplicateSelected = useCallback(async () => {
+    const widgets = (localWidgets ?? []).filter((w) => selectedWidgetIds.has(w.id))
+    if (widgets.length === 0) return
+
+    // Single undo snapshot for the entire batch
+    undoRedo.snapshot(stateRef.current, 'add')
+
+    // Compute occupied positions to find free offset
+    const occupied = new Set(
+      (localWidgets ?? []).map((w) => `${w.position?.x ?? 0},${w.position?.y ?? 0}`)
+    )
+    let offset = 1
+    const anyOccupied = () => widgets.some((w) => {
+      const bx = (w.position?.x ?? 0) + offset * 40
+      const by = (w.position?.y ?? 0) + offset * 40
+      return occupied.has(`${bx},${by}`)
+    })
+    while (anyOccupied()) offset++
+
+    const newWidgets = []
+    for (const widget of widgets) {
+      const position = {
+        x: (widget.position?.x ?? 0) + offset * 40,
+        y: (widget.position?.y ?? 0) + offset * 40,
+      }
+      const isTerminal = widget.type === 'terminal' || widget.type === 'agent'
+      try {
+        const copyProps = { ...widget.props }
+        if (isTerminal) delete copyProps.prettyName
+        if (widget.type === 'image' && copyProps.src) {
+          try {
+            const dupResult = await duplicateImage(copyProps.src)
+            if (dupResult.success) copyProps.src = dupResult.filename
+          } catch { /* use original src as fallback */ }
+        }
+        const result = await addWidgetApi(canvasId, {
+          type: widget.type,
+          props: copyProps,
+          position,
+        })
+        if (result.success && result.widget) {
+          newWidgets.push(result.widget)
+        }
+      } catch (err) {
+        console.error('[canvas] Failed to duplicate widget:', err)
+      }
+    }
+
+    if (newWidgets.length > 0) {
+      setLocalWidgets((prev) => [...(prev || []), ...newWidgets])
+      setSelectedWidgetIds(new Set(newWidgets.map((w) => w.id)))
+    }
+  }, [canvasId, localWidgets, selectedWidgetIds, undoRedo])
+
+  // Duplicate selected widgets WITH connectors (Cmd+Shift+D)
+  // Uses the batch API for atomic operation — all widgets and connectors
+  // are created in a single request with $ref resolution.
+  const handleDuplicateWithConnectors = useCallback(async () => {
+    const widgets = (localWidgets ?? []).filter((w) => selectedWidgetIds.has(w.id))
+    if (widgets.length === 0) return
+
+    undoRedo.snapshot(stateRef.current, 'add')
+
+    // Compute offset — same logic as handleDuplicateSelected
+    const occupied = new Set(
+      (localWidgets ?? []).map((w) => `${w.position?.x ?? 0},${w.position?.y ?? 0}`)
+    )
+    let offset = 1
+    const anyOccupied = () => widgets.some((w) => {
+      const bx = (w.position?.x ?? 0) + offset * 40
+      const by = (w.position?.y ?? 0) + offset * 40
+      return occupied.has(`${bx},${by}`)
+    })
+    while (anyOccupied()) offset++
+
+    // Pre-process image widgets — duplicate asset files to get unique filenames
+    const imageOverrides = new Map()
+    for (const widget of widgets) {
+      if (widget.type === 'image' && widget.props?.src) {
+        try {
+          const dupResult = await duplicateImage(widget.props.src)
+          if (dupResult.success) imageOverrides.set(widget.id, dupResult.filename)
+        } catch { /* use original src as fallback */ }
+      }
+    }
+
+    // Find all connectors touching at least one selected widget
+    const selectedIds = new Set(widgets.map((w) => w.id))
+    const relevantConnectors = (localConnectors ?? []).filter(
+      (c) => selectedIds.has(c.start?.widgetId) || selectedIds.has(c.end?.widgetId)
+    )
+
+    // Build batch operations
+    const ops = []
+
+    // 1. Create-widget ops with ref names for $ref resolution
+    for (const widget of widgets) {
+      const copyProps = { ...widget.props }
+      const isTerminal = widget.type === 'terminal' || widget.type === 'agent'
+      if (isTerminal) delete copyProps.prettyName
+      if (imageOverrides.has(widget.id)) copyProps.src = imageOverrides.get(widget.id)
+
+      ops.push({
+        op: 'create-widget',
+        ref: `clone-${widget.id}`,
+        type: widget.type,
+        props: copyProps,
+        position: {
+          x: (widget.position?.x ?? 0) + offset * 40,
+          y: (widget.position?.y ?? 0) + offset * 40,
+        },
+      })
+    }
+
+    // 2. Create-connector ops — remap selected endpoints to $ref clones
+    for (const conn of relevantConnectors) {
+      const startInSelection = selectedIds.has(conn.start?.widgetId)
+      const endInSelection = selectedIds.has(conn.end?.widgetId)
+
+      ops.push({
+        op: 'create-connector',
+        startWidgetId: startInSelection ? `$clone-${conn.start.widgetId}` : conn.start.widgetId,
+        startAnchor: conn.start.anchor,
+        endWidgetId: endInSelection ? `$clone-${conn.end.widgetId}` : conn.end.widgetId,
+        endAnchor: conn.end.anchor,
+        connectorType: conn.connectorType || 'default',
+      })
+    }
+
+    try {
+      const response = await batchOperations(canvasId, ops)
+      if (!response.success) {
+        console.error('[canvas] Batch duplicate failed:', response.error)
+        return
+      }
+
+      // Extract created widgets and connectors from results
+      const newWidgets = []
+      const newConnectors = []
+      const refMap = response.refs || {}
+
+      for (const result of response.results) {
+        if (result.op === 'create-widget' && result.widget) {
+          newWidgets.push(result.widget)
+        }
+        if (result.op === 'create-connector' && result.connectorId) {
+          // Reconstruct connector object from the operation + resolved refs
+          const origOp = ops[result.index]
+          const resolveId = (val) => {
+            if (typeof val === 'string' && val.startsWith('$')) {
+              return refMap[val.slice(1)] ?? val
+            }
+            return val
+          }
+          newConnectors.push({
+            id: result.connectorId,
+            type: 'connector',
+            connectorType: origOp.connectorType || 'default',
+            start: { widgetId: resolveId(origOp.startWidgetId), anchor: origOp.startAnchor },
+            end: { widgetId: resolveId(origOp.endWidgetId), anchor: origOp.endAnchor },
+            meta: {},
+          })
+        }
+      }
+
+      if (newWidgets.length > 0) {
+        setLocalWidgets((prev) => [...(prev || []), ...newWidgets])
+        setSelectedWidgetIds(new Set(newWidgets.map((w) => w.id)))
+      }
+      if (newConnectors.length > 0) {
+        setLocalConnectors((prev) => [...prev, ...newConnectors])
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to duplicate with connectors:', err)
+    }
+  }, [canvasId, localWidgets, localConnectors, selectedWidgetIds, undoRedo])
+
+  // Select all widgets (Cmd+A)
+  const handleSelectAll = useCallback(() => {
+    const allIds = (localWidgets ?? []).map((w) => w.id)
+    if (allIds.length > 0) setSelectedWidgetIds(new Set(allIds))
+  }, [localWidgets])
+
   const showMissingGhBanner = useCallback(() => {
     setShowGhInstallBanner(true)
   }, [])
@@ -1037,8 +1437,10 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
   const debouncedSourceSave = useRef(
     debounce((canvasId, sources) => {
-      updateCanvas(canvasId, { sources }).catch((err) =>
-        console.error('[canvas] Failed to save sources:', err)
+      queueWrite(() =>
+        updateCanvas(canvasId, { sources }).catch((err) =>
+          console.error('[canvas] Failed to save sources:', err)
+        )
       )
     }, 2000)
   ).current
@@ -1055,6 +1457,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       const next = current.some((s) => s?.export === exportName)
         ? current.map((s) => (s?.export === exportName ? { ...s, ...snapped } : s))
         : [...current, { export: exportName, ...snapped }]
+      dirtyRef.current = true
       debouncedSourceSave(canvasId, next)
       return next
     })
@@ -1114,7 +1517,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         queueWrite(() =>
           updateCanvas(canvasId, { widgets: next })
             .catch((err) => console.error('[canvas] Failed to save multi-move:', err))
-            .finally(() => { dirtyRef.current = false })
         )
         return next
       })
@@ -1147,7 +1549,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           queueWrite(() =>
             updateCanvas(canvasId, { sources: next })
               .catch((err) => console.error('[canvas] Failed to save multi-move sources:', err))
-              .finally(() => { dirtyRef.current = false })
           )
         }
         return changed ? next : current
@@ -1167,7 +1568,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         queueWrite(() =>
           updateCanvas(canvasId, { sources: next })
             .catch((err) => console.error('[canvas] Failed to save source position:', err))
-            .finally(() => { dirtyRef.current = false })
         )
         return next
       })
@@ -1185,7 +1585,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       queueWrite(() =>
         updateCanvas(canvasId, { widgets: next })
           .catch((err) => console.error('[canvas] Failed to save widget position:', err))
-          .finally(() => { dirtyRef.current = false })
       )
       return next
     })
@@ -1210,20 +1609,21 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     if (!el || loading) return
     const saved = pendingScrollRestore.current
     if (saved) {
-      console.log('[viewport] restoring saved viewport — zoom:', saved.zoom, 'scroll:', saved.scrollLeft, saved.scrollTop)
+      if (getFlag('dev-logs')) console.log('[viewport] restoring saved viewport — zoom:', saved.zoom, 'scroll:', saved.scrollLeft, saved.scrollTop)
       // Fresh saved viewport — restore exactly
       if (saved.scrollLeft != null) el.scrollLeft = saved.scrollLeft
       if (saved.scrollTop != null) el.scrollTop = saved.scrollTop
       pendingScrollRestore.current = null
     } else {
-      console.log('[viewport] no saved viewport — fitting to objects')
+      if (getFlag('dev-logs')) console.log('[viewport] no saved viewport — fitting to objects')
       // No saved state or stale — zoom-to-fit all objects
       const bounds = computeCanvasBounds(localWidgets, componentEntries)
       if (bounds && el.clientWidth > 0 && el.clientHeight > 0) {
         const boxW = bounds.maxX - bounds.minX + FIT_PADDING * 2
         const boxH = bounds.maxY - bounds.minY + FIT_PADDING * 2
         const fitScale = Math.min(el.clientWidth / boxW, el.clientHeight / boxH)
-        const fitZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(fitScale * 100)))
+        const { ZOOM_MIN: zMin, ZOOM_MAX: zMax } = zoomLimits()
+        const fitZoom = Math.min(zMax, Math.max(zMin, Math.round(fitScale * 100)))
         const newScale = fitZoom / 100
         zoomRef.current = fitZoom
         // Imperative DOM update for initial zoom-to-fit — same path as applyZoom
@@ -1300,7 +1700,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   useEffect(() => {
     if (viewportInitName.current !== canvasId) return
     const el = scrollRef.current
-    console.log('[viewport] saving — zoom:', zoom, 'scroll:', el?.scrollLeft, el?.scrollTop)
+    if (getFlag('dev-logs')) console.log('[viewport] saving — zoom:', zoom, 'scroll:', el?.scrollLeft, el?.scrollTop)
     // Read current scroll so the zoom entry doesn't zero-out position,
     // but the authoritative scroll save comes from the scroll handler.
     saveViewportState(canvasId, {
@@ -1345,6 +1745,56 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
   }, [canvasId, loading])
 
+  // Gather current viewport data from refs (safe for callbacks/timeouts)
+  const getViewportData = useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return null
+    const scale = zoomRef.current / 100
+    const scrollLeft = el.scrollLeft
+    const scrollTop = el.scrollTop
+    const cw = el.clientWidth
+    const ch = el.clientHeight
+    return {
+      centerX: Math.round((scrollLeft + cw / 2) / scale),
+      centerY: Math.round((scrollTop + ch / 2) / scale),
+      zoom: zoomRef.current,
+      topLeftX: Math.round(scrollLeft / scale),
+      topLeftY: Math.round(scrollTop / scale),
+      width: Math.round(cw / scale),
+      height: Math.round(ch / scale),
+    }
+  }, [])
+
+  // Debounced viewport-changed HMR event — sends position/zoom to Vite server
+  // so the selected-widgets bridge can write it to disk for agents.
+  useEffect(() => {
+    if (!import.meta.hot) return
+    const el = scrollRef.current
+    if (!el) return
+
+    const tabId = selectionTabIdRef.current
+
+    function sendViewport() {
+      const viewport = getViewportData()
+      if (viewport) {
+        import.meta.hot.send('storyboard:viewport-changed', { tabId, canvasId, viewport })
+      }
+    }
+
+    const debouncedSend = debounce(sendViewport, 500)
+
+    function handleScroll() { debouncedSend() }
+    el.addEventListener('scroll', handleScroll, { passive: true })
+
+    // Also send on zoom commits (zoom state changes trigger this effect)
+    sendViewport()
+
+    return () => {
+      debouncedSend.cancel()
+      el.removeEventListener('scroll', handleScroll)
+    }
+  }, [canvasId, zoom, loading, getViewportData])
+
   /**
    * Zoom to a new level, anchoring on an optional client-space point.
    * When a cursor position is provided (e.g. from a wheel event), the
@@ -1359,6 +1809,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   function applyZoom(newZoom, clientX, clientY) {
     const el = scrollRef.current
     const zoomEl = zoomElRef.current
+    const { ZOOM_MIN, ZOOM_MAX } = zoomLimits()
     const clampedZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, newZoom))
 
     if (!el || !zoomEl) {
@@ -1405,7 +1856,11 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     if (!zoomEventTimer.current) {
       zoomEventTimer.current = setTimeout(() => {
         zoomEventTimer.current = null
-        window[CANVAS_BRIDGE_STATE_KEY] = { active: true, canvasId, zoom: zoomRef.current }
+        const bridge = window[CANVAS_BRIDGE_STATE_KEY] || {}
+        bridge.active = true
+        bridge.canvasId = canvasId
+        bridge.zoom = zoomRef.current
+        window[CANVAS_BRIDGE_STATE_KEY] = bridge
         document.dispatchEvent(new CustomEvent('storyboard:canvas:zoom-changed', {
           detail: { zoom: zoomRef.current }
         }))
@@ -1415,7 +1870,11 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
   // Signal canvas mount/unmount to CoreUIBar
   useEffect(() => {
-    window[CANVAS_BRIDGE_STATE_KEY] = { active: true, canvasId, zoom: zoomRef.current }
+    const bridge = window[CANVAS_BRIDGE_STATE_KEY] || {}
+    bridge.active = true
+    bridge.canvasId = canvasId
+    bridge.zoom = zoomRef.current
+    window[CANVAS_BRIDGE_STATE_KEY] = bridge
     document.dispatchEvent(new CustomEvent('storyboard:canvas:mounted', {
       detail: { canvasId, zoom: zoomRef.current }
     }))
@@ -1435,14 +1894,15 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   }, [canvasId])
 
   // Tell the Vite dev server to suppress full-reloads while this canvas is active.
-  // The ?canvas-hmr URL param opts out of the guard for canvas UI development.
+  // Controlled by the "canvas-auto-reload" feature flag (default: false = guard ON).
+  // When the flag is true, the guard is skipped so canvas pages receive HMR updates.
   // Sends a heartbeat every 3s so the guard auto-expires if the tab closes.
   useEffect(() => {
     if (!import.meta.hot) return
-    const hmrEnabled = new URLSearchParams(window.location.search).has('canvas-hmr')
-    if (hmrEnabled) return
+    const autoReload = getFlag('canvas-auto-reload')
+    if (autoReload) return
 
-    const msg = { active: true, hmrEnabled: false }
+    const msg = { active: true }
     import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
     const interval = setInterval(() => {
       import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
@@ -1450,7 +1910,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
     return () => {
       clearInterval(interval)
-      import.meta.hot.send('storyboard:canvas-hmr-guard', { active: false, hmrEnabled: true })
+      import.meta.hot.send('storyboard:canvas-hmr-guard', { active: false })
     }
   }, [canvasId])
 
@@ -1484,7 +1944,8 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
     function sendFocus() {
       const { widgetIds, widgets } = getSelectedWidgetData()
-      import.meta.hot.send('storyboard:canvas-focused', { tabId, canvasId, widgetIds, widgets })
+      const viewport = getViewportData()
+      import.meta.hot.send('storyboard:canvas-focused', { tabId, canvasId, widgetIds, widgets, viewport })
     }
 
     sendFocus()
@@ -1511,7 +1972,8 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     const tabId = selectionTabIdRef.current
     const timer = setTimeout(() => {
       const { widgetIds, widgets } = getSelectedWidgetData()
-      import.meta.hot.send('storyboard:selection-changed', { tabId, canvasId, widgetIds: widgetIds, widgets })
+      const viewport = getViewportData()
+      import.meta.hot.send('storyboard:selection-changed', { tabId, canvasId, widgetIds: widgetIds, widgets, viewport })
     }, 500)
 
     return () => clearTimeout(timer)
@@ -1520,6 +1982,12 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   // Add a widget by type — used by CanvasControls and CoreUIBar event
   const addWidget = useCallback(async (type, extraProps = {}) => {
     const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
+    // For terminal/agent, apply config-based dimension defaults over schema defaults
+    if (type === 'terminal' || type === 'agent') {
+      const dims = getTerminalDimensions(extraProps.agentId, { width: defaultProps.width ?? 800, height: defaultProps.height ?? 450 })
+      defaultProps.width = dims.width
+      defaultProps.height = dims.height
+    }
     const mergedProps = { ...defaultProps, ...extraProps }
     const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
     const pos = centerPositionForWidget(center, type, mergedProps)
@@ -1560,7 +2028,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
   }, [canvasId, undoRedo])
 
-  // Listen for CoreUIBar add-widget events
+  // Listen for CoreUIBar add-widget and update-widget events
   useEffect(() => {
     function handleAddWidget(e) {
       addWidget(e.detail.type, e.detail.props)
@@ -1568,13 +2036,19 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     function handleAddStoryWidget(e) {
       addStoryWidget(e.detail.storyId)
     }
+    function handleUpdateWidget(e) {
+      const { widgetId, updates } = e.detail || {}
+      if (widgetId && updates) handleWidgetUpdate(widgetId, updates)
+    }
     document.addEventListener('storyboard:canvas:add-widget', handleAddWidget)
     document.addEventListener('storyboard:canvas:add-story-widget', handleAddStoryWidget)
+    document.addEventListener('storyboard:canvas:update-widget', handleUpdateWidget)
     return () => {
       document.removeEventListener('storyboard:canvas:add-widget', handleAddWidget)
       document.removeEventListener('storyboard:canvas:add-story-widget', handleAddStoryWidget)
+      document.removeEventListener('storyboard:canvas:update-widget', handleUpdateWidget)
     }
-  }, [addWidget, addStoryWidget])
+  }, [addWidget, addStoryWidget, handleWidgetUpdate])
 
   // Listen for zoom changes from CoreUIBar
   useEffect(() => {
@@ -1654,7 +2128,8 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
       // Find the zoom level that fits the bounding box in the viewport
       const fitScale = Math.min(viewW / boxW, viewH / boxH)
-      const fitZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(fitScale * 100)))
+      const { ZOOM_MIN: zMin, ZOOM_MAX: zMax } = zoomLimits()
+      const fitZoom = Math.min(zMax, Math.max(zMin, Math.round(fitScale * 100)))
       const newScale = fitZoom / 100
 
       // Imperative DOM update — same path as applyZoom
@@ -1697,14 +2172,20 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
   // Broadcast zoom level to CoreUIBar whenever it changes
   useEffect(() => {
-    window[CANVAS_BRIDGE_STATE_KEY] = { active: true, canvasId, zoom }
+    const bridge = window[CANVAS_BRIDGE_STATE_KEY] || {}
+    bridge.active = true
+    bridge.canvasId = canvasId
+    bridge.zoom = zoom
+    window[CANVAS_BRIDGE_STATE_KEY] = bridge
     document.dispatchEvent(new CustomEvent('storyboard:canvas:zoom-changed', {
       detail: { zoom }
     }))
   }, [canvasId, zoom])
 
-  // Keep bridge in sync with widgets/connectors for expand features
-  useEffect(() => {
+  // Keep bridge in sync with widgets/connectors for expand features.
+  // Child widgets now use props directly for split-screen gating, but
+  // FigmaEmbed/PrototypeEmbed/etc. still read this bridge at expand time.
+  useMemo(() => {
     const bridge = window[CANVAS_BRIDGE_STATE_KEY] || {}
     bridge.widgets = localWidgets
     bridge.connectors = localConnectors
@@ -1748,6 +2229,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           // Multi-delete — snapshot once, remove all, persist via updateCanvas
           undoRedo.snapshot(stateRef.current, 'multi-remove')
           debouncedSave.cancel()
+          dirtyRef.current = true
           setLocalWidgets((prev) => {
             if (!prev) return prev
             const next = prev.filter(w => !selectedWidgetIds.has(w.id))
@@ -1934,6 +2416,13 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
             const relY = (w.position?.y ?? 0) - minY
             const pasteProps = { ...w.props }
             if (w.type === 'terminal' || w.type === 'agent') delete pasteProps.prettyName
+            // Image widgets: duplicate the asset so the paste owns its own copy
+            if (w.type === 'image' && pasteProps.src) {
+              try {
+                const dupResult = await duplicateImage(pasteProps.src)
+                if (dupResult.success) pasteProps.src = dupResult.filename
+              } catch { /* use original src as fallback */ }
+            }
             const result = await addWidgetApi(canvasId, {
               type: w.type,
               props: pasteProps,
@@ -1956,11 +2445,34 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       }
 
       e.preventDefault()
+      await pasteTextAsWidget(text, pasteCtx)
+    }
+
+    // Shared helper: resolve pasted text into a widget and add it to the canvas.
+    // Used by both native paste and the programmatic paste-url event.
+    async function pasteTextAsWidget(text, pasteCtx) {
       const resolved = resolvePaste(text, pasteCtx, getPasteRules())
       if (!resolved) return
-      const { type } = resolved
+      let { type } = resolved
       let props = resolved.props
 
+      // Component/story URLs → story widget (instead of prototype embed)
+      if (type === 'prototype' && props?.src) {
+        const srcPath = props.src.replace(/[?#].*$/, '').replace(/\/+$/, '')
+        const storyId = storyRouteIndex.get(srcPath)
+        if (storyId) {
+          type = 'story'
+          const parsed = pasteCtx.parseUrl(text)
+          const searchParams = new URLSearchParams(parsed?.search || '')
+          props = {
+            storyId,
+            exportName: searchParams.get('export') || '',
+            width: 600,
+            height: 400,
+          }
+        }
+      }
+
       if (type === 'link-preview' && isGitHubEmbedUrl(props?.url || text)) {
         const githubUpdates = await buildGitHubPreviewUpdates(props?.url || text)
         if (githubUpdates) props = { ...props, ...githubUpdates }
@@ -1984,8 +2496,19 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       }
     }
 
+    // Listen for programmatic paste-url events from the command palette
+    function handlePasteUrl(e) {
+      const text = e.detail?.url?.trim()
+      if (!text) return
+      pasteTextAsWidget(text, pasteCtx)
+    }
+
     document.addEventListener('paste', handlePaste)
-    return () => document.removeEventListener('paste', handlePaste)
+    document.addEventListener('storyboard:canvas:paste-url', handlePasteUrl)
+    return () => {
+      document.removeEventListener('paste', handlePaste)
+      document.removeEventListener('storyboard:canvas:paste-url', handlePasteUrl)
+    }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [canvasId, undoRedo, localWidgets])
 
@@ -2066,7 +2589,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     queueWrite(() =>
       updateCanvas(canvasId, { widgets: previous.widgets, sources: previous.sources, connectors: previous.connectors })
         .catch((err) => console.error('[canvas] Failed to persist undo:', err))
-        .finally(() => { dirtyRef.current = false })
     )
   }, [canvasId, debouncedSave, debouncedSourceSave, undoRedo])
 
@@ -2082,16 +2604,17 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     queueWrite(() =>
       updateCanvas(canvasId, { widgets: next.widgets, sources: next.sources, connectors: next.connectors })
         .catch((err) => console.error('[canvas] Failed to persist redo:', err))
-        .finally(() => { dirtyRef.current = false })
     )
   }, [canvasId, debouncedSave, debouncedSourceSave, undoRedo])
 
-  // Keyboard shortcuts — dev-only (Cmd+Z / Cmd+Shift+Z)
+  // Keyboard shortcuts — dev-only (Cmd+Z / Cmd+Shift+Z / Cmd+D / Cmd+A)
   useEffect(() => {
     if (!import.meta.hot) return
     function handleKeyDown(e) {
       const tag = e.target.tagName
       if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable) return
+      // Don't intercept shortcuts when the command palette is open
+      if (e.target.closest?.('[cmdk-root]')) return
       const mod = e.metaKey || e.ctrlKey
       if (mod && e.key === 'z' && !e.shiftKey) {
         e.preventDefault()
@@ -2101,10 +2624,21 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         e.preventDefault()
         handleRedo()
       }
+      if (mod && e.key.toLowerCase() === 'd' && e.shiftKey) {
+        e.preventDefault()
+        handleDuplicateWithConnectors()
+      } else if (mod && e.key.toLowerCase() === 'd' && !e.shiftKey) {
+        e.preventDefault()
+        handleDuplicateSelected()
+      }
+      if (mod && e.key === 'a') {
+        e.preventDefault()
+        handleSelectAll()
+      }
     }
     document.addEventListener('keydown', handleKeyDown)
     return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [handleUndo, handleRedo])
+  }, [handleUndo, handleRedo, handleDuplicateSelected, handleDuplicateWithConnectors, handleSelectAll])
 
   // Listen for undo/redo from CoreUIBar (Svelte toolbar)
   useEffect(() => {
@@ -2274,6 +2808,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     zoomRef: zoomRef,
     setSelectedWidgetIds,
     widgets: localWidgets,
+    connectors: localConnectors,
     componentEntries,
     fallbackSizes: WIDGET_FALLBACK_SIZES,
     spaceHeld,
@@ -2331,6 +2866,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         id={`jsx-${exportName}`}
         data-tc-x={sourcePosition.x}
         data-tc-y={sourcePosition.y}
+        data-widget-raised={selectedWidgetIds.has(`jsx-${exportName}`) || undefined}
         {...(isLocalDev ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
         {...canvasPrimerAttrs}
         style={canvasThemeVars}
@@ -2367,13 +2903,12 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   }
 
   // 2. JSON-defined mutable widgets (selectable, wrapped in WidgetChrome)
-  // Sort so selected widgets render last (visually on top via DOM order)
-  const sortedWidgets = (localWidgets ?? []).slice().sort((a, b) => {
-    const aSelected = selectedWidgetIds.has(a.id) ? 1 : 0
-    const bSelected = selectedWidgetIds.has(b.id) ? 1 : 0
-    return aSelected - bSelected
-  })
-  for (const widget of sortedWidgets) {
+  // Stable DOM order — visual stacking is controlled by z-index on the
+  // wrapper div (data-widget-raised), NOT by re-sorting the array.
+  // Re-sorting caused iframe widgets (stories, embeds) to remount and
+  // reload every time selection changed, because moving an iframe node
+  // in the DOM destroys its browsing context.
+  for (const widget of (localWidgets ?? [])) {
     // In production, render terminal widgets as read-only instead of hiding them
     const effectiveWidget = (!isLocalDev && (widget.type === 'terminal' || widget.type === 'agent'))
       ? { ...widget, type: 'terminal-read' }
@@ -2384,6 +2919,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         id={effectiveWidget.id}
         data-tc-x={effectiveWidget?.position?.x ?? 0}
         data-tc-y={effectiveWidget?.position?.y ?? 0}
+        data-widget-raised={selectedWidgetIds.has(widget.id) || undefined}
         {...(isLocalDev ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
         {...canvasPrimerAttrs}
         style={canvasThemeVars}
@@ -2398,11 +2934,13 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           widget={effectiveWidget}
           selected={selectedWidgetIds.has(widget.id)}
           multiSelected={isMultiSelected && selectedWidgetIds.has(widget.id)}
-          connectorCount={localConnectors.filter((c) => c.start?.widgetId === widget.id || c.end?.widgetId === widget.id).length}
+          connectorCount={localConnectors.filter((c) => c.start?.widgetId === widget.id || c.end?.widgetId === widget.id)}
+          allWidgets={localWidgets}
           onSelect={(shiftKey) => handleWidgetSelect(widget.id, shiftKey)}
           onDeselect={handleDeselectAll}
           onUpdate={isLocalDev ? handleWidgetUpdate : undefined}
           onCopy={isLocalDev ? handleWidgetCopy : undefined}
+          onCopyWithConnectors={isLocalDev ? handleWidgetCopyWithConnectors : undefined}
           onRemove={isLocalDev ? handleWidgetRemoveAndDeselect : undefined}
           onRefreshGitHub={isLocalDev ? handleRefreshGitHubWidget : undefined}
           canRefreshGitHub={isLocalDev}
@@ -2460,6 +2998,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           <ConnectorLayer
             connectors={filteredConnectors}
             widgets={localWidgets ?? []}
+            selectedWidgetIds={selectedWidgetIds}
             onRemove={isLocalDev ? handleConnectorRemove : undefined}
             onEndpointDrag={undefined}
             dragPreview={connectorDrag}