diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff571c06f58e..9dba2e7c5e78 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - [Quick Fix Import Button][12051].
 - [Fixed nodes being selected after deleting other nodes or connections.][11902]
 - [Redo stack is no longer lost when interacting with text literals][11908].
+- [Copy button on error message is fixed][12133].
 - [Tooltips are hidden when clicking on a button][12067].
 - [Fixed bug when clicking header in Table Editor Widget didn't start editing
   it][12064]
@@ -21,6 +22,7 @@
 [12051]: https://github.com/enso-org/enso/pull/12051
 [11902]: https://github.com/enso-org/enso/pull/11902
 [11908]: https://github.com/enso-org/enso/pull/11908
+[12133]: https://github.com/enso-org/enso/pull/12133
 [12067]: https://github.com/enso-org/enso/pull/12067
 [12064]: https://github.com/enso-org/enso/pull/12064
 [12129]: https://github.com/enso-org/enso/pull/12129
diff --git a/app/gui/integration-test/project-view/actions.ts b/app/gui/integration-test/project-view/actions.ts
index 00522b0410aa..500fe10cc6bd 100644
--- a/app/gui/integration-test/project-view/actions.ts
+++ b/app/gui/integration-test/project-view/actions.ts
@@ -36,7 +36,7 @@ export async function expectNodePositionsInitialized(page: Page, yPos: number) {
   // Wait until edges are initialized and displayed correctly.
   await expect(page.getByTestId('broken-edge')).toBeHidden()
   // Wait until node sizes are initialized.
-  await expect(locate.graphNode(page).first().locator('.bgFill')).toBeVisible()
+  await expect(locate.graphNode(page).first().locator('.nodeBackground')).toBeVisible()
   // TODO: The yPos should not need to be a variable. Instead, first automatically positioned nodes
   // should always have constant known position. This is a bug caused by incorrect layout after
   // entering a function. To be fixed with #9255
diff --git a/app/gui/integration-test/project-view/componentBrowser.spec.ts b/app/gui/integration-test/project-view/componentBrowser.spec.ts
index 95607c23504e..81f06b6c86f6 100644
--- a/app/gui/integration-test/project-view/componentBrowser.spec.ts
+++ b/app/gui/integration-test/project-view/componentBrowser.spec.ts
@@ -59,7 +59,10 @@ test('Different ways of opening Component Browser', async ({ page }) => {
   await locate.graphEditor(page).press('Enter')
   await expectAndCancelBrowser(page, '', 'selected')
   // Dragging out an edge
-  let outputPort = await locate.outputPortCoordinates(locate.graphNodeByBinding(page, 'selected'))
+  let outputPort = await locate.outputPortCoordinates(
+    page,
+    locate.graphNodeByBinding(page, 'selected'),
+  )
   await page.mouse.click(outputPort.x, outputPort.y)
   await locate.graphEditor(page).click({ position: { x: 100, y: 500 } })
   await expectAndCancelBrowser(page, '', 'selected')
@@ -67,7 +70,7 @@ test('Different ways of opening Component Browser', async ({ page }) => {
   // TODO[ao] Without timeout, even the first click would be treated as double due to previous
   // event. Probably we need a better way to simulate double clicks.
   await page.waitForTimeout(600)
-  outputPort = await locate.outputPortCoordinates(locate.graphNodeByBinding(page, 'selected'))
+  outputPort = await locate.outputPortCoordinates(page, locate.graphNodeByBinding(page, 'selected'))
   await page.mouse.click(outputPort.x, outputPort.y)
   await page.mouse.click(outputPort.x, outputPort.y)
   await expectAndCancelBrowser(page, '', 'selected')
@@ -79,15 +82,16 @@ test('Opening Component Browser from output port buttons', async ({ page }) => {
   // Small (+) button shown when node is hovered
   const node = locate.graphNodeByBinding(page, 'selected')
   await locate.graphNodeIcon(node).hover()
-  await expect(locate.createNodeFromPort(node)).toBeVisible()
-  await locate.createNodeFromPort(node).click({ force: true })
+  const createNodeFromPortButton = await locate.createNodeFromPortButton(page, node)
+  await expect(createNodeFromPortButton).toBeVisible()
+  await createNodeFromPortButton.click({ force: true })
   await expectAndCancelBrowser(page, '', 'selected')
 
   // Small (+) button shown when node is selected
   await page.keyboard.press('Escape')
   await node.click()
-  await expect(locate.createNodeFromPort(node)).toBeVisible()
-  await locate.createNodeFromPort(node).click({ force: true })
+  await expect(createNodeFromPortButton).toBeVisible()
+  await createNodeFromPortButton.click({ force: true })
   await expectAndCancelBrowser(page, '', 'selected')
 })
 
@@ -111,7 +115,10 @@ test('Graph Editor pans to Component Browser', async ({ page }) => {
   await page.mouse.move(100, 280)
   await page.mouse.up({ button: 'middle' })
   await expect(locate.graphNodeByBinding(page, 'five')).toBeInViewport()
-  const outputPort = await locate.outputPortCoordinates(locate.graphNodeByBinding(page, 'final'))
+  const outputPort = await locate.outputPortCoordinates(
+    page,
+    locate.graphNodeByBinding(page, 'final'),
+  )
   await page.mouse.click(outputPort.x, outputPort.y)
   await locate.graphEditor(page).click({ position: { x: 100, y: 1700 } })
   await expect(locate.graphNodeByBinding(page, 'five')).not.toBeInViewport()
diff --git a/app/gui/integration-test/project-view/edgeInteractions.spec.ts b/app/gui/integration-test/project-view/edgeInteractions.spec.ts
index 574e68db9553..72e313795220 100644
--- a/app/gui/integration-test/project-view/edgeInteractions.spec.ts
+++ b/app/gui/integration-test/project-view/edgeInteractions.spec.ts
@@ -82,7 +82,7 @@ test('Conditional ports: Disabled', async ({ page }) => {
 
   // When a port is disabled, it doesn't react to hovering with a disconnected edge,
   // and any attempt to connect to it should open the CB.
-  const outputPort = await outputPortCoordinates(graphNodeByBinding(page, 'final'))
+  const outputPort = await outputPortCoordinates(page, graphNodeByBinding(page, 'final'))
   await page.mouse.click(outputPort.x, outputPort.y)
   await conditionalPort.hover()
   await expect(conditionalPort).not.toHaveClass(/isTarget/)
@@ -101,7 +101,7 @@ test('Conditional ports: Enabled', async ({ page }) => {
   await page.keyboard.down(CONTROL_KEY)
 
   await expect(conditionalPort).toHaveClass(/enabled/)
-  const outputPort = await outputPortCoordinates(graphNodeByBinding(page, 'final'))
+  const outputPort = await outputPortCoordinates(page, graphNodeByBinding(page, 'final'))
   await page.mouse.click(outputPort.x, outputPort.y)
   await conditionalPort.hover()
   await expect(conditionalPort).toHaveClass(/isTarget/)
diff --git a/app/gui/integration-test/project-view/graphNodeVisualization.spec.ts b/app/gui/integration-test/project-view/graphNodeVisualization.spec.ts
index 6b8d9ddd0861..271641addc76 100644
--- a/app/gui/integration-test/project-view/graphNodeVisualization.spec.ts
+++ b/app/gui/integration-test/project-view/graphNodeVisualization.spec.ts
@@ -29,7 +29,7 @@ test('Node can open and load visualization', async ({ page }) => {
 test('Previewing visualization', async ({ page }) => {
   await actions.goToGraph(page)
   const node = locate.graphNode(page).last()
-  const port = await locate.outputPortCoordinates(node)
+  const port = await locate.outputPortCoordinates(page, node)
   await page.keyboard.down('Meta')
   await page.keyboard.down('Control')
   await expect(locate.anyVisualization(page)).toBeHidden()
diff --git a/app/gui/integration-test/project-view/locate.ts b/app/gui/integration-test/project-view/locate.ts
index e8a4a04b769f..d9c699ba898b 100644
--- a/app/gui/integration-test/project-view/locate.ts
+++ b/app/gui/integration-test/project-view/locate.ts
@@ -83,7 +83,6 @@ export const componentMenu = componentLocator('.ComponentMenu')
 export const addNewNodeButton = componentLocator('.PlusButton')
 export const componentBrowser = componentLocator('.ComponentBrowser')
 export const nodeOutputPort = componentLocator('.outputPortHoverArea')
-export const createNodeFromPort = componentLocator('.CreateNodeFromPortButton .plusIcon')
 export const editorRoot = componentLocator('.CodeMirror')
 export const nodeComment = componentLocator('.GraphNodeComment')
 export const nodeCommentContent = componentLocator('.GraphNodeComment div[contentEditable]')
@@ -185,11 +184,22 @@ export async function edgesToNode(page: Page, node: Locator) {
  * Returns a location that can be clicked to activate an output port.
  * Using a `Locator` would be better, but `position` option of `click` doesn't work.
  */
-export async function outputPortCoordinates(node: Locator) {
-  const outputPortArea = await node.locator('.outputPortHoverArea').boundingBox()
+export async function outputPortCoordinates(page: Page, node: Locator) {
+  const nodeId = await node.getAttribute('data-node-id')
+  const outputPortArea = await page
+    .locator(`.GraphNodeOutputPorts[data-output-ports-node-id="${nodeId}"] .outputPortHoverArea`)
+    .boundingBox()
   expect(outputPortArea).not.toBeNull()
   assert(outputPortArea)
   const centerX = outputPortArea.x + outputPortArea.width / 2
   const bottom = outputPortArea.y + outputPortArea.height
   return { x: centerX, y: bottom - 2.0 }
 }
+
+/** Returns a locator for the create node from port button. */
+export async function createNodeFromPortButton(page: Page, node: Locator) {
+  const nodeId = await node.getAttribute('data-node-id')
+  return page.locator(
+    `.GraphNodeOutputPorts[data-output-ports-node-id="${nodeId}"] .CreateNodeFromPortButton .plusIcon`,
+  )
+}
diff --git a/app/gui/src/App.vue b/app/gui/src/App.vue
index c81288cfaf3e..8bbf7ffb29ea 100644
--- a/app/gui/src/App.vue
+++ b/app/gui/src/App.vue
@@ -5,7 +5,7 @@ import ProjectView from '@/ProjectView.vue'
 import { provideAppClassSet } from '@/providers/appClass'
 import { provideGuiConfig } from '@/providers/guiConfig'
 import { provideTooltipRegistry } from '@/providers/tooltipRegistry'
-import { registerAutoBlurHandler } from '@/util/autoBlur'
+import { registerAutoBlurHandler, registerGlobalBlurHandler } from '@/util/autoBlur'
 import { baseConfig, configValue, mergeConfig, type ApplicationConfigValue } from '@/util/config'
 import { urlParams } from '@/util/urlParams'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -38,6 +38,7 @@ const queryClient = useQueryClient()
 provideGuiConfig(appConfigValue)
 
 registerAutoBlurHandler()
+registerGlobalBlurHandler()
 
 onMounted(() => {
   if (appConfigValue.value.window.vibrancy) {
diff --git a/app/gui/src/project-view/components/GraphEditor.vue b/app/gui/src/project-view/components/GraphEditor.vue
index 59975a230874..90df2722a36a 100644
--- a/app/gui/src/project-view/components/GraphEditor.vue
+++ b/app/gui/src/project-view/components/GraphEditor.vue
@@ -180,6 +180,7 @@ const nodeSelection = provideGraphSelection(
   {
     isValid: (id) => graphStore.db.isNodeId(id),
     onSelected: (id) => graphStore.db.moveNodeToTop(id),
+    onSoleSelected: (id) => graphStore.db.moveNodeToTop(id),
     toSorted: (ids) => {
       const idsSet = new Set(ids)
       const inputNodes = [
@@ -644,7 +645,12 @@ const groupColors = computed(() => {
             @createNodes="createNodesFromSource"
             @toggleDocPanel="toggleRightDockHelpPanel"
           />
-          <GraphEdges :navigator="graphNavigator" @createNodeFromEdge="handleEdgeDrop" />
+          <GraphEdges
+            :navigator="graphNavigator"
+            @createNodeFromEdge="handleEdgeDrop"
+            @createNodeFromPort="createNodesFromSource"
+            @outputPortDoubleClick="handleNodeOutputPortDoubleClick"
+          />
           <ComponentBrowser
             v-if="componentBrowserOpened"
             ref="componentBrowser"
diff --git a/app/gui/src/project-view/components/GraphEditor/CreateNodeFromPortButton.vue b/app/gui/src/project-view/components/GraphEditor/CreateNodeFromPortButton.vue
index ae0b5c2de641..db517ea7340e 100644
--- a/app/gui/src/project-view/components/GraphEditor/CreateNodeFromPortButton.vue
+++ b/app/gui/src/project-view/components/GraphEditor/CreateNodeFromPortButton.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { AstId } from 'ydoc-shared/ast'
 
 const props = defineProps<{ portId: AstId }>()
-const emit = defineEmits<{ click: [] }>()
-const hovered = ref(false)
 </script>
 
 <template>
-  <g :class="{ CreateNodeFromPortButton: true, hovered }" @click="emit('click')">
+  <g class="CreateNodeFromPortButton">
     <rect :class="{ connection: true }" fill="currentColor"></rect>
     <g :class="{ plusIcon: true }">
       <mask :id="`${props.portId}_add_node_clip_path`">
@@ -18,7 +15,7 @@ const hovered = ref(false)
       </mask>
       <circle :mask="`url(#${props.portId}_add_node_clip_path)`" fill="currentColor"></circle>
     </g>
-    <rect class="hoverArea" @pointerenter="hovered = true" @pointerleave="hovered = false"></rect>
+    <rect class="hoverArea"></rect>
   </g>
 </template>
 
@@ -31,6 +28,7 @@ const hovered = ref(false)
   --topOffset: 40px;
   --color-dimmed: color-mix(in oklab, var(--color-node-primary) 60%, white 40%);
   --color: var(--color-node-primary);
+  pointer-events: all;
 }
 
 .connection {
diff --git a/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue b/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue
index eb5659f8767b..bcc0bc5c9a5e 100644
--- a/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue
+++ b/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue
@@ -126,7 +126,7 @@ const sourceMask = computed<NodeMask | undefined>(() => {
   if (!nodeRect) return
   const animProgress =
     startsInPort.value ?
-      ((sourceNode.value && graph.nodeHoverAnimations.get(sourceNode.value)) ?? 0)
+      ((sourceNode.value && graph.nodeOutputHoverAnimations.get(sourceNode.value)) ?? 0)
     : 0
   const padding = animProgress * VISIBLE_PORT_MASK_PADDING
   if (!maskSource && padding === 0) return
@@ -287,7 +287,7 @@ const arrowPath = [
 
 const sourceHoverAnimationStyle = computed(() => {
   if (!animateFromSourceHover || !base.value || !sourceNode.value) return {}
-  const progress = graph.nodeHoverAnimations.get(sourceNode.value) ?? 0
+  const progress = graph.nodeOutputHoverAnimations.get(sourceNode.value) ?? 0
   if (progress === 1) return {}
   const currentLength = progress * base.value.getTotalLength()
   return {
diff --git a/app/gui/src/project-view/components/GraphEditor/GraphEdges.vue b/app/gui/src/project-view/components/GraphEditor/GraphEdges.vue
index 05b1e6d8969b..9faa93e0ba9a 100644
--- a/app/gui/src/project-view/components/GraphEditor/GraphEdges.vue
+++ b/app/gui/src/project-view/components/GraphEditor/GraphEdges.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import GraphEdge from '@/components/GraphEditor/GraphEdge.vue'
+import GraphNodeOutputPorts from '@/components/GraphEditor/GraphNodeOutputPorts.vue'
+import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
 import type { GraphNavigator } from '@/providers/graphNavigator'
 import { injectGraphSelection } from '@/providers/graphSelection'
 import { injectInteractionHandler, type Interaction } from '@/providers/interactionHandler'
@@ -9,17 +11,21 @@ import { Ast } from '@/util/ast'
 import { isAstId, type AstId } from '@/util/ast/abstract'
 import { Vec2 } from '@/util/data/vec2'
 import { toast } from 'react-toastify'
+import { computed } from 'vue'
 
 const graph = useGraphStore()
 const selection = injectGraphSelection(true)
 const interaction = injectInteractionHandler()
+const nodeSelection = injectGraphSelection(true)
 
 const props = defineProps<{
   navigator: GraphNavigator
 }>()
 
-const emits = defineEmits<{
+const emit = defineEmits<{
   createNodeFromEdge: [source: AstId, position: Vec2]
+  createNodeFromPort: [source: NodeId, options: NodeCreationOptions[]]
+  outputPortDoubleClick: [portId: AstId]
 }>()
 
 const MIN_DRAG_MOVE = 10
@@ -58,7 +64,7 @@ function edgeInteractionClick() {
       if (target == null) {
         if (graph.mouseEditedEdge?.disconnectedEdgeTarget != null)
           disconnectEdge(graph.mouseEditedEdge.disconnectedEdgeTarget)
-        emits('createNodeFromEdge', source, props.navigator.sceneMousePos ?? Vec2.Zero)
+        emit('createNodeFromEdge', source, props.navigator.sceneMousePos ?? Vec2.Zero)
       } else {
         createEdge(source, target)
       }
@@ -113,6 +119,10 @@ function createEdge(source: AstId, target: PortId) {
     }
   }
 }
+
+const nodeIdsWithOutputPorts = computed(() =>
+  [...graph.db.nodeOutputPorts.allForward()].map(([id]) => id),
+)
 </script>
 
 <template>
@@ -125,6 +135,19 @@ function createEdge(source: AstId, target: PortId) {
         :edge="graph.outputSuggestedEdge"
         animateFromSourceHover
       />
+      <template v-for="id in nodeIdsWithOutputPorts" :key="id">
+        <GraphNodeOutputPorts
+          :nodeId="id"
+          :forceVisible="graph.nodeHovered.get(id) ?? false"
+          @newNodeClick="
+            (nodeSelection?.setSelection(new Set([id])),
+            emit('createNodeFromPort', id, [{ commit: false, content: undefined }]))
+          "
+          @portClick="(event, portId) => graph.createEdgeFromOutput(portId, event)"
+          @portDoubleClick="(_event, portId) => emit('outputPortDoubleClick', portId)"
+          @update:hoverAnim="graph.updateNodeOutputHoverAnim(id, $event)"
+        />
+      </template>
     </svg>
     <svg v-if="graph.mouseEditedEdge" :viewBox="props.navigator.viewBox" class="overlay aboveNodes">
       <GraphEdge :edge="graph.mouseEditedEdge" maskSource />
diff --git a/app/gui/src/project-view/components/GraphEditor/GraphNode.vue b/app/gui/src/project-view/components/GraphEditor/GraphNode.vue
index a958c9e06ddc..fd0b8626c37d 100644
--- a/app/gui/src/project-view/components/GraphEditor/GraphNode.vue
+++ b/app/gui/src/project-view/components/GraphEditor/GraphNode.vue
@@ -13,7 +13,6 @@ import GraphNodeMessage, {
   iconForMessageType,
   type MessageType,
 } from '@/components/GraphEditor/GraphNodeMessage.vue'
-import GraphNodeOutputPorts from '@/components/GraphEditor/GraphNodeOutputPorts.vue'
 import GraphVisualization from '@/components/GraphEditor/GraphVisualization.vue'
 import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
 import PointFloatingMenu from '@/components/PointFloatingMenu.vue'
@@ -33,6 +32,7 @@ import { useNodeExecution } from '@/stores/project/nodeExecution'
 import { Ast } from '@/util/ast'
 import type { AstId } from '@/util/ast/abstract'
 import { prefixes } from '@/util/ast/node'
+import { onWindowBlur } from '@/util/autoBlur'
 import type { Opt } from '@/util/data/opt'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
@@ -67,7 +67,6 @@ const emit = defineEmits<{
   toggleDocPanel: []
   'update:edited': [cursorPosition: number]
   'update:rect': [rect: Rect]
-  'update:hoverAnim': [progress: number]
   'update:visualizationId': [id: Opt<VisualizationIdentifier>]
   'update:visualizationRect': [rect: Rect | undefined]
   'update:visualizationEnabled': [enabled: boolean]
@@ -158,7 +157,7 @@ const visibleMessage = computed(
     availableMessage.value,
 )
 
-const nodeHovered = ref(false)
+const nodeHovered = computed(() => graph.nodeHovered.get(nodeId.value) ?? false)
 
 const isOnlyOneSelected = computed(
   () =>
@@ -212,7 +211,6 @@ watch(menuVisible, (visible) => {
 
 function setSoleSelected() {
   nodeSelection?.setSelection(new Set([nodeId.value]))
-  graph.db.moveNodeToTop(nodeId.value)
 }
 
 function ensureSelected() {
@@ -221,7 +219,7 @@ function ensureSelected() {
   }
 }
 
-const outputHovered = ref(false)
+const outputHovered = computed(() => (graph.nodeOutputHoverAnimations.get(nodeId.value) ?? 0) !== 0)
 const keyboard = injectKeyboard()
 
 const visualizationWidth = computed(() => props.node.vis?.width ?? null)
@@ -232,14 +230,28 @@ const isVisualizationEnabled = computed({
     emit('update:visualizationEnabled', enabled)
   },
 })
+const visualizationHovered = ref(false)
+
 const isVisualizationPreviewed = computed(
-  () => keyboard.mod && outputHovered.value && !isVisualizationEnabled.value,
+  () =>
+    keyboard.mod &&
+    (outputHovered.value || visualizationHovered.value || nodeHovered.value) &&
+    !isVisualizationEnabled.value,
 )
 const isVisualizationVisible = computed(
   () => isVisualizationEnabled.value || isVisualizationPreviewed.value,
 )
+watch(isVisualizationVisible, (val) => {
+  // When visualization is being hidden, we don’t receive `pointerleave` event for some reason.
+  // So we need to set `visualizationHovered` to `false` manually.
+  if (!val) {
+    visualizationHovered.value = false
+  }
+})
 watch(isVisualizationPreviewed, (newVal, oldVal) => {
-  if (newVal && !oldVal) {
+  if (!newVal) {
+    graph.setNodeHovered(nodeId.value, false)
+  } else if (newVal && !oldVal) {
     graph.db.moveNodeToTop(nodeId.value)
   }
 })
@@ -453,6 +465,10 @@ const { editingComment } = provideComponentButtons(
 )
 
 const showMenuAt = ref<{ x: number; y: number }>()
+onWindowBlur(() => {
+  graph.setNodeHovered(nodeId.value, false)
+  updateNodeHover(undefined)
+})
 </script>
 
 <template>
@@ -464,8 +480,8 @@ const showMenuAt = ref<{ x: number; y: number }>()
     :class="nodeClass"
     :data-node-id="nodeId"
     @pointerdown.stop
-    @pointerenter="((nodeHovered = true), updateNodeHover($event))"
-    @pointerleave="((nodeHovered = false), updateNodeHover(undefined))"
+    @pointerenter="(graph.setNodeHovered(nodeId, true), updateNodeHover($event))"
+    @pointerleave="(graph.setNodeHovered(nodeId, false), updateNodeHover(undefined))"
     @pointermove="updateNodeHover"
   >
     <div class="binding" v-text="node.pattern?.code()" />
@@ -498,6 +514,8 @@ const showMenuAt = ref<{ x: number; y: number }>()
       :isPreview="isVisualizationPreviewed"
       :isFullscreenAllowed="true"
       :isResizable="true"
+      @pointerenter="visualizationHovered = true"
+      @pointerleave="visualizationHovered = false"
       @update:rect="updateVisualizationRect"
       @update:id="emit('update:visualizationId', $event)"
       @update:enabled="emit('update:visualizationEnabled', $event)"
@@ -544,21 +562,7 @@ const showMenuAt = ref<{ x: number; y: number }>()
       :message="visibleMessage.text"
       :type="visibleMessage.type"
     />
-    <svg class="bgPaths">
-      <rect class="bgFill" />
-      <GraphNodeOutputPorts
-        v-if="props.node.type !== 'output'"
-        :nodeId="nodeId"
-        :forceVisible="nodeHovered"
-        @newNodeClick="
-          (setSoleSelected(), emit('createNodes', [{ commit: false, content: undefined }]))
-        "
-        @portClick="(...args) => emit('outputPortClick', ...args)"
-        @portDoubleClick="(...args) => emit('outputPortDoubleClick', ...args)"
-        @update:hoverAnim="emit('update:hoverAnim', $event)"
-        @update:nodeHovered="outputHovered = $event"
-      />
-    </svg>
+    <div class="nodeBackground"></div>
   </div>
   <PointFloatingMenu v-if="showMenuAt" :point="showMenuAt" @close="showMenuAt = undefined">
     <ComponentContextMenu @close="showMenuAt = undefined" />
@@ -566,26 +570,6 @@ const showMenuAt = ref<{ x: number; y: number }>()
 </template>
 
 <style scoped>
-.bgPaths {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  overflow: visible;
-  top: 0;
-  left: 0;
-  display: flex;
-  --output-port-transform: translateY(var(--viz-below-node));
-}
-
-.bgFill {
-  width: var(--node-size-x);
-  height: var(--node-size-y);
-  rx: var(--node-border-radius);
-
-  fill: var(--color-node-background);
-  transition: fill 0.2s ease;
-}
-
 .GraphNode {
   position: absolute;
   border-radius: var(--node-border-radius);
@@ -593,6 +577,17 @@ const showMenuAt = ref<{ x: number; y: number }>()
   box-sizing: border-box;
 }
 
+.nodeBackground {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--node-border-radius);
+  background-color: var(--color-node-background);
+  transition: background-color 0.2s ease;
+}
+
 .content {
   font-family: var(--font-code);
   position: relative;
diff --git a/app/gui/src/project-view/components/GraphEditor/GraphNodeMessage.vue b/app/gui/src/project-view/components/GraphEditor/GraphNodeMessage.vue
index 6049acdfb063..5bff389eddbd 100644
--- a/app/gui/src/project-view/components/GraphEditor/GraphNodeMessage.vue
+++ b/app/gui/src/project-view/components/GraphEditor/GraphNodeMessage.vue
@@ -98,6 +98,7 @@ export const colorForMessageType: Record<MessageType, string> = {
   color: var(--color-text-inversed);
   background-color: var(--background-color);
   line-height: 20px;
+  z-index: 30;
 }
 
 .icon {
diff --git a/app/gui/src/project-view/components/GraphEditor/GraphNodeOutputPorts.vue b/app/gui/src/project-view/components/GraphEditor/GraphNodeOutputPorts.vue
index 218acf7aba1c..fd986c283fb6 100644
--- a/app/gui/src/project-view/components/GraphEditor/GraphNodeOutputPorts.vue
+++ b/app/gui/src/project-view/components/GraphEditor/GraphNodeOutputPorts.vue
@@ -5,15 +5,7 @@ import { useGraphEditorState } from '@/providers/graphEditorState'
 import { useGraphStore, type NodeId } from '@/stores/graph'
 import { isDef } from '@vueuse/core'
 import { setIfUndefined } from 'lib0/map'
-import {
-  computed,
-  effectScope,
-  onScopeDispose,
-  ref,
-  watch,
-  watchEffect,
-  type EffectScope,
-} from 'vue'
+import { computed, effectScope, onScopeDispose, ref, watchEffect, type EffectScope } from 'vue'
 import type { AstId } from 'ydoc-shared/ast'
 import CreateNodeFromPortButton from './CreateNodeFromPortButton.vue'
 
@@ -24,11 +16,13 @@ const emit = defineEmits<{
   portDoubleClick: [event: PointerEvent, portId: AstId]
   newNodeClick: [portId: AstId]
   'update:hoverAnim': [progress: number]
-  'update:nodeHovered': [hovered: boolean]
 }>()
 
 const graph = useGraphStore()
 
+const nodeRect = computed(() => graph.nodeRects.get(props.nodeId))
+const nodeColor = computed(() => graph.db.getNodeColorStyle(props.nodeId))
+
 // === Ports ===
 
 interface PortData {
@@ -63,13 +57,9 @@ const outputPorts = computed((): PortData[] => {
 // === Interactivity ===
 
 const mouseOverOutput = ref<AstId>()
+const mouseOverCreateNodeFromPortButton = ref(false)
 
 const outputHovered = computed(() => (graph.mouseEditedEdge ? undefined : mouseOverOutput.value))
-watch(outputHovered, (newVal, oldVal) => {
-  if ((newVal != null) !== (oldVal != null)) {
-    emit('update:nodeHovered', newVal != null)
-  }
-})
 
 const anyPortDisconnected = computed(() => {
   for (const port of outputPortsSet.value) {
@@ -89,7 +79,8 @@ const portsVisible = computed(
   () =>
     props.forceVisible ||
     (outputHovered.value && outputPortsSet.value.has(outputHovered.value)) ||
-    anyPortDisconnected.value,
+    anyPortDisconnected.value ||
+    mouseOverCreateNodeFromPortButton.value,
 )
 
 const portsHoverAnimation = useApproach(() => (portsVisible.value ? 1 : 0), 50, 0.01)
@@ -127,8 +118,11 @@ function portGroupStyle(port: PortData) {
     '--direct-hover-animation': hoverAnimations.get(port.portId)?.[0].value ?? 0,
     '--port-clip-start': start,
     '--port-clip-end': end,
-    '--port-label-transform-x': `calc(${((end - start) / 2 + start) * 100}%)`,
-    transform: 'var(--output-port-transform)',
+    '--port-label-transform-x': `${((end - start) / 2 + start) * 100}%`,
+    '--node-size-x': `${nodeRect.value?.size.x ?? 0}px`,
+    '--node-size-y': `${nodeRect.value?.size.y ?? 0}px`,
+    '--node-group-color': nodeColor.value,
+    transform: `translate(${nodeRect.value?.pos.x ?? 0}px, ${nodeRect.value?.pos.y ?? 0}px)`,
   }
 }
 
@@ -136,27 +130,32 @@ graph.suggestEdgeFromOutput(outputHovered)
 </script>
 
 <template>
-  <template v-for="port of outputPorts" :key="port.portId">
-    <g :style="portGroupStyle(port)">
-      <g
-        class="portClip"
-        @pointerenter="mouseOverOutput = port.portId"
-        @pointerleave="mouseOverOutput = undefined"
-      >
-        <rect
-          class="outputPortHoverArea clickable"
-          @pointerdown.stop.prevent="handlePortClick($event, port.portId)"
+  <g class="GraphNodeOutputPorts" :data-output-ports-node-id="props.nodeId">
+    <template v-for="port of outputPorts" :key="port.portId">
+      <g :style="portGroupStyle(port)" class="define-node-colors">
+        <g
+          class="portClip"
+          @pointerenter="mouseOverOutput = port.portId"
+          @pointerleave="mouseOverOutput = undefined"
+        >
+          <rect
+            class="outputPortHoverArea clickable"
+            @pointerdown.stop.prevent="handlePortClick($event, port.portId)"
+          />
+          <rect class="outputPort" />
+        </g>
+        <text class="outputPortLabel">{{ port.label }}</text>
+        <CreateNodeFromPortButton
+          v-if="!componentBrowserOpened"
+          :class="{ hovered: mouseOverCreateNodeFromPortButton }"
+          :portId="port.portId"
+          @pointerleave="mouseOverCreateNodeFromPortButton = false"
+          @pointerenter="mouseOverCreateNodeFromPortButton = true"
+          @click="(emit('newNodeClick', port.portId), (mouseOverCreateNodeFromPortButton = false))"
         />
-        <rect class="outputPort" />
       </g>
-      <text class="outputPortLabel">{{ port.label }}</text>
-      <CreateNodeFromPortButton
-        v-if="!componentBrowserOpened"
-        :portId="port.portId"
-        @click="emit('newNodeClick', port.portId)"
-      />
-    </g>
-  </template>
+    </template>
+  </g>
 </template>
 
 <style scoped>
diff --git a/app/gui/src/project-view/components/GraphEditor/GraphNodes.vue b/app/gui/src/project-view/components/GraphEditor/GraphNodes.vue
index fdbbbb5f809a..eafe7c265bbb 100644
--- a/app/gui/src/project-view/components/GraphEditor/GraphNodes.vue
+++ b/app/gui/src/project-view/components/GraphEditor/GraphNodes.vue
@@ -71,7 +71,6 @@ const uploadingFiles = computed<[FileName, File][]>(() => {
       @setNodeColor="graphStore.overrideNodeColor(id, $event)"
       @update:edited="graphStore.setEditedNode(id, $event)"
       @update:rect="graphStore.updateNodeRect(id, $event)"
-      @update:hoverAnim="graphStore.updateNodeHoverAnim(id, $event)"
       @update:visualizationId="
         graphStore.setNodeVisualization(id, $event != null ? { identifier: $event } : {})
       "
diff --git a/app/gui/src/project-view/composables/keyboard.ts b/app/gui/src/project-view/composables/keyboard.ts
index 25febd37b16e..7775c32a75bd 100644
--- a/app/gui/src/project-view/composables/keyboard.ts
+++ b/app/gui/src/project-view/composables/keyboard.ts
@@ -23,9 +23,15 @@ export function useKeyboard() {
     state.meta.value = e.metaKey
     state.ctrl.value = e.ctrlKey
   }
+  const resetState = () => {
+    state.alt.value = false
+    state.shift.value = false
+    state.meta.value = false
+    state.ctrl.value = false
+  }
   useEvent(window, 'keydown', updateState, { capture: true })
   useEvent(window, 'keyup', updateState, { capture: true })
-  useEvent(window, 'pointerenter', updateState, { capture: true })
+  useEvent(window, 'blur', resetState, { capture: true })
 
   return proxyRefs({
     alt: state.alt,
diff --git a/app/gui/src/project-view/composables/selection.ts b/app/gui/src/project-view/composables/selection.ts
index 817e35d427ee..31684c41f06d 100644
--- a/app/gui/src/project-view/composables/selection.ts
+++ b/app/gui/src/project-view/composables/selection.ts
@@ -18,6 +18,7 @@ interface BaseSelectionOptions<T> {
   margin?: number
   isValid?: (element: T) => boolean
   onSelected?: (element: T) => void
+  onSoleSelected?: (element: T) => void
   onDeselected?: (element: T) => void
   toSorted?: (elements: Iterable<T>) => Iterable<T>
 }
@@ -58,6 +59,7 @@ export function useSelection<T, PackedT>(
     margin: 0,
     isValid: () => true,
     onSelected: () => {},
+    onSoleSelected: () => {},
     onDeselected: () => {},
     toSorted: identity,
   }
@@ -79,7 +81,14 @@ type UseSelection<T, PackedT> = ReturnType<typeof useSelectionImpl<T, PackedT>>
 function useSelectionImpl<T, PackedT>(
   navigator: NavigatorComposable,
   elementRects: Map<T, Rect>,
-  { margin, isValid, onSelected, onDeselected, toSorted }: Required<BaseSelectionOptions<T>>,
+  {
+    margin,
+    isValid,
+    onSelected,
+    onSoleSelected,
+    onDeselected,
+    toSorted,
+  }: Required<BaseSelectionOptions<T>>,
   { pack, unpack }: SelectionPackingOptions<T, PackedT>,
 ) {
   const anchor = shallowRef<Vec2>()
@@ -119,6 +128,9 @@ function useSelectionImpl<T, PackedT>(
         if (id != null) onDeselected(id)
       }
     }
+    if (newSelection.size === 1) {
+      onSoleSelected(set.first(newSelection)!)
+    }
   }
 
   function execAdd() {
diff --git a/app/gui/src/project-view/stores/graph/index.ts b/app/gui/src/project-view/stores/graph/index.ts
index 30a536b0a0d8..4454dbd45735 100644
--- a/app/gui/src/project-view/stores/graph/index.ts
+++ b/app/gui/src/project-view/stores/graph/index.ts
@@ -85,7 +85,8 @@ export const [provideGraphStore, useGraphStore] = createContextStore(
     proj.setObservedFileName('Main.enso')
 
     const nodeRects = reactive(new Map<NodeId, Rect>())
-    const nodeHoverAnimations = reactive(new Map<NodeId, number>())
+    const nodeOutputHoverAnimations = reactive(new Map<NodeId, number>())
+    const nodeHovered = reactive(new Map<NodeId, boolean>())
     const vizRects = reactive(new Map<NodeId, Rect>())
     // The currently visible nodes' areas (including visualization).
     const visibleNodeAreas = computed(() => {
@@ -331,7 +332,8 @@ export const [provideGraphStore, useGraphStore] = createContextStore(
           const outerAst = edit.getVersion(node.outerAst)
           if (outerAst.isStatement()) Ast.deleteFromParentBlock(outerAst)
           nodeRects.delete(id)
-          nodeHoverAnimations.delete(id)
+          nodeHovered.delete(id)
+          nodeOutputHoverAnimations.delete(id)
           deletedNodes.add(id)
         }
       })
@@ -454,8 +456,12 @@ export const [provideGraphStore, useGraphStore] = createContextStore(
       }
     }
 
-    function updateNodeHoverAnim(nodeId: NodeId, progress: number) {
-      nodeHoverAnimations.set(nodeId, progress)
+    function setNodeHovered(nodeId: NodeId, hovered: boolean) {
+      nodeHovered.set(nodeId, hovered)
+    }
+
+    function updateNodeOutputHoverAnim(nodeId: NodeId, progress: number) {
+      nodeOutputHoverAnimations.set(nodeId, progress)
     }
 
     const nodesToPlace = reactive<NodeId[]>([])
@@ -792,7 +798,8 @@ export const [provideGraphStore, useGraphStore] = createContextStore(
       editedNodeInfo,
       moduleSource,
       nodeRects,
-      nodeHoverAnimations,
+      nodeHovered,
+      nodeOutputHoverAnimations,
       vizRects,
       visibleNodeAreas,
       visibleArea,
@@ -811,7 +818,8 @@ export const [provideGraphStore, useGraphStore] = createContextStore(
       setNodeVisualization,
       undoManager,
       updateNodeRect,
-      updateNodeHoverAnim,
+      setNodeHovered,
+      updateNodeOutputHoverAnim,
       updateVizRect,
       addPortInstance,
       removePortInstance,
diff --git a/app/gui/src/project-view/util/autoBlur.ts b/app/gui/src/project-view/util/autoBlur.ts
index 579cd2b7146c..0d7e80a73648 100644
--- a/app/gui/src/project-view/util/autoBlur.ts
+++ b/app/gui/src/project-view/util/autoBlur.ts
@@ -2,7 +2,7 @@ import { unrefElement, useEvent } from '@/composables/events'
 import { injectInteractionHandler, type Interaction } from '@/providers/interactionHandler'
 import type { ToValue } from '@/util/reactivity'
 import type { VueInstance } from '@vueuse/core'
-import { toValue, watchEffect, type Ref } from 'vue'
+import { onUnmounted, toValue, watchEffect, type Ref } from 'vue'
 import type { Opt } from 'ydoc-shared/util/data/opt'
 
 /**
@@ -138,3 +138,33 @@ function handleClick(
   }
   return wrappedInteraction
 }
+
+const blurHandlers = new Set<() => void>()
+
+/**
+ * Register a callback to be called when the window is blurred.
+ * The callback will be called when the window is blurred, and will be removed when the component is unmounted.
+ */
+export function onWindowBlur(callback: () => void) {
+  blurHandlers.add(callback)
+  onUnmounted(() => {
+    blurHandlers.delete(callback)
+  })
+}
+
+/**
+ * This function should be called on application mount to make all {@link onWindowBlur} work
+ * properly.
+ */
+export function registerGlobalBlurHandler() {
+  useEvent(
+    window,
+    'blur',
+    () => {
+      for (const handler of blurHandlers) {
+        handler()
+      }
+    },
+    { capture: true },
+  )
+}