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

package/src/canvas/CanvasPage.jsx

@@ -6,11 +6,12 @@ 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, getAnchorState, canAcceptConnection } from './widgets/widgetConfig.js'
+import { getFeatures, isResizable, isExpandable, getAnchorState, canAcceptConnection } from './widgets/widgetConfig.js'
 import { createPasteContext, resolvePaste } from './widgets/pasteRules.js'
 import { getPasteRules } from '@dfosco/storyboard-core'
 import { registerSmoothCorners } from '@dfosco/storyboard-core/smooth-corners'
 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'
@@ -303,6 +304,7 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
   widget,
   selected,
   multiSelected,
+  connectorCount,
   onSelect,
   onDeselect,
   onUpdate,
@@ -319,7 +321,7 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
   // Dynamically adjust features based on widget state
   const features = useMemo(() => {
     const isGitHub = !!widget.props?.github
-    return rawFeatures.map((f) => {
+    const adjusted = rawFeatures.map((f) => {
       // Toggle collapse label and hide when content is short (no github = no collapse)
       if (f.action === 'toggle-collapse') {
         if (widget.type === 'link-preview' && !isGitHub) return null
@@ -333,7 +335,28 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
       if (f.action === 'refresh-github' && !isGitHub) return null
       return f
     }).filter(Boolean)
-  }, [rawFeatures, widget.props?.github, widget.props?.collapsed])
+
+    // Add dynamic "Split Screen" action when a connected split target exists
+    if (isExpandable(widget.type)) {
+      const hasConnected = Boolean(findConnectedSplitTarget(widget.id))
+      if (hasConnected) {
+        // Insert before the first menu-only feature
+        const insertIdx = adjusted.findIndex((f) => f.menu)
+        const splitFeature = {
+          id: 'split-screen',
+          type: 'action',
+          action: 'split-screen',
+          label: 'Split Screen',
+          icon: 'columns',
+          prod: true,
+        }
+        if (insertIdx >= 0) adjusted.splice(insertIdx, 0, splitFeature)
+        else adjusted.push(splitFeature)
+      }
+    }
+
+    return adjusted
+  }, [rawFeatures, widget.props?.github, widget.props?.collapsed, widget.type, widget.id, connectorCount])
 
   const handleAction = useCallback((actionId) => {
     if (actionId === 'delete') {
@@ -398,6 +421,7 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
     prev.widget === next.widget &&
     prev.selected === next.selected &&
     prev.multiSelected === next.multiSelected &&
+    prev.connectorCount === next.connectorCount &&
     prev.readOnly === next.readOnly &&
     prev.onSelect === next.onSelect &&
     prev.onDeselect === next.onDeselect &&
@@ -571,6 +595,10 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     stateRef.current = { widgets: localWidgets, sources: localSources, connectors: localConnectors }
   }, [localWidgets, localSources, localConnectors])
 
+  // Dirty flag — true while optimistic edits haven't been persisted yet.
+  // Prevents HMR echoes from overwriting in-flight local state.
+  const dirtyRef = useRef(false)
+
   // Serialized write queue — ensures JSONL events land in the right order
   const writeQueueRef = useRef(Promise.resolve())
   function queueWrite(fn) {
@@ -665,9 +693,16 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     const isCanvasSwitch = trackedCanvas && canvas && trackedCanvas._route !== canvas._route
     console.log('[viewport] canvas changed —', isCanvasSwitch ? 'new canvas, resetting viewport' : 'same canvas, updating widgets only')
     setTrackedCanvas(canvas)
-    setLocalWidgets(canvas?.widgets ?? null)
-    setLocalConnectors(canvas?.connectors ?? [])
-    setLocalSources(canvas?.sources ?? [])
+
+    // Skip replacing local state with server data when optimistic edits are
+    // pending — the local state is more recent. The next save will persist it
+    // and the subsequent server push (after dirty clears) will reconcile.
+    if (!dirtyRef.current || isCanvasSwitch) {
+      setLocalWidgets(canvas?.widgets ?? null)
+      setLocalConnectors(canvas?.connectors ?? [])
+      setLocalSources(canvas?.sources ?? [])
+    }
+
     setSnapEnabled(canvas?.snapToGrid ?? false)
     setSnapGridSize(canvas?.gridSize || 40)
     undoRedo.reset()
@@ -683,11 +718,14 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
   }
 
-  // Debounced save to server
+  // Debounced save to server — routed through queueWrite to serialize
+  // with deletes and other writes, preventing stale data from overwriting.
   const debouncedSave = useRef(
     debounce((canvasId, widgets) => {
-      updateCanvas(canvasId, { widgets }).catch((err) =>
-        console.error('[canvas] Failed to save:', err)
+      queueWrite(() =>
+        updateCanvas(canvasId, { widgets })
+          .catch((err) => console.error('[canvas] Failed to save:', err))
+          .finally(() => { dirtyRef.current = false })
       )
     }, 2000)
   ).current
@@ -705,12 +743,17 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       const next = prev.map((w) =>
         w.id === widgetId ? { ...w, props: { ...w.props, ...snapped } } : w
       )
+      dirtyRef.current = true
       debouncedSave(canvasId, next)
       return next
     })
   }, [canvasId, debouncedSave, undoRedo, snapEnabled, snapGridSize])
 
   const handleWidgetRemove = useCallback((widgetId) => {
+    // Cancel any pending debounced save — it may contain stale data
+    // that includes the widget we're about to delete
+    debouncedSave.cancel()
+
     undoRedo.snapshot(stateRef.current, 'remove', widgetId)
     setLocalWidgets((prev) => prev ? prev.filter((w) => w.id !== widgetId) : prev)
     // Cascade: remove connectors referencing this widget
@@ -726,12 +769,13 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       }
       return prev.filter((c) => c.start.widgetId !== widgetId && c.end.widgetId !== widgetId)
     })
+    dirtyRef.current = true
     queueWrite(() =>
-      removeWidgetApi(canvasId, widgetId).catch((err) =>
-        console.error('[canvas] Failed to remove widget:', err)
-      )
+      removeWidgetApi(canvasId, widgetId)
+        .catch((err) => console.error('[canvas] Failed to remove widget:', err))
+        .finally(() => { dirtyRef.current = false })
     )
-  }, [canvasId, undoRedo])
+  }, [canvasId, undoRedo, debouncedSave])
 
   const handleConnectorAdd = useCallback(async ({ startWidgetId, startAnchor, endWidgetId, endAnchor }) => {
     try {
@@ -802,21 +846,52 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       y: (scrollEl.scrollTop + clientY - rect.top) / scale,
     })
 
-    // Find nearest anchor on any other widget within snap distance
-    const SNAP_DIST = 40
+    // Find nearest anchor on any other widget within a rectangular snap zone.
+    // Each anchor has a 30px-wide strip (15px each side) extending from the widget edge.
+    const SNAP_EXTEND = 15
+    const SNAP_DEPTH = 40
+    const SNAP_CROSS = 20 // perpendicular expansion so you can approach from any direction
     const sourceType = startWidget.type
     const findNearestAnchor = (canvasPt) => {
       const currentWidgets = stateRef.current.widgets ?? []
       let best = null
-      let bestDist = SNAP_DIST
+      let bestDist = Infinity
       for (const w of currentWidgets) {
         if (w.id === widgetId) continue
-        // Check if this widget type accepts connections from the source type
         if (!canAcceptConnection(w.type, sourceType)) continue
+
+        let ww, wh
+        const el = document.getElementById(w.id)
+        if (el) {
+          const inner = el.querySelector('[data-widget-id]') || el.firstElementChild
+          if (inner) { ww = inner.offsetWidth; wh = inner.offsetHeight }
+        }
+        if (!ww) ww = w.props?.width ?? w.bounds?.width ?? 270
+        if (!wh) wh = w.props?.height ?? w.bounds?.height ?? 170
+        const wx = w.position?.x ?? 0
+        const wy = w.position?.y ?? 0
+
         for (const anch of ['top', 'bottom', 'left', 'right']) {
-          // Skip unavailable or disabled anchors
           const anchorState = getAnchorState(w.type, anch)
           if (anchorState !== 'available') continue
+
+          // Build a rectangular hit zone for this anchor
+          let inZone = false
+          if (anch === 'top') {
+            inZone = canvasPt.x >= wx - SNAP_CROSS && canvasPt.x <= wx + ww + SNAP_CROSS &&
+                     canvasPt.y >= wy - SNAP_DEPTH && canvasPt.y <= wy + SNAP_EXTEND
+          } else if (anch === 'bottom') {
+            inZone = canvasPt.x >= wx - SNAP_CROSS && canvasPt.x <= wx + ww + SNAP_CROSS &&
+                     canvasPt.y >= wy + wh - SNAP_EXTEND && canvasPt.y <= wy + wh + SNAP_DEPTH
+          } else if (anch === 'left') {
+            inZone = canvasPt.x >= wx - SNAP_DEPTH && canvasPt.x <= wx + SNAP_EXTEND &&
+                     canvasPt.y >= wy - SNAP_CROSS && canvasPt.y <= wy + wh + SNAP_CROSS
+          } else if (anch === 'right') {
+            inZone = canvasPt.x >= wx + ww - SNAP_EXTEND && canvasPt.x <= wx + ww + SNAP_DEPTH &&
+                     canvasPt.y >= wy - SNAP_CROSS && canvasPt.y <= wy + wh + SNAP_CROSS
+          }
+          if (!inZone) continue
+
           const pt = computeAnchorPt(w, anch)
           const dist = Math.hypot(pt.x - canvasPt.x, pt.y - canvasPt.y)
           if (dist < bestDist) {
@@ -872,119 +947,9 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     document.addEventListener('pointerup', handlePointerUp)
   }, [handleConnectorAdd])
 
-  // Drag an existing connector endpoint to reconnect or remove
-  const handleEndpointDrag = useCallback((connector, endpoint, e) => {
-    e.stopPropagation()
-    e.preventDefault()
-    const scrollEl = scrollRef.current
-    if (!scrollEl) return
-    const scale = zoomRef.current / 100
-    const rect = scrollEl.getBoundingClientRect()
-
-    // The fixed end stays put; the dragged end follows cursor
-    const fixedEnd = endpoint === 'start' ? 'end' : 'start'
-    const fixedSide = connector[fixedEnd]
-    const fixedWidget = (stateRef.current.widgets ?? []).find((w) => w.id === fixedSide.widgetId)
-    if (!fixedWidget) return
-
-    const computeAnchorPtLocal = (widget, anch) => {
-      let ww, wh
-      const el = document.getElementById(widget.id)
-      if (el) {
-        const inner = el.querySelector('[data-widget-id]') || el.firstElementChild
-        if (inner) { ww = inner.offsetWidth; wh = inner.offsetHeight }
-      }
-      if (!ww) ww = widget.props?.width ?? widget.bounds?.width ?? 270
-      if (!wh) wh = widget.props?.height ?? widget.bounds?.height ?? 170
-      const px = widget.position?.x ?? 0
-      const py = widget.position?.y ?? 0
-      switch (anch) {
-        case 'top':    return { x: px + ww / 2, y: py }
-        case 'bottom': return { x: px + ww / 2, y: py + wh }
-        case 'left':   return { x: px, y: py + wh / 2 }
-        case 'right':  return { x: px + ww, y: py + wh / 2 }
-        default:       return { x: px + ww / 2, y: py + wh / 2 }
-      }
-    }
-
-    const fixedPt = computeAnchorPtLocal(fixedWidget, fixedSide.anchor)
-    const fixedWidgetId = fixedSide.widgetId
-
-    const toCanvasPoint = (clientX, clientY) => ({
-      x: (scrollEl.scrollLeft + clientX - rect.left) / scale,
-      y: (scrollEl.scrollTop + clientY - rect.top) / scale,
-    })
-
-    const SNAP_DIST = 40
-    const sourceType = fixedWidget.type
-    const findNearestAnchorLocal = (canvasPt) => {
-      const currentWidgets = stateRef.current.widgets ?? []
-      let best = null
-      let bestDist = SNAP_DIST
-      for (const w of currentWidgets) {
-        if (w.id === fixedWidgetId) continue
-        if (!canAcceptConnection(w.type, sourceType)) continue
-        for (const anch of ['top', 'bottom', 'left', 'right']) {
-          const anchorState = getAnchorState(w.type, anch)
-          if (anchorState !== 'available') continue
-          const pt = computeAnchorPtLocal(w, anch)
-          const dist = Math.hypot(pt.x - canvasPt.x, pt.y - canvasPt.y)
-          if (dist < bestDist) {
-            bestDist = dist
-            best = { widgetId: w.id, anchor: anch, pt }
-          }
-        }
-      }
-      return best
-    }
-
-    const cursorPt = toCanvasPoint(e.clientX, e.clientY)
-    const snap = findNearestAnchorLocal(cursorPt)
-    setConnectorDrag({
-      startWidgetId: fixedWidgetId,
-      startAnchor: fixedSide.anchor,
-      startPt: fixedPt,
-      endPt: snap ? snap.pt : cursorPt,
-      endAnchor: snap ? snap.anchor : fixedSide.anchor,
-      snapTarget: snap,
-    })
-
-    const handlePointerMove = (moveE) => {
-      const pt = toCanvasPoint(moveE.clientX, moveE.clientY)
-      const nearSnap = findNearestAnchorLocal(pt)
-      setConnectorDrag((prev) => prev ? {
-        ...prev,
-        endPt: nearSnap ? nearSnap.pt : pt,
-        endAnchor: nearSnap ? nearSnap.anchor : prev.startAnchor,
-        snapTarget: nearSnap,
-      } : null)
-    }
-
-    const handlePointerUp = (upE) => {
-      document.removeEventListener('pointermove', handlePointerMove)
-      document.removeEventListener('pointerup', handlePointerUp)
-
-      const pt = toCanvasPoint(upE.clientX, upE.clientY)
-      const nearSnap = findNearestAnchorLocal(pt)
-
-      // Always remove the old connector
-      handleConnectorRemove(connector.id)
-
-      // If snapped to a new anchor, create a new connector
-      if (nearSnap) {
-        handleConnectorAdd({
-          startWidgetId: fixedWidgetId,
-          startAnchor: fixedSide.anchor,
-          endWidgetId: nearSnap.widgetId,
-          endAnchor: nearSnap.anchor,
-        })
-      }
-      setConnectorDrag(null)
-    }
-
-    document.addEventListener('pointermove', handlePointerMove)
-    document.addEventListener('pointerup', handlePointerUp)
-  }, [handleConnectorAdd, handleConnectorRemove])
+  // Endpoint drag removed — dragging from a filled anchor now always
+  // creates a new connection via handleConnectorDragStart instead of
+  // repositioning the existing one.
 
   const handleWidgetCopy = useCallback(async (widget) => {
     // Find the next free offset — check how many copies already exist at +n*40
@@ -999,10 +964,14 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
     const position = { x: baseX + n * 40, y: baseY + n * 40 }
     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
+
       undoRedo.snapshot(stateRef.current, 'add')
       const result = await addWidgetApi(canvasId, {
         type: widget.type,
-        props: { ...widget.props },
+        props: copyProps,
         position,
       })
       if (result.success && result.widget) {
@@ -1141,10 +1110,11 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           }
           return w
         })
+        dirtyRef.current = true
         queueWrite(() =>
-          updateCanvas(canvasId, { widgets: next }).catch((err) =>
-            console.error('[canvas] Failed to save multi-move:', err)
-          )
+          updateCanvas(canvasId, { widgets: next })
+            .catch((err) => console.error('[canvas] Failed to save multi-move:', err))
+            .finally(() => { dirtyRef.current = false })
         )
         return next
       })
@@ -1173,10 +1143,11 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           return s
         })
         if (changed) {
+          dirtyRef.current = true
           queueWrite(() =>
-            updateCanvas(canvasId, { sources: next }).catch((err) =>
-              console.error('[canvas] Failed to save multi-move sources:', err)
-            )
+            updateCanvas(canvasId, { sources: next })
+              .catch((err) => console.error('[canvas] Failed to save multi-move sources:', err))
+              .finally(() => { dirtyRef.current = false })
           )
         }
         return changed ? next : current
@@ -1192,10 +1163,11 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         const next = current.some((s) => s?.export === sourceExport)
           ? current.map((s) => (s?.export === sourceExport ? { ...s, position: rounded } : s))
           : [...current, { export: sourceExport, position: rounded }]
+        dirtyRef.current = true
         queueWrite(() =>
-          updateCanvas(canvasId, { sources: next }).catch((err) =>
-            console.error('[canvas] Failed to save source position:', err)
-          )
+          updateCanvas(canvasId, { sources: next })
+            .catch((err) => console.error('[canvas] Failed to save source position:', err))
+            .finally(() => { dirtyRef.current = false })
         )
         return next
       })
@@ -1203,15 +1175,17 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }
 
     undoRedo.snapshot(stateRef.current, 'move', dragId)
+    debouncedSave.cancel()
     setLocalWidgets((prev) => {
       if (!prev) return prev
       const next = prev.map((w) =>
         w.id === dragId ? { ...w, position: rounded } : w
       )
+      dirtyRef.current = true
       queueWrite(() =>
-        updateCanvas(canvasId, { widgets: next }).catch((err) =>
-          console.error('[canvas] Failed to save widget position:', err)
-        )
+        updateCanvas(canvasId, { widgets: next })
+          .catch((err) => console.error('[canvas] Failed to save widget position:', err))
+          .finally(() => { dirtyRef.current = false })
       )
       return next
     })
@@ -1544,14 +1518,15 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   }, [selectedWidgetIds, canvasId, getSelectedWidgetData])
 
   // Add a widget by type — used by CanvasControls and CoreUIBar event
-  const addWidget = useCallback(async (type) => {
+  const addWidget = useCallback(async (type, extraProps = {}) => {
     const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
+    const mergedProps = { ...defaultProps, ...extraProps }
     const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
-    const pos = centerPositionForWidget(center, type, defaultProps)
+    const pos = centerPositionForWidget(center, type, mergedProps)
     try {
       const result = await addWidgetApi(canvasId, {
         type,
-        props: defaultProps,
+        props: mergedProps,
         position: pos,
       })
       if (result.success && result.widget) {
@@ -1588,7 +1563,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   // Listen for CoreUIBar add-widget events
   useEffect(() => {
     function handleAddWidget(e) {
-      addWidget(e.detail.type)
+      addWidget(e.detail.type, e.detail.props)
     }
     function handleAddStoryWidget(e) {
       addStoryWidget(e.detail.storyId)
@@ -1728,6 +1703,14 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }))
   }, [canvasId, zoom])
 
+  // Keep bridge in sync with widgets/connectors for expand features
+  useEffect(() => {
+    const bridge = window[CANVAS_BRIDGE_STATE_KEY] || {}
+    bridge.widgets = localWidgets
+    bridge.connectors = localConnectors
+    window[CANVAS_BRIDGE_STATE_KEY] = bridge
+  }, [localWidgets, localConnectors])
+
   // Delete selected widget on Delete/Backspace key
   useEffect(() => {
     function handleSelectStart(e) {
@@ -1857,6 +1840,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           undoRedo.snapshot(stateRef.current, 'add')
           setLocalWidgets((prev) => [...(prev || []), result.widget])
           setSelectedWidgetIds(new Set([result.widget.id]))
+          navigator.clipboard?.writeText(result.widget.id).catch(() => {})
         }
         return true
       } catch (err) {
@@ -1948,9 +1932,11 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           for (const w of sourceWidgets) {
             const relX = (w.position?.x ?? 0) - minX
             const relY = (w.position?.y ?? 0) - minY
+            const pasteProps = { ...w.props }
+            if (w.type === 'terminal' || w.type === 'agent') delete pasteProps.prettyName
             const result = await addWidgetApi(canvasId, {
               type: w.type,
-              props: { ...w.props },
+              props: pasteProps,
               position: { x: baseX + relX, y: baseY + relY },
             })
             if (result.success && result.widget) {
@@ -2073,13 +2059,14 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     if (!previous) return
     debouncedSave.cancel()
     debouncedSourceSave.cancel()
+    dirtyRef.current = true
     setLocalWidgets(previous.widgets)
     setLocalSources(previous.sources)
     setLocalConnectors(previous.connectors ?? [])
     queueWrite(() =>
-      updateCanvas(canvasId, { widgets: previous.widgets, sources: previous.sources, connectors: previous.connectors }).catch((err) =>
-        console.error('[canvas] Failed to persist undo:', err)
-      )
+      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])
 
@@ -2088,13 +2075,14 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     if (!next) return
     debouncedSave.cancel()
     debouncedSourceSave.cancel()
+    dirtyRef.current = true
     setLocalWidgets(next.widgets)
     setLocalSources(next.sources)
     setLocalConnectors(next.connectors ?? [])
     queueWrite(() =>
-      updateCanvas(canvasId, { widgets: next.widgets, sources: next.sources, connectors: next.connectors }).catch((err) =>
-        console.error('[canvas] Failed to persist redo:', err)
-      )
+      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])
 
@@ -2386,27 +2374,31 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     return aSelected - bSelected
   })
   for (const widget of sortedWidgets) {
-    if (!isLocalDev && widget.type === 'terminal') continue
+    // 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' }
+      : widget
     allChildren.push(
       <div
-        key={widget.id}
-        id={widget.id}
-        data-tc-x={widget?.position?.x ?? 0}
-        data-tc-y={widget?.position?.y ?? 0}
+        key={effectiveWidget.id}
+        id={effectiveWidget.id}
+        data-tc-x={effectiveWidget?.position?.x ?? 0}
+        data-tc-y={effectiveWidget?.position?.y ?? 0}
         {...(isLocalDev ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
         {...canvasPrimerAttrs}
         style={canvasThemeVars}
         onClick={isLocalDev ? (e) => {
           e.stopPropagation()
           if (!e.target.closest('.tc-drag-handle')) {
-            handleWidgetSelect(widget.id, e.shiftKey)
+            handleWidgetSelect(effectiveWidget.id, e.shiftKey)
           }
         } : undefined}
       >
         <ChromeWrappedWidget
-          widget={widget}
+          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}
           onSelect={(shiftKey) => handleWidgetSelect(widget.id, shiftKey)}
           onDeselect={handleDeselectAll}
           onUpdate={isLocalDev ? handleWidgetUpdate : undefined}
@@ -2423,19 +2415,13 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
   const scale = zoom / 100
 
-  const terminalWidgetIds = !isLocalDev 
-    ? new Set((localWidgets ?? []).filter(w => w.type === 'terminal').map(w => w.id))
-    : null
-
-  const filteredConnectors = terminalWidgetIds?.size
-    ? localConnectors.filter(c => !terminalWidgetIds.has(c.startWidgetId) && !terminalWidgetIds.has(c.endWidgetId))
-    : localConnectors
+  const filteredConnectors = localConnectors
 
   return (
     <>
       <div className={styles.canvasTitle}>
         <a href={(import.meta.env?.BASE_URL || '/')} className={styles.canvasLogo} aria-label="Go to homepage">
-          <Icon name="iconoir/key-command" size={16} color="#fff" />
+          <Icon name="home" size={16} color="#fff" />
         </a>
         <CanvasTitleEditable
           canvasId={canvasId}
@@ -2444,9 +2430,6 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           isLocalDev={isLocalDev}
         />
         <PageSelector currentName={canvasId} pages={siblingPages} isLocalDev={isLocalDev} />
-        {isLocalDev && (
-          <span className={styles.localEditingLabel}>Local editing</span>
-        )}
       </div>
       <div
         ref={scrollRef}
@@ -2478,7 +2461,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
             connectors={filteredConnectors}
             widgets={localWidgets ?? []}
             onRemove={isLocalDev ? handleConnectorRemove : undefined}
-            onEndpointDrag={isLocalDev ? handleEndpointDrag : undefined}
+            onEndpointDrag={undefined}
             dragPreview={connectorDrag}
             hidden={widgetDragging}
           />

package/src/canvas/CanvasPage.module.css

@@ -109,21 +109,6 @@
   isolation: isolate;
 }
 
-.localEditingLabel {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 12px;
-  background: hsl(212, 92%, 45%);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 600;
-  border-radius: 6px;
-  letter-spacing: 0.01em;
-  white-space: nowrap;
-  pointer-events: none;
-  user-select: none;
-}
-
 .ghInstallBanner {
   position: fixed;
   left: 50%;

package/src/canvas/CanvasPage.multiselect.test.jsx

@@ -89,12 +89,16 @@ vi.mock('./widgets/widgetProps.js', () => ({
   getDefaults: () => ({}),
 }))
 
-vi.mock('./widgets/widgetConfig.js', () => ({
-  getFeatures: () => [],
-  isResizable: () => false,
-  schemas: {},
-  getMenuWidgetTypes: () => [],
-}))
+vi.mock('./widgets/widgetConfig.js', async () => {
+  const actual = await vi.importActual('./widgets/widgetConfig.js')
+  return {
+    getFeatures: () => [],
+    isResizable: () => false,
+    schemas: {},
+    getMenuWidgetTypes: () => [],
+    getConnectorDefaults: actual.getConnectorDefaults,
+  }
+})
 
 vi.mock('./widgets/figmaUrl.js', () => ({
   isFigmaUrl: () => false,