diff --git a/app/gui2/playwright.config.ts b/app/gui2/playwright.config.ts
index 110b5e4618d5..06cd20c2415c 100644
--- a/app/gui2/playwright.config.ts
+++ b/app/gui2/playwright.config.ts
@@ -82,7 +82,10 @@ export default defineConfig({
   // },
   // ],
   webServer: {
-    command: 'E2E=true vite build && vite preview',
+    env: {
+      E2E: 'true',
+    },
+    command: 'vite build && vite preview',
     port: 4173,
     // We use our special, mocked version of server, thus do not want to re-use user's one.
     reuseExistingServer: false,
diff --git a/app/gui2/shared/languageServer.ts b/app/gui2/shared/languageServer.ts
index d32a8f60d6b1..00876fdb758c 100644
--- a/app/gui2/shared/languageServer.ts
+++ b/app/gui2/shared/languageServer.ts
@@ -168,7 +168,7 @@ export class LanguageServer extends ObservableV2<Notifications> {
 
   /** [Documentation](https://github.com/enso-org/enso/blob/develop/docs/language-server/protocol-language-server.md#textopenfile) */
   openTextFile(path: Path): Promise<response.OpenTextFile> {
-    return this.request('text/openFile', { path })
+    return this.request<response.OpenTextFile>('text/openFile', { path })
   }
 
   /** [Documentation](https://github.com/enso-org/enso/blob/develop/docs/language-server/protocol-language-server.md#textclosefile) */
diff --git a/app/gui2/src/components/ComponentBrowser.vue b/app/gui2/src/components/ComponentBrowser.vue
index a6b223cd57e2..3463241093c8 100644
--- a/app/gui2/src/components/ComponentBrowser.vue
+++ b/app/gui2/src/components/ComponentBrowser.vue
@@ -176,7 +176,7 @@ const previewDataSource: ComputedRef<VisualizationDataSource | undefined> = comp
   return {
     type: 'expression',
     expression: previewedExpression.value,
-    contextId: body.astId,
+    contextId: body.exprId,
   }
 })
 
diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
index b1da47ee59b7..3622d6bac8b4 100644
--- a/app/gui2/src/components/GraphEditor.vue
+++ b/app/gui2/src/components/GraphEditor.vue
@@ -551,15 +551,16 @@ function handleEdgeDrop(source: ExprId, position: Vec2) {
       toastClassName="text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl"
       transition="Vue-Toastification__bounce"
     />
-    <svg :viewBox="graphNavigator.viewBox">
-      <GraphEdges @createNodeFromEdge="handleEdgeDrop" />
-    </svg>
     <div :style="{ transform: graphNavigator.transform }" class="htmlLayer">
       <GraphNodes
         @nodeOutputPortDoubleClick="handleNodeOutputPortDoubleClick"
         @nodeDoubleClick="(id) => stackNavigator.enterNode(id)"
       />
     </div>
+    <svg :viewBox="graphNavigator.viewBox" class="svgBackdropLayer">
+      <GraphEdges @createNodeFromEdge="handleEdgeDrop" />
+    </svg>
+
     <ComponentBrowser
       v-if="componentBrowserVisible"
       ref="componentBrowser"
@@ -601,10 +602,11 @@ function handleEdgeDrop(source: ExprId, position: Vec2) {
   --node-color-no-type: #596b81;
 }
 
-svg {
+.svgBackdropLayer {
   position: absolute;
   top: 0;
   left: 0;
+  z-index: -1;
 }
 
 .htmlLayer {
diff --git a/app/gui2/src/components/GraphEditor/GraphEdge.vue b/app/gui2/src/components/GraphEditor/GraphEdge.vue
index 4d52463d5ea3..7200b648b6bd 100644
--- a/app/gui2/src/components/GraphEditor/GraphEdge.vue
+++ b/app/gui2/src/components/GraphEditor/GraphEdge.vue
@@ -27,7 +27,7 @@ const sourceNode = computed(() => {
     // When the source is not set (i.e. edge is dragged), use the currently hovered over expression
     // as the source, as long as it is not from the same node as the target.
     if (selection?.hoveredNode != null) {
-      const rawTargetNode = graph.db.getExpressionNodeId(props.edge.target)
+      const rawTargetNode = props.edge.target && graph.getPortNodeId(props.edge.target)
       if (selection.hoveredNode != rawTargetNode) return selection.hoveredNode
     }
   }
@@ -45,30 +45,29 @@ const targetExpr = computed(() => {
 })
 
 const targetNode = computed(
-  () => targetExpr.value && graph.db.getExpressionNodeId(targetExpr.value),
+  () => targetExpr.value && (graph.getPortNodeId(targetExpr.value) ?? selection?.hoveredNode),
 )
 const targetNodeRect = computed(() => targetNode.value && graph.nodeRects.get(targetNode.value))
 
-const targetRect = computed<Rect | null>(() => {
+const targetRect = computed<Rect | undefined>(() => {
   const expr = targetExpr.value
-  if (expr != null) {
-    if (targetNode.value == null) return null
-    const targetRectRelative = graph.exprRects.get(expr)
-    if (targetRectRelative == null || targetNodeRect.value == null) return null
+  if (expr != null && targetNode.value != null && targetNodeRect.value != null) {
+    const targetRectRelative = graph.getPortRelativeRect(expr)
+    if (targetRectRelative == null) return
     return targetRectRelative.offsetBy(targetNodeRect.value.pos)
   } else if (navigator?.sceneMousePos != null) {
     return new Rect(navigator.sceneMousePos, Vec2.Zero)
   } else {
-    return null
+    return undefined
   }
 })
-const sourceRect = computed<Rect | null>(() => {
+const sourceRect = computed<Rect | undefined>(() => {
   if (sourceNode.value != null) {
-    return graph.nodeRects.get(sourceNode.value) ?? null
+    return graph.nodeRects.get(sourceNode.value)
   } else if (navigator?.sceneMousePos != null) {
     return new Rect(navigator.sceneMousePos, Vec2.Zero)
   } else {
-    return null
+    return undefined
   }
 })
 
diff --git a/app/gui2/src/components/GraphEditor/GraphEdges.vue b/app/gui2/src/components/GraphEditor/GraphEdges.vue
index 3cbe3616206a..c2948ac127f7 100644
--- a/app/gui2/src/components/GraphEditor/GraphEdges.vue
+++ b/app/gui2/src/components/GraphEditor/GraphEdges.vue
@@ -3,9 +3,11 @@ import GraphEdge from '@/components/GraphEditor/GraphEdge.vue'
 import type { GraphNavigator } from '@/providers/graphNavigator'
 import { injectGraphSelection } from '@/providers/graphSelection'
 import { injectInteractionHandler, type Interaction } from '@/providers/interactionHandler'
+import type { PortId } from '@/providers/portInfo'
 import { useGraphStore } from '@/stores/graph'
+import { Ast } from '@/util/ast'
 import { Vec2 } from '@/util/data/vec2'
-import type { ExprId } from 'shared/yjsModel'
+import { isUuid, type ExprId } from 'shared/yjsModel.ts'
 
 const graph = useGraphStore()
 const selection = injectGraphSelection(true)
@@ -27,7 +29,7 @@ const editingEdge: Interaction = {
     if (graph.unconnectedEdge == null) return false
     const source = graph.unconnectedEdge.source ?? selection?.hoveredNode
     const target = graph.unconnectedEdge.target ?? selection?.hoveredPort
-    const targetNode = target && graph.db.getExpressionNodeId(target)
+    const targetNode = target && graph.getPortNodeId(target)
     graph.transact(() => {
       if (source != null && source != targetNode) {
         if (target == null) {
@@ -43,18 +45,34 @@ const editingEdge: Interaction = {
     return true
   },
 }
+
 interaction.setWhen(() => graph.unconnectedEdge != null, editingEdge)
 
-function disconnectEdge(target: ExprId) {
-  graph.setExpressionContent(target, '_')
+function disconnectEdge(target: PortId) {
+  if (!graph.updatePortValue(target, undefined)) {
+    const targetStr: string = target
+    if (isUuid(targetStr)) {
+      console.warn(`Failed to disconnect edge from port ${target}, falling back to direct edit.`)
+      graph.setExpressionContent(targetStr as ExprId, '_')
+    } else {
+      console.error(`Failed to disconnect edge from port ${target}, no fallback possible.`)
+    }
+  }
 }
 
-function createEdge(source: ExprId, target: ExprId) {
+function createEdge(source: ExprId, target: PortId) {
   const ident = graph.db.getOutputPortIdentifier(source)
   if (ident == null) return
-  // TODO: Check alias analysis to see if the binding is shadowed.
-  graph.setExpressionContent(target, ident)
-  // TODO: Use alias analysis to ensure declarations are in a dependency order.
+  const identAst = Ast.parse(ident)
+  if (!graph.updatePortValue(target, identAst)) {
+    const targetStr: string = target
+    if (isUuid(targetStr)) {
+      console.warn(`Failed to connect edge to port ${target}, falling back to direct edit.`)
+      graph.setExpressionContent(targetStr as ExprId, ident)
+    } else {
+      console.error(`Failed to connect edge to port ${target}, no fallback possible.`)
+    }
+  }
 }
 </script>
 
diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
index 5bde53f1df33..af96c00eeb0e 100644
--- a/app/gui2/src/components/GraphEditor/GraphNode.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNode.vue
@@ -19,7 +19,7 @@ import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import { displayedIconOf } from '@/util/getIconName'
 import { setIfUndefined } from 'lib0/map'
-import { type ExprId, type VisualizationIdentifier } from 'shared/yjsModel'
+import type { ExprId, VisualizationIdentifier } from 'shared/yjsModel'
 import { computed, ref, watch, watchEffect } from 'vue'
 
 const MAXIMUM_CLICK_LENGTH_MS = 300
@@ -71,7 +71,7 @@ const outputPortsSet = computed(() => {
 })
 
 const widthOverridePx = ref<number>()
-const nodeId = computed(() => props.node.rootSpan.astId)
+const nodeId = computed(() => props.node.rootSpan.exprId)
 
 const rootNode = ref<HTMLElement>()
 const contentNode = ref<HTMLElement>()
@@ -194,7 +194,7 @@ const isOutputContextOverridden = computed({
             disableOutputContext: undefined,
           },
     )
-    graph.setNodeContent(props.node.rootSpan.astId, newAst.code())
+    graph.setNodeContent(props.node.rootSpan.exprId, newAst.code())
   },
 })
 
diff --git a/app/gui2/src/components/GraphEditor/NodeWidget.vue b/app/gui2/src/components/GraphEditor/NodeWidget.vue
index 04b3ae64f3f1..143a34c73429 100644
--- a/app/gui2/src/components/GraphEditor/NodeWidget.vue
+++ b/app/gui2/src/components/GraphEditor/NodeWidget.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { PortId } from '@/providers/portInfo'
 import { injectWidgetRegistry, type WidgetInput } from '@/providers/widgetRegistry'
 import type { WidgetConfiguration } from '@/providers/widgetRegistry/configuration'
 import { injectWidgetTree } from '@/providers/widgetTree'
@@ -8,30 +9,31 @@ import {
   usageKeyForInput,
 } from '@/providers/widgetUsageInfo'
 import { Ast } from '@/util/ast'
-import type { Opt } from '@/util/data/opt'
 import { computed, proxyRefs } from 'vue'
 
 const props = defineProps<{
   input: WidgetInput
   nest?: boolean
-  dynamicConfig?: Opt<WidgetConfiguration>
+  dynamicConfig?: WidgetConfiguration | undefined
+  /**
+   * A function that intercepts and handles a value update emitted by this widget. When it returns
+   * `false`, the update continues to be propagated to the parent widget. When it returns `true`,
+   * the update is considered handled and is not propagated further.
+   */
+  onUpdate?: UpdateHandler
 }>()
 defineOptions({
   inheritAttrs: false,
 })
 
+type UpdateHandler = (value: unknown, origin: PortId) => boolean
+
 const registry = injectWidgetRegistry()
 const tree = injectWidgetTree()
 const parentUsageInfo = injectWidgetUsageInfo(true)
 const usageKey = computed(() => usageKeyForInput(props.input))
 const sameInputAsParent = computed(() => parentUsageInfo?.usageKey === usageKey.value)
 
-const whitespace = computed(() =>
-  !sameInputAsParent.value && props.input instanceof Ast.Ast
-    ? ' '.repeat(props.input.astExtended?.whitespaceLength() ?? 0)
-    : '',
-)
-
 const sameInputParentWidgets = computed(() =>
   sameInputAsParent.value ? parentUsageInfo?.previouslyUsed : undefined,
 )
@@ -47,10 +49,25 @@ const selectedWidget = computed(() => {
     sameInputParentWidgets.value,
   )
 })
+
+const updateHandler = computed(() => {
+  const nextHandler =
+    parentUsageInfo?.updateHandler ?? (() => console.log('Missing update handler'))
+  if (props.onUpdate != null) {
+    const localHandler = props.onUpdate
+    return (value: unknown, origin: PortId) => {
+      const handled = localHandler(value, origin)
+      if (!handled) nextHandler(value, origin)
+    }
+  }
+  return nextHandler
+})
+
 provideWidgetUsageInfo(
   proxyRefs({
     usageKey,
     nesting,
+    updateHandler,
     previouslyUsed: computed(() => {
       const nextSameNodeWidgets = new Set(sameInputParentWidgets.value)
       if (selectedWidget.value != null) {
@@ -64,16 +81,16 @@ provideWidgetUsageInfo(
     }),
   }),
 )
+
 const spanStart = computed(() => {
   if (!(props.input instanceof Ast.Ast)) return undefined
   if (props.input.astExtended == null) return undefined
-  return props.input.astExtended.span()[0] - tree.nodeSpanStart - whitespace.value.length
+  return props.input.astExtended.span()[0] - tree.nodeSpanStart
 })
 </script>
 
 <template>
-  {{ whitespace
-  }}<component
+  <component
     :is="selectedWidget.default"
     v-if="selectedWidget"
     ref="rootNode"
@@ -81,7 +98,7 @@ const spanStart = computed(() => {
     :config="dynamicConfig"
     :nesting="nesting"
     :data-span-start="spanStart"
-    :data-nesting="nesting"
+    @update="updateHandler"
   />
   <span
     v-else
@@ -91,3 +108,12 @@ const spanStart = computed(() => {
     >🚫</span
   >
 </template>
+
+<style scoped>
+.whitespace {
+  color: transparent;
+  pointer-events: none;
+  user-select: none;
+  white-space: pre;
+}
+</style>
diff --git a/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue b/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue
index 3679a56b1c88..68f003af6fef 100644
--- a/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue
+++ b/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import NodeWidget from '@/components/GraphEditor/NodeWidget.vue'
 import { useTransitioning } from '@/composables/animation'
-import { ForcePort } from '@/providers/portInfo'
+import { ForcePort, type PortId } from '@/providers/portInfo'
 import { provideWidgetTree } from '@/providers/widgetTree'
 import { useGraphStore } from '@/stores/graph'
 import { Ast } from '@/util/ast'
+import { isUuid } from 'shared/yjsModel'
 import { computed, toRef } from 'vue'
 
 const props = defineProps<{ ast: Ast.Ast }>()
 const graph = useGraphStore()
 const rootPort = computed(() => {
-  return props.ast instanceof Ast.Ident && !graph.db.isKnownFunctionCall(props.ast.astId)
+  return props.ast instanceof Ast.Ident && !graph.db.isKnownFunctionCall(props.ast.exprId)
     ? new ForcePort(props.ast)
     : props.ast
 })
@@ -28,13 +29,31 @@ const observedLayoutTransitions = new Set([
   'height',
 ])
 
+function handleWidgetUpdates(value: unknown, origin: PortId) {
+  // TODO: Implement proper AST-based update.
+  if (!isUuid(origin)) {
+    console.error(`[UPDATE ${origin}] Invalid top-level origin. Expected expression ID.`)
+  } else if (typeof value === 'string') {
+    graph.setExpressionContent(origin, value)
+  } else if (value instanceof Ast.Ast) {
+    graph.setExpressionContent(origin, value.repr())
+  } else if (value == null) {
+    graph.setExpressionContent(origin, '_')
+  } else {
+    console.error(`[UPDATE ${origin}] Invalid value:`, value)
+  }
+  // No matter if its a succes or not, this handler is always considered to have handled the update,
+  // since it is guaranteed to be the last handler in the chain.
+  return true
+}
+
 const layoutTransitions = useTransitioning(observedLayoutTransitions)
 provideWidgetTree(toRef(props, 'ast'), layoutTransitions.active)
 </script>
 
 <template>
   <div class="NodeWidgetTree" spellcheck="false" v-on="layoutTransitions.events">
-    <NodeWidget :input="rootPort" />
+    <NodeWidget :input="rootPort" @update="handleWidgetUpdates" />
   </div>
 </template>
 
@@ -48,10 +67,6 @@ provideWidgetTree(toRef(props, 'ast'), layoutTransitions.active)
   display: flex;
   align-items: center;
 
-  & :deep(span) {
-    vertical-align: middle;
-  }
-
   &:has(.WidgetPort.newToConnect) {
     margin-left: calc(4px - var(--widget-port-extra-pad));
   }
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue
index 48a2040d1890..177f690bbc6b 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue
@@ -10,6 +10,21 @@ const props = defineProps(widgetProps(widgetDefinition))
 const targetMaybePort = computed(() =>
   props.input.target instanceof Ast.Ast ? new ForcePort(props.input.target) : props.input.target,
 )
+
+const appClass = computed(() => {
+  return props.input.infixOperator != null ? 'infix' : 'prefix'
+})
+
+const operatorStyle = computed(() => {
+  if (props.input.appTree instanceof Ast.OprApp) {
+    const [_lhs, opr, rhs] = props.input.appTree.concreteChildren()
+    return {
+      '--whitespace-pre': `${JSON.stringify(opr?.whitespace ?? '')}`,
+      '--whitespace-post': `${JSON.stringify(rhs?.whitespace ?? '')}`,
+    }
+  }
+  return {}
+})
 </script>
 
 <script lang="ts">
@@ -19,19 +34,39 @@ export const widgetDefinition = defineWidget(ArgumentApplication, {
 </script>
 
 <template>
-  <span class="WidgetApplication">
+  <span class="WidgetApplication" :class="appClass">
     <NodeWidget :input="targetMaybePort" />
-    <NodeWidget v-if="props.input.infixOperator" :input="props.input.infixOperator" />
+    <div v-if="props.input.infixOperator" class="infixOp" :style="operatorStyle">
+      <NodeWidget :input="props.input.infixOperator" />
+    </div>
     <NodeWidget :input="props.input.argument" :dynamicConfig="props.config" />
   </span>
 </template>
 
 <style>
 .WidgetApplication {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: center;
-  gap: 4px;
+  &.prefix {
+    gap: 4px;
+  }
+}
+
+.infixOp {
+  display: flex;
+
+  &:before {
+    content: var(--whitespace-pre);
+    display: inline;
+    white-space: pre;
+  }
+
+  &:after {
+    content: var(--whitespace-post);
+    display: inline;
+    white-space: pre;
+  }
 }
 </style>
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetArgumentName.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetArgumentName.vue
index 154052e983cc..37b0014c7528 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetArgumentName.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetArgumentName.vue
@@ -11,7 +11,9 @@ const portInfo = injectPortInfo(true)
 const showArgumentValue = computed(() => {
   return (
     props.input instanceof ArgumentAst &&
-    (portInfo == null || !portInfo.connected || portInfo.portId !== props.input.ast.astId)
+    (portInfo == null ||
+      !portInfo.connected ||
+      (portInfo.portId as string) !== (props.input.ast.exprId as string))
   )
 })
 
@@ -32,16 +34,22 @@ export const widgetDefinition = defineWidget([ArgumentPlaceholder, ArgumentAst],
 </script>
 
 <template>
-  <span class="WidgetArgumentName" :class="{ placeholder, primary }">
+  <div class="WidgetArgumentName" :class="{ placeholder, primary }">
     <template v-if="showArgumentValue">
       <span class="value">{{ props.input.info!.name }}</span
       ><NodeWidget :input="props.input" />
     </template>
     <template v-else>{{ props.input.info!.name }}</template>
-  </span>
+  </div>
 </template>
 
 <style scoped>
+.WidgetArgumentName {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .placeholder,
 .value {
   color: rgb(255 255 255 / 0.5);
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetBlank.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetBlank.vue
index c3d9e2a5e4f0..6fa4e10e0c00 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetBlank.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetBlank.vue
@@ -5,7 +5,7 @@ const _props = defineProps(widgetProps(widgetDefinition))
 </script>
 
 <script lang="ts">
-export const widgetDefinition = defineWidget((ast) => ast instanceof Ast.Wildcard, {
+export const widgetDefinition = defineWidget(Ast.Wildcard, {
   priority: 10,
   score: Score.Good,
 })
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetCheckbox.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetCheckbox.vue
index 15b39d485b18..42cc0c2803ec 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetCheckbox.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetCheckbox.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import CheckboxWidget from '@/components/widgets/CheckboxWidget.vue'
 import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
-import { useGraphStore } from '@/stores/graph'
 import { Ast } from '@/util/ast'
 import { computed } from 'vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
 
-const graph = useGraphStore()
 const value = computed({
   get() {
     return props.input.code().endsWith('True') ?? false
@@ -15,7 +13,7 @@ const value = computed({
   set(value) {
     const node = getRawBoolNode(props.input)
     if (node != null) {
-      graph.setExpressionContent(node.astId, value ? 'True' : 'False')
+      props.onUpdate(value ? 'True' : 'False', node.exprId)
     }
   },
 })
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
index 69ffefce9091..f3d63c20dca9 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import NodeWidget from '@/components/GraphEditor/NodeWidget.vue'
 import { injectFunctionInfo, provideFunctionInfo } from '@/providers/functionInfo'
+import type { PortId } from '@/providers/portInfo'
 import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
 import { widgetConfigurationSchema } from '@/providers/widgetRegistry/configuration'
 import { useGraphStore } from '@/stores/graph'
 import { useProjectStore, type NodeVisualizationConfiguration } from '@/stores/project'
+import { assert, assertUnreachable } from '@/util/assert'
 import { Ast } from '@/util/ast'
-import { ArgumentApplication } from '@/util/callTree'
+import { ArgumentApplication, ArgumentAst, ArgumentPlaceholder } from '@/util/callTree'
 import type { Opt } from '@/util/data/opt'
 import type { ExprId } from 'shared/yjsModel'
 import { computed, proxyRefs } from 'vue'
@@ -17,15 +19,13 @@ const project = useProjectStore()
 
 provideFunctionInfo(
   proxyRefs({
-    callId: computed(() => props.input.astId),
+    callId: computed(() => props.input.exprId),
   }),
 )
 
 const methodCallInfo = computed(() => {
   const input: Ast.Ast = props.input
-  const astId = input.astId
-  if (astId == null) return null
-  return graph.db.getMethodCallInfo(astId)
+  return graph.db.getMethodCallInfo(input.exprId)
 })
 
 const interpreted = computed(() => {
@@ -33,14 +33,13 @@ const interpreted = computed(() => {
 })
 
 const application = computed(() => {
-  const analyzed = interpreted.value
-  if (!analyzed) return props.input
-  const noArgsCall =
-    analyzed.kind === 'prefix' ? graph.db.getMethodCall(analyzed.func.astId) : undefined
+  const call = interpreted.value
+  if (!call) return props.input
+  const noArgsCall = call.kind === 'prefix' ? graph.db.getMethodCall(call.func.exprId) : undefined
 
   const info = methodCallInfo.value
   return ArgumentApplication.FromInterpretedWithInfo(
-    analyzed,
+    call,
     noArgsCall,
     info?.methodCall,
     info?.suggestion,
@@ -54,19 +53,19 @@ const escapeString = (str: string): string => {
 }
 const makeArgsList = (args: string[]) => '[' + args.map(escapeString).join(', ') + ']'
 
-const selfArgumentAstId = computed<Opt<ExprId>>(() => {
+const selfArgumentExprId = computed<Opt<ExprId>>(() => {
   const analyzed = ArgumentApplication.Interpret(props.input, true)
   if (analyzed.kind === 'infix') {
-    return analyzed.lhs?.astId
+    return analyzed.lhs?.exprId
   } else {
-    return analyzed.args[0]?.argument.astId
+    return analyzed.args[0]?.argument.exprId
   }
 })
 
 const visualizationConfig = computed<Opt<NodeVisualizationConfiguration>>(() => {
   const tree = props.input
-  const expressionId = selfArgumentAstId.value
-  const astId = tree.astId
+  const expressionId = selfArgumentExprId.value
+  const astId = tree.exprId
   if (astId == null || expressionId == null) return null
   const info = graph.db.getMethodCallInfo(astId)
   if (!info) return null
@@ -96,41 +95,134 @@ const widgetConfiguration = computed(() => {
       console.error('Unable to parse widget configuration.', data, parseResult.error)
     }
   }
-  return null
+  return undefined
 })
+
+/**
+ * Process an argument value update. Takes care of inserting assigned placeholder values, as well as
+ * handling deletions of arguments and rewriting the applications to named as appropriate.
+ *
+ * FIXME: This method has to be rewritten usign AST manipulation instead of string concatenation
+ * once AST updates are implemented. Depends on #8367
+ */
+function handleArgUpdate(value: unknown, origin: PortId): boolean {
+  const app = application.value
+  if (app instanceof ArgumentApplication) {
+    // Find the updated argument by matching origin port/expression with the appropriate argument.
+    // We are insterested only in updates at the top level of the argument AST. Updates from nested
+    // widgets do not need to be processed at the function application level.
+    const argApp = [...app.iterApplications()].find(
+      (app) => 'portId' in app.argument && app.argument.portId === origin,
+    )
+
+    // Perform appropriate AST update, either insertion or deletion.
+    if (value != null && argApp?.argument instanceof ArgumentPlaceholder) {
+      /* Case: Inserting value to a placeholder. */
+      const codeToInsert = value instanceof Ast.Ast ? value.repr() : value
+      const argCode = argApp.argument.insertAsNamed
+        ? `${argApp.argument.info.name}=${codeToInsert}`
+        : codeToInsert
+
+      // FIXME[#8367]: Create proper application AST instead of concatenating strings.
+      props.onUpdate(`${argApp.appTree.repr()} ${argCode}`, argApp.appTree.exprId)
+      return true
+    } else if (value == null && argApp?.argument instanceof ArgumentAst) {
+      /* Case: Removing existing argument. */
+
+      if (argApp.appTree instanceof Ast.App && argApp.appTree.argumentName != null) {
+        /* Case: Removing named prefix argument. */
+
+        // Named argument can always be removed immediately. Replace the whole application with its
+        // target, effectively removing the argument from the call.
+        props.onUpdate(argApp.appTree.function, argApp.appTree.exprId)
+        return true
+      } else if (value == null && argApp.appTree instanceof Ast.OprApp) {
+        /* Case: Removing infix application. */
+
+        // Infix application is removed as a whole. Only the target is kept.
+        if (argApp.appTree.lhs) {
+          props.onUpdate(argApp.appTree.lhs, argApp.appTree.exprId)
+        }
+        return true
+      } else if (argApp.appTree instanceof Ast.App && argApp.appTree.argumentName == null) {
+        /* Case: Removing positional prefix argument. */
+
+        // Since the update of this kind can affect following arguments, it is necessary to
+        // construct the new AST for the whole application in order to update it. Because we lack
+        // the ability to do AST manipulation directly, we are forced to do it by string operations.
+        // FIXME[#8367]: Edit application AST instead of concatenating strings.
+        let newRepr = ''
+
+        // Traverse the application chain, starting from the outermost application and going
+        // towards the innermost target.
+        for (let innerApp of app.iterApplications()) {
+          if (innerApp === argApp) {
+            // Found the application with the argument to remove. Skip the argument and use the
+            // application target's code. This is the final iteration of the loop.
+            newRepr = `${argApp.appTree.function.repr().trimEnd()} ${newRepr.trimStart()}`
+            // Perform the actual update, since we already have the whole new application code
+            // collected.
+            props.onUpdate(newRepr, app.appTree.exprId)
+            return true
+          } else {
+            // Process an argument to the right of the removed argument.
+            assert(innerApp.appTree instanceof Ast.App)
+            const argRepr = innerApp.appTree
+              .repr()
+              .substring(innerApp.appTree.function.repr().length)
+              .trim()
+            if (
+              innerApp.argument instanceof ArgumentAst &&
+              innerApp.appTree.argumentName == null &&
+              innerApp.argument.info != null
+            ) {
+              // Positional arguments following the deleted argument must all be rewritten to named.
+              newRepr = `${innerApp.argument.info.name}=${argRepr} ${newRepr.trimStart()}`
+            } else {
+              // All other arguments are copied as-is.
+              newRepr = `${argRepr} ${newRepr.trimStart()}`
+            }
+          }
+        }
+        assertUnreachable()
+      } else if (value == null && argApp.argument instanceof ArgumentPlaceholder) {
+        /* Case: Removing placeholder value. */
+        // Do nothing. The argument already doesn't exist, so there is nothing to update.
+        return true
+      } else {
+        // Any other case is handled by the default handler.
+        return false
+      }
+    }
+  }
+  return false
+}
 </script>
 <script lang="ts">
-export const widgetDefinition = defineWidget(
-  (ast) => ast instanceof Ast.App || ast instanceof Ast.Ident || ast instanceof Ast.OprApp,
-  {
-    priority: -10,
-    score: (props, db) => {
-      const ast = props.input
-      if (ast.astId == null) return Score.Mismatch
-      const prevFunctionState = injectFunctionInfo(true)
-
-      // It is possible to try to render the same function application twice, e.g. when detected an
-      // application with no arguments applied yet, but the application target is also an infix call.
-      // In that case, the reentrant call method info must be ignored to not create an infinite loop,
-      // and to resolve the infix call as its own application.
-      if (prevFunctionState?.callId === ast.astId) return Score.Mismatch
-
-      if (ast instanceof Ast.App || ast instanceof Ast.OprApp) return Score.Perfect
-
-      const info = db.getMethodCallInfo(ast.astId)
-      if (
-        prevFunctionState != null &&
-        info?.staticallyApplied === true &&
-        ast instanceof Ast.Ident
-      ) {
-        return Score.Mismatch
-      }
-      return info != null ? Score.Perfect : Score.Mismatch
-    },
+export const widgetDefinition = defineWidget([Ast.App, Ast.Ident, Ast.OprApp], {
+  priority: -10,
+  score: (props, db) => {
+    const ast = props.input
+    if (ast.exprId == null) return Score.Mismatch
+    const prevFunctionState = injectFunctionInfo(true)
+
+    // It is possible to try to render the same function application twice, e.g. when detected an
+    // application with no arguments applied yet, but the application target is also an infix call.
+    // In that case, the reentrant call method info must be ignored to not create an infinite loop,
+    // and to resolve the infix call as its own application.
+    if (prevFunctionState?.callId === ast.exprId) return Score.Mismatch
+
+    if (ast instanceof Ast.App || ast instanceof Ast.OprApp) return Score.Perfect
+
+    const info = db.getMethodCallInfo(ast.exprId)
+    if (prevFunctionState != null && info?.staticallyApplied === true && ast instanceof Ast.Ident) {
+      return Score.Mismatch
+    }
+    return info != null ? Score.Perfect : Score.Mismatch
   },
-)
+})
 </script>
 
 <template>
-  <NodeWidget :input="application" :dynamicConfig="widgetConfiguration" />
+  <NodeWidget :input="application" :dynamicConfig="widgetConfiguration" @update="handleArgUpdate" />
 </template>
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetHierarchy.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetHierarchy.vue
index 8fa7ecdf1cfd..8153f1c0280d 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetHierarchy.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetHierarchy.vue
@@ -29,38 +29,30 @@ function transformChild(child: WidgetInput) {
 </script>
 
 <script lang="ts">
-export const widgetDefinition = defineWidget((expression) => expression instanceof Ast.Ast, {
+export const widgetDefinition = defineWidget(Ast.Ast, {
   priority: 1001,
 })
 </script>
 
 <template>
-  <span :class="['Tree', spanClass]"
-    ><NodeWidget
+  <div class="WidgetHierarchy" :class="spanClass">
+    <NodeWidget
       v-for="(child, index) in children"
-      :key="child.astId ?? index"
+      :key="child.exprId ?? index"
       :input="transformChild(child)"
     />
-  </span>
+  </div>
 </template>
 
 <style scoped>
-.Tree {
-  white-space: pre;
+.WidgetHierarchy {
+  display: flex;
+  flex-direction: row;
   align-items: center;
   transition: background 0.2s ease;
-  min-height: 24px;
-  display: inline-block;
 
   &.Literal {
     font-weight: bold;
   }
-
-  &.port {
-    background-color: var(--node-color-port);
-    border-radius: var(--node-border-radius);
-    margin: -2px -4px;
-    padding: 2px 4px;
-  }
 }
 </style>
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetNumber.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetNumber.vue
index aa148dbe3c38..4fc78bd83640 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetNumber.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetNumber.vue
@@ -1,26 +1,23 @@
 <script setup lang="ts">
 import SliderWidget from '@/components/widgets/SliderWidget.vue'
 import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
-import { useGraphStore } from '@/stores/graph'
 import { Ast } from '@/util/ast'
 import { computed } from 'vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
-const graph = useGraphStore()
 const value = computed({
   get() {
-    return parseFloat(props.input.code() ?? '')
+    return parseFloat(props.input.code())
   },
   set(value) {
-    const id = props.input.astId
-    if (id) graph.setExpressionContent(id, value.toString())
+    props.onUpdate(value.toString(), props.input.exprId)
   },
 })
 </script>
 
 <script lang="ts">
 export const widgetDefinition = defineWidget(
-  (input) =>
+  (input): input is Ast.NumericLiteral | Ast.NegationOprApp =>
     input instanceof Ast.NumericLiteral ||
     (input instanceof Ast.NegationOprApp && input.argument instanceof Ast.NumericLiteral),
   {
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue
index 4f7097986e44..fa20662636a6 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue
@@ -4,18 +4,19 @@ import { useRaf } from '@/composables/animation'
 import { useResizeObserver } from '@/composables/events'
 import { injectGraphNavigator } from '@/providers/graphNavigator'
 import { injectGraphSelection } from '@/providers/graphSelection'
-import { ForcePort, injectPortInfo, providePortInfo } from '@/providers/portInfo'
+import { ForcePort, injectPortInfo, providePortInfo, type PortId } from '@/providers/portInfo'
 import type { WidgetInput } from '@/providers/widgetRegistry'
 import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
 import { injectWidgetTree } from '@/providers/widgetTree'
-import { useGraphStore } from '@/stores/graph'
+import { PortViewInstance, useGraphStore } from '@/stores/graph'
 import { Ast } from '@/util/ast'
 import { ArgumentAst, ArgumentPlaceholder } from '@/util/callTree'
 import { Rect } from '@/util/data/rect'
+import { cachedGetter } from '@/util/reactivity'
 import { uuidv4 } from 'lib0/random'
-import type { ExprId } from 'shared/yjsModel'
 import {
   computed,
+  markRaw,
   nextTick,
   onUpdated,
   proxyRefs,
@@ -59,41 +60,42 @@ watchEffect((onCleanup) => {
 // when any of following conditions are met:
 // 1. The expression can be connected to and is currently being hovered.
 // 2. The expression is already used as an existing edge endpoint.
-//
-// TODO: This should part of the `WidgetPort` component. But first, we need to make sure that the
-// ports are always created when necessary.
 const portRect = shallowRef<Rect>()
-const isRectUpdateUseful = computed(() => isHovered.value || hasConnection.value)
 
-const randomUuid = uuidv4() as ExprId
+const randomUuid = uuidv4() as PortId
+// Since the port ID computation has many dependencies but rarely changes its final output, store
+// its result in an intermediate ref, and update it only when the value actually changes. That way
+// effects depending on the port ID value will not be re-triggered unnecessarily.
+const portId = cachedGetter<PortId>(() => {
+  return portIdOfInput(props.input) ?? (`RAND-${randomUuid}` as PortId)
+})
+
 const innerWidget = computed(() =>
-  props.input instanceof ForcePort ? props.input.ast : props.input,
+  props.input instanceof ForcePort ? props.input.inner : props.input,
 )
-const ast = computed(() =>
-  props.input instanceof Ast.Ast
-    ? props.input
-    : props.input instanceof ArgumentAst || props.input instanceof ForcePort
-    ? props.input.ast
-    : undefined,
-)
-const portId = computed(() => ast.value?.astId ?? randomUuid)
 
+providePortInfo(
+  proxyRefs({
+    portId,
+    connected: hasConnection,
+  }),
+)
 providePortInfo(proxyRefs({ portId, connected: hasConnection }))
 
 watch(nodeSize, updateRect)
 onUpdated(() => nextTick(updateRect))
 useRaf(toRef(tree, 'hasActiveAnimations'), updateRect)
 
-watch(
-  () => [portId.value, portRect.value, isRectUpdateUseful.value] as const,
-  ([id, rect, updateUseful], _, onCleanup) => {
-    if (id != null && rect != null && updateUseful) {
-      graph.updateExprRect(id, rect)
-      onCleanup(() => {
-        if (portId.value === id && rect === portRect.value) graph.updateExprRect(id, undefined)
-      })
-    }
+const randSlice = randomUuid.slice(0, 4)
+
+watchEffect(
+  (onCleanup) => {
+    const id = portId.value
+    const instance = markRaw(new PortViewInstance(portRect, tree.nodeId, props.onUpdate))
+    graph.addPortInstance(id, instance)
+    onCleanup(() => graph.removePortInstance(id, instance))
   },
+  { flush: 'post' },
 )
 
 function updateRect() {
@@ -112,6 +114,16 @@ function updateRect() {
 </script>
 
 <script lang="ts">
+function portIdOfInput(input: unknown): PortId | undefined {
+  return input instanceof Ast.Ast
+    ? (input.exprId as string as PortId)
+    : input instanceof ForcePort
+    ? (input.inner.exprId as string as PortId)
+    : input instanceof ArgumentPlaceholder || input instanceof ArgumentAst
+    ? input.portId
+    : undefined
+}
+
 export const widgetDefinition = defineWidget(
   [
     ForcePort,
@@ -131,11 +143,7 @@ export const widgetDefinition = defineWidget(
     priority: 0,
     score: (props, _db) => {
       const portInfo = injectPortInfo(true)
-      if (
-        portInfo != null &&
-        props.input instanceof Ast.Ast &&
-        portInfo.portId === props.input.astId
-      ) {
+      if (portInfo != null && portInfo.portId === portIdOfInput(props.input)) {
         return Score.Mismatch
       } else {
         return Score.Perfect
@@ -146,7 +154,7 @@ export const widgetDefinition = defineWidget(
 </script>
 
 <template>
-  <span
+  <div
     ref="rootNode"
     class="WidgetPort"
     :class="{
@@ -155,10 +163,13 @@ export const widgetDefinition = defineWidget(
       newToConnect: !hasConnection && isCurrentEdgeHoverTarget,
       primary: props.nesting < 2,
     }"
+    :data-id="portId"
+    :data-h="randSlice"
     @pointerenter="isHovered = true"
     @pointerleave="isHovered = false"
-    ><NodeWidget :input="innerWidget" :dynamicConfig="props.config"
-  /></span>
+  >
+    <NodeWidget :input="innerWidget" :dynamicConfig="props.config" />
+  </div>
 </template>
 
 <style scoped>
@@ -167,9 +178,11 @@ export const widgetDefinition = defineWidget(
 }
 
 .WidgetPort {
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   position: relative;
-  vertical-align: middle;
   text-align: center;
   border-radius: 12px;
   min-height: 24px;
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
index 461f8f16a1b9..cdcebd1db1d3 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
@@ -2,13 +2,11 @@
 import NodeWidget from '@/components/GraphEditor/NodeWidget.vue'
 import DropdownWidget from '@/components/widgets/DropdownWidget.vue'
 import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
-import { useGraphStore } from '@/stores/graph'
 import { ArgumentAst, ArgumentPlaceholder } from '@/util/callTree'
 import { qnJoin, qnSegments, tryQualifiedName } from '@/util/qualifiedName'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
-const graph = useGraphStore()
 
 /** Static selection entry, label and value are the same. */
 interface StaticTag {
@@ -58,33 +56,23 @@ const tagValues = computed(() => {
   return tags.value.map((tag) => (tag.kind == 'Static' ? tag.label : tag.value))
 })
 
-const rootElement = ref<HTMLElement>()
-const parentColor = ref<string>()
-
-onMounted(async () => {
-  await nextTick()
-  if (rootElement.value != null) {
-    parentColor.value = getComputedStyle(rootElement.value).getPropertyValue('--node-color-primary')
-  }
-})
-
 const selectedIndex = ref<number>()
 const selectedValue = computed(() => {
   if (selectedIndex.value == null) return props.input.info?.defaultValue ?? ''
   return tagValues.value[selectedIndex.value] ?? ''
 })
-const selectedLabel = computed(() => {
-  if (selectedIndex.value == null) return props.input.info?.defaultValue ?? ''
-  return tagLabels.value[selectedIndex.value] ?? ''
-})
 const showDropdownWidget = ref(false)
 
+function toggleDropdownWidget() {
+  showDropdownWidget.value = !showDropdownWidget.value
+}
+
 // When the selected index changes, we update the expression content.
 watch(selectedIndex, (_index) => {
   // TODO: Handle the case for ArgumentPlaceholder once the AST has been updated,
-  const id = props.input instanceof ArgumentAst ? props.input.ast.astId : undefined
+  const id = props.input instanceof ArgumentAst ? props.input.ast.exprId : undefined
   const expression = selectedValue.value ?? ''
-  if (id) graph.setExpressionContent(id, expression)
+  if (id) props.onUpdate(expression, id)
   showDropdownWidget.value = false
 })
 </script>
@@ -103,34 +91,23 @@ export const widgetDefinition = defineWidget([ArgumentPlaceholder, ArgumentAst],
 </script>
 
 <template>
-  <div ref="rootElement" class="WidgetRoot">
-    <span
-      class="SelectionWidgetArgumentValue"
-      @pointerdown="showDropdownWidget = !showDropdownWidget"
-    >
-      <NodeWidget :input="props.input" />
-      <template v-if="props.input instanceof ArgumentPlaceholder">
-        <span class="SelectionWidgetArgumentValue"> {{ selectedValue }} </span>
-      </template>
-    </span>
-    <div class="SelectionWidgetSingleChoice">
-      <DropdownWidget
-        v-if="showDropdownWidget"
-        :color="parentColor ?? 'white'"
-        :values="tagLabels"
-        :selectedValue="selectedLabel"
-        @click="selectedIndex = $event"
-      />
-    </div>
+  <div class="WidgetSelection" @pointerdown="toggleDropdownWidget">
+    <NodeWidget :input="props.input" />
+    <DropdownWidget
+      v-if="showDropdownWidget"
+      class="dropdownContainer"
+      :color="'var(--node-color-primary)'"
+      :values="tagLabels"
+      :selectedValue="selectedValue"
+      @pointerdown.stop
+      @click="selectedIndex = $event"
+    />
   </div>
 </template>
+
 <style scoped>
-.SelectionWidgetArgumentValue {
-  margin-left: 8px;
-}
-.SelectionWidgetSingleChoice {
-  position: absolute;
-  top: 100%;
-  margin-top: 4px;
+.WidgetSelection {
+  display: flex;
+  flex-direction: row;
 }
 </style>
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetToken.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetToken.vue
index a16971bc8e17..ee7f93391014 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetToken.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetToken.vue
@@ -5,8 +5,6 @@ import { computed, ref } from 'vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
 
-const rootNode = ref<HTMLElement>()
-
 const spanClass = computed(() => props.input.typeName())
 const repr = computed(() => props.input.code())
 </script>
@@ -19,14 +17,14 @@ export const widgetDefinition = defineWidget((expression) => expression instance
 </script>
 
 <template>
-  <span ref="rootNode" :class="['Token', spanClass]">{{ repr }}</span>
+  <span class="WidgetToken" :class="spanClass">{{ repr }}</span>
 </template>
 
 <style scoped>
-.Token {
-  color: white;
+.WidgetToken {
+  display: inline-block;
+  vertical-align: middle;
   white-space: pre;
-  align-items: center;
   color: rgb(255 255 255 / 0.33);
 
   &.Ident,
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetVector.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetVector.vue
index d83c783bdbf5..a666a0c4671d 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetVector.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetVector.vue
@@ -3,15 +3,12 @@ import NodeWidget from '@/components/GraphEditor/NodeWidget.vue'
 import ListWidget from '@/components/widgets/ListWidget.vue'
 import { injectGraphNavigator } from '@/providers/graphNavigator'
 import { ForcePort } from '@/providers/portInfo'
-import type { WidgetInput } from '@/providers/widgetRegistry'
 import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
-import { useGraphStore } from '@/stores/graph'
 import { Ast, RawAst } from '@/util/ast'
 import { computed } from 'vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
 
-const graph = useGraphStore()
 const value = computed({
   get() {
     return Array.from(props.input.children()).filter(
@@ -20,18 +17,18 @@ const value = computed({
   },
   set(value) {
     const newCode = `[${value.map((item) => item.code()).join(', ')}]`
-    graph.setExpressionContent(props.input.astId, newCode)
+    props.onUpdate(newCode, props.input.exprId)
   },
 })
 
 const navigator = injectGraphNavigator(true)
-</script>
 
-<script lang="ts">
-function forcePort(item: WidgetInput) {
-  return item instanceof Ast.Ast ? new ForcePort(item) : item
+function itemPort(item: Ast.Ast) {
+  return new ForcePort(item)
 }
+</script>
 
+<script lang="ts">
 export const widgetDefinition = defineWidget(Ast.Ast, {
   priority: 1000,
   score: (props) =>
@@ -43,7 +40,7 @@ export const widgetDefinition = defineWidget(Ast.Ast, {
   <ListWidget
     v-model="value"
     :default="Ast.Wildcard.new"
-    :getKey="(item: Ast.Ast) => item.astId"
+    :getKey="(item: Ast.Ast) => item.exprId"
     dragMimeType="application/x-enso-ast-node"
     :toPlainText="(item: Ast.Ast) => item.code()"
     :toDragPayload="(ast: Ast.Ast) => ast.serialize()"
@@ -53,15 +50,7 @@ export const widgetDefinition = defineWidget(Ast.Ast, {
     contenteditable="false"
   >
     <template #default="{ item }">
-      <NodeWidget :input="forcePort(item)" />
+      <NodeWidget :input="itemPort(item)" />
     </template>
   </ListWidget>
 </template>
-
-<style scoped>
-.drag-preview {
-  position: fixed;
-  background-color: var(--node-color-primary);
-  border-radius: var(--node-border-radius);
-}
-</style>
diff --git a/app/gui2/src/components/widgets/DropdownWidget.vue b/app/gui2/src/components/widgets/DropdownWidget.vue
index 934d9c12213f..f59ac67cd12b 100644
--- a/app/gui2/src/components/widgets/DropdownWidget.vue
+++ b/app/gui2/src/components/widgets/DropdownWidget.vue
@@ -72,7 +72,7 @@ const NEXT_SORT_DIRECTION: Record<SortDirection, SortDirection> = {
 .Dropdown {
   position: absolute;
   top: 100%;
-  margin-top: 4px;
+  margin-top: 8px;
   height: 136px;
 }
 
diff --git a/app/gui2/src/components/widgets/ListWidget.vue b/app/gui2/src/components/widgets/ListWidget.vue
index c8d9c30957c2..eee82f9771df 100644
--- a/app/gui2/src/components/widgets/ListWidget.vue
+++ b/app/gui2/src/components/widgets/ListWidget.vue
@@ -425,6 +425,12 @@ watchPostEffect(() => {
 </template>
 
 <style scoped>
+.VectorWidget {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .VectorWidget.animate {
   .placeholder {
     display: flex;
@@ -470,10 +476,14 @@ div {
 
 .items {
   display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
 }
 
 .item {
   display: flex;
+  flex-direction: row;
   align-items: center;
 }
 
@@ -485,11 +495,7 @@ div {
 
 .token {
   color: rgb(255 255 255 / 0.33);
-  vertical-align: middle;
-  align-items: center;
-  display: inline-flex;
   user-select: none;
-  height: 24px;
 }
 
 .drop-area {
diff --git a/app/gui2/src/composables/selection.ts b/app/gui2/src/composables/selection.ts
index 2749342ca0bd..91fbcbe10571 100644
--- a/app/gui2/src/composables/selection.ts
+++ b/app/gui2/src/composables/selection.ts
@@ -3,6 +3,7 @@
 import { selectionMouseBindings } from '@/bindings'
 import { usePointer } from '@/composables/events'
 import type { NavigatorComposable } from '@/composables/navigator'
+import type { PortId } from '@/providers/portInfo.ts'
 import type { Rect } from '@/util/data/rect'
 import type { Vec2 } from '@/util/data/vec2'
 import { type ExprId } from 'shared/yjsModel'
@@ -22,7 +23,7 @@ export function useSelection<T>(
   const initiallySelected = new Set<T>()
   const selected = reactive(new Set<T>())
   const hoveredNode = ref<ExprId>()
-  const hoveredPorts = reactive(new Set<ExprId>())
+  const hoveredPorts = reactive(new Set<PortId>())
   const hoveredPort = computed(() => [...hoveredPorts].pop())
 
   function readInitiallySelected() {
@@ -136,8 +137,8 @@ export function useSelection<T>(
     hoveredPort,
     mouseHandler: selectionEventHandler,
     events: pointer.events,
-    addHoveredPort: (port: ExprId) => hoveredPorts.add(port),
-    removeHoveredPort: (port: ExprId) => hoveredPorts.delete(port),
+    addHoveredPort: (port: PortId) => hoveredPorts.add(port),
+    removeHoveredPort: (port: PortId) => hoveredPorts.delete(port),
   })
 }
 
diff --git a/app/gui2/src/providers/portInfo.ts b/app/gui2/src/providers/portInfo.ts
index 7926d4bc2ea6..1aaa6db717b4 100644
--- a/app/gui2/src/providers/portInfo.ts
+++ b/app/gui2/src/providers/portInfo.ts
@@ -2,9 +2,13 @@ import { createContextStore } from '@/providers'
 import { GetUsageKey } from '@/providers/widgetUsageInfo'
 import { Ast } from '@/util/ast'
 import { identity } from '@vueuse/core'
+import type { ExprId } from 'shared/yjsModel'
+
+declare const portIdBrand: unique symbol
+export type PortId = ExprId | (string & { [portIdBrand]: never })
 
 interface PortInfo {
-  portId: string
+  portId: PortId
   connected: boolean
 }
 
@@ -16,10 +20,17 @@ const { provideFn, injectFn } = createContextStore('Port info', identity<PortInf
  * even if it wouldn't normally be rendered as such.
  */
 export class ForcePort {
-  constructor(public ast: Ast.Ast) {
-    if (ast instanceof ForcePort) throw new Error('ForcePort cannot be nested')
+  constructor(public inner: Ast.Ast) {
+    if (inner instanceof ForcePort) throw new Error('ForcePort cannot be nested')
   }
   [GetUsageKey]() {
-    return this.ast
+    return this.inner
+  }
+}
+
+declare const ForcePortKey: unique symbol
+declare module '@/providers/widgetRegistry' {
+  export interface WidgetInputTypes {
+    [ForcePortKey]: ForcePort
   }
 }
diff --git a/app/gui2/src/providers/widgetRegistry.ts b/app/gui2/src/providers/widgetRegistry.ts
index 1ae78c3a4518..78a116fced73 100644
--- a/app/gui2/src/providers/widgetRegistry.ts
+++ b/app/gui2/src/providers/widgetRegistry.ts
@@ -1,4 +1,5 @@
 import { createContextStore } from '@/providers'
+import type { PortId } from '@/providers/portInfo'
 import { type WidgetConfiguration } from '@/providers/widgetRegistry/configuration'
 import type { GraphDb } from '@/stores/graph/graphDatabase'
 import { computed, shallowReactive, type Component, type PropType } from 'vue'
@@ -77,6 +78,10 @@ export function widgetProps<T extends WidgetInput>(_def: WidgetDefinition<T>) {
     },
     config: { type: Object as PropType<WidgetConfiguration | undefined>, required: false },
     nesting: { type: Number, required: true },
+    onUpdate: {
+      type: Function as PropType<(value: unknown | undefined, origin: PortId) => void>,
+      required: true,
+    },
   } as const
 }
 
diff --git a/app/gui2/src/providers/widgetTree.ts b/app/gui2/src/providers/widgetTree.ts
index e47950a90c14..9a4e75c3505b 100644
--- a/app/gui2/src/providers/widgetTree.ts
+++ b/app/gui2/src/providers/widgetTree.ts
@@ -6,7 +6,7 @@ export { injectFn as injectWidgetTree, provideFn as provideWidgetTree }
 const { provideFn, injectFn } = createContextStore(
   'Widget tree',
   (astRoot: Ref<Ast.Ast>, hasActiveAnimations: Ref<boolean>) => {
-    const nodeId = computed(() => astRoot.value.astId)
+    const nodeId = computed(() => astRoot.value.exprId)
     const nodeSpanStart = computed(() => astRoot.value.astExtended!.span()[0])
     return proxyRefs({ astRoot, nodeId, nodeSpanStart, hasActiveAnimations })
   },
diff --git a/app/gui2/src/providers/widgetUsageInfo.ts b/app/gui2/src/providers/widgetUsageInfo.ts
index c9288d394b35..2da5665101a9 100644
--- a/app/gui2/src/providers/widgetUsageInfo.ts
+++ b/app/gui2/src/providers/widgetUsageInfo.ts
@@ -1,4 +1,5 @@
 import { createContextStore } from '@/providers'
+import type { PortId } from '@/providers/portInfo'
 import type { WidgetComponent, WidgetInput } from '@/providers/widgetRegistry'
 import { identity } from '@vueuse/core'
 
@@ -21,6 +22,7 @@ interface WidgetUsageInfo {
   usageKey: unknown
   /** All widget types that were rendered so far using the same AST node. */
   previouslyUsed: Set<WidgetComponent<any>>
+  updateHandler: (value: unknown, origin: PortId) => void
   nesting: number
 }
 
diff --git a/app/gui2/src/stores/graph/graphDatabase.ts b/app/gui2/src/stores/graph/graphDatabase.ts
index d2aa209fb4eb..29496339b08f 100644
--- a/app/gui2/src/stores/graph/graphDatabase.ts
+++ b/app/gui2/src/stores/graph/graphDatabase.ts
@@ -1,3 +1,4 @@
+import type { PortId } from '@/providers/portInfo'
 import { ComputedValueRegistry, type ExpressionInfo } from '@/stores/project/computedValueRegistry'
 import { SuggestionDb, groupColorStyle, type Group } from '@/stores/suggestionDatabase'
 import type { SuggestionEntry } from '@/stores/suggestionDatabase/entry'
@@ -137,7 +138,7 @@ export class GraphDb {
     // Display connection starting from existing node.
     //TODO[ao]: When implementing input nodes, they should be taken into account here.
     if (srcNode == null) return []
-    function* allTargets(db: GraphDb): Generator<[ExprId, ExprId]> {
+    function* allTargets(db: GraphDb): Generator<[ExprId, PortId]> {
       for (const usage of info.usages) {
         const targetNode = db.getExpressionNodeId(usage)
         // Display only connections to existing targets and different than source node
@@ -153,8 +154,8 @@ export class GraphDb {
     if (entry.pattern == null) return []
     const ports = new Set<ExprId>()
     entry.pattern.visitRecursive((ast) => {
-      if (this.bindings.bindings.has(ast.astId)) {
-        ports.add(ast.astId)
+      if (this.bindings.bindings.has(ast.exprId)) {
+        ports.add(ast.exprId)
         return false
       }
       return true
@@ -253,7 +254,7 @@ export class GraphDb {
     const currentNodeIds = new Set<ExprId>()
     for (const nodeAst of functionAst_.bodyExpressions()) {
       const newNode = nodeFromAst(nodeAst)
-      const nodeId = newNode.rootSpan.astId
+      const nodeId = newNode.rootSpan.exprId
       const node = this.nodeIdToNode.get(nodeId)
       const nodeMeta = getMeta(nodeId)
       currentNodeIds.add(nodeId)
@@ -321,7 +322,7 @@ export class GraphDb {
       position: Vec2.Zero,
       vis: undefined,
     }
-    const bindingId = pattern.astId
+    const bindingId = pattern.exprId
     this.nodeIdToNode.set(id, node)
     this.bindings.bindings.set(bindingId, { identifier: binding, usages: new Set() })
     return node
diff --git a/app/gui2/src/stores/graph/index.ts b/app/gui2/src/stores/graph/index.ts
index 321b012d1bed..1a51a0d84ad6 100644
--- a/app/gui2/src/stores/graph/index.ts
+++ b/app/gui2/src/stores/graph/index.ts
@@ -1,4 +1,5 @@
 import { nonDictatedPlacement } from '@/components/ComponentBrowser/placement'
+import type { PortId } from '@/providers/portInfo'
 import { GraphDb } from '@/stores/graph/graphDatabase'
 import {
   filterOutRedundantImports,
@@ -16,6 +17,7 @@ import { useObserveYjs } from '@/util/crdt'
 import type { Opt } from '@/util/data/opt'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
+import { map, set } from 'lib0'
 import { defineStore } from 'pinia'
 import type { StackItem } from 'shared/languageServerTypes'
 import {
@@ -27,7 +29,7 @@ import {
   type VisualizationIdentifier,
   type VisualizationMetadata,
 } from 'shared/yjsModel'
-import { computed, markRaw, reactive, ref, toRef, watch, type Ref } from 'vue'
+import { computed, markRaw, reactive, ref, toRef, watch, type Ref, type ShallowRef } from 'vue'
 
 export { type Node } from '@/stores/graph/graphDatabase'
 
@@ -35,6 +37,15 @@ export interface NodeEditInfo {
   id: ExprId
   initialCursorPos: number
 }
+
+export class PortViewInstance {
+  constructor(
+    public rect: ShallowRef<Rect | undefined>,
+    public nodeId: ExprId,
+    public onUpdate: (value: unknown, origin: PortId) => void,
+  ) {}
+}
+
 export const useGraphStore = defineStore('graph', () => {
   const proj = useProjectStore()
   const suggestionDb = useSuggestionDbStore()
@@ -68,7 +79,7 @@ export const useGraphStore = defineStore('graph', () => {
   )
   const nodeRects = reactive(new Map<ExprId, Rect>())
   const vizRects = reactive(new Map<ExprId, Rect>())
-  const exprRects = reactive(new Map<ExprId, Rect>())
+  const portInstances = reactive(new Map<PortId, Set<PortViewInstance>>())
   const editedNodeInfo = ref<NodeEditInfo>()
   const imports = ref<{ import: Import; span: ContentRange }[]>([])
   const methodAst = ref<Ast.Function>()
@@ -141,7 +152,7 @@ export const useGraphStore = defineStore('graph', () => {
     const disconnectedEdgeTarget = unconnectedEdge.value?.disconnectedEdgeTarget
     const edges = []
     for (const [target, sources] of db.connections.allReverse()) {
-      if (target === disconnectedEdgeTarget) continue
+      if ((target as string as PortId) === disconnectedEdgeTarget) continue
       for (const source of sources) {
         edges.push({ source, target })
       }
@@ -233,7 +244,6 @@ export const useGraphStore = defineStore('graph', () => {
     if (!node) return
     proj.module?.doc.metadata.delete(node.outerExprId)
     nodeRects.delete(id)
-    node.pattern?.visitRecursive((ast) => exprRects.delete(ast.astId))
     const root = moduleRoot.value
     if (!root) {
       console.error(`BUG: Cannot delete node: No module root.`)
@@ -247,7 +257,7 @@ export const useGraphStore = defineStore('graph', () => {
   function setNodeContent(id: ExprId, content: string) {
     const node = db.nodeIdToNode.get(id)
     if (!node) return
-    setExpressionContent(node.rootSpan.astId, content)
+    setExpressionContent(node.rootSpan.exprId, content)
   }
 
   function setExpressionContent(id: ExprId, content: string) {
@@ -319,13 +329,15 @@ export const useGraphStore = defineStore('graph', () => {
     else vizRects.delete(id)
   }
 
-  function updateExprRect(id: ExprId, rect: Rect | undefined) {
-    const current = exprRects.get(id)
-    if (rect) {
-      if (!current || !current.equals(rect)) exprRects.set(id, rect)
-    } else {
-      if (current) exprRects.delete(id)
-    }
+  function addPortInstance(id: PortId, instance: PortViewInstance) {
+    map.setIfUndefined(portInstances, id, set.create).add(instance)
+  }
+
+  function removePortInstance(id: PortId, instance: PortViewInstance) {
+    const instances = portInstances.get(id)
+    if (!instances) return
+    instances.delete(instance)
+    if (instances.size === 0) portInstances.delete(id)
   }
 
   function setEditedNode(id: ExprId | null, cursorPosition: number | null) {
@@ -340,6 +352,34 @@ export const useGraphStore = defineStore('graph', () => {
     editedNodeInfo.value = { id, initialCursorPos: cursorPosition }
   }
 
+  function getPortPrimaryInstance(id: PortId): PortViewInstance | undefined {
+    const instances = portInstances.get(id)
+    return instances && set.first(instances)
+  }
+
+  /**
+   * Get the bounding rectangle of a port view, within the coordinate system of the node it belongs
+   * to. If the port is currently not connected or interacted with, `undefined` may be returned.
+   */
+  function getPortRelativeRect(id: PortId): Rect | undefined {
+    return getPortPrimaryInstance(id)?.rect.value
+  }
+
+  function getPortNodeId(id: PortId): ExprId | undefined {
+    return getPortPrimaryInstance(id)?.nodeId ?? db.getExpressionNodeId(id as string as ExprId)
+  }
+
+  /**
+   * Emit an value update to a port view under specific ID. Returns `true` if the port view is
+   * registered and the update was emitted, or `false` otherwise.
+   */
+  function updatePortValue(id: PortId, value: Ast.Ast | undefined): boolean {
+    const update = getPortPrimaryInstance(id)?.onUpdate
+    if (!update) return false
+    update(value, id)
+    return true
+  }
+
   function commitEdit(
     module: Module,
     root: AstId,
@@ -380,7 +420,6 @@ export const useGraphStore = defineStore('graph', () => {
     currentNodeIds,
     nodeRects,
     vizRects,
-    exprRects,
     methodAst,
     createEdgeFromOutput,
     disconnectSource,
@@ -396,7 +435,11 @@ export const useGraphStore = defineStore('graph', () => {
     stopCapturingUndo,
     updateNodeRect,
     updateVizRect,
-    updateExprRect,
+    addPortInstance,
+    removePortInstance,
+    getPortRelativeRect,
+    getPortNodeId,
+    updatePortValue,
     setEditedNode,
     updateState,
     commitEdit,
@@ -410,14 +453,14 @@ function randomIdent() {
 /** An edge, which may be connected or unconnected. */
 export type Edge = {
   source: ExprId | undefined
-  target: ExprId | undefined
+  target: PortId | undefined
 }
 
 export type UnconnectedEdge = {
   source?: ExprId
-  target?: ExprId
+  target?: PortId
   /** If this edge represents an in-progress edit of a connected edge, it is identified by its target expression. */
-  disconnectedEdgeTarget?: ExprId
+  disconnectedEdgeTarget?: PortId
 }
 
 function getExecutedMethodAst(
diff --git a/app/gui2/src/stores/suggestionDatabase/index.ts b/app/gui2/src/stores/suggestionDatabase/index.ts
index e716d12d42a9..195acac383d4 100644
--- a/app/gui2/src/stores/suggestionDatabase/index.ts
+++ b/app/gui2/src/stores/suggestionDatabase/index.ts
@@ -13,15 +13,10 @@ import { markRaw, ref, type Ref } from 'vue'
 export class SuggestionDb extends ReactiveDb<SuggestionId, SuggestionEntry> {
   nameToId = new ReactiveIndex(this, (id, entry) => [[entryQn(entry), id]])
   childIdToParentId = new ReactiveIndex(this, (id, entry) => {
-    let qualifiedName: Opt<QualifiedName>
-    if (entry.memberOf) {
-      qualifiedName = entry.memberOf
-    } else {
-      qualifiedName = qnParent(entryQn(entry))
-    }
+    const qualifiedName = entry.memberOf ?? qnParent(entryQn(entry))
     if (qualifiedName) {
-      const parents = Array.from(this.nameToId.lookup(qualifiedName))
-      return parents.map((p) => [id, p])
+      const parents = this.nameToId.lookup(qualifiedName)
+      return Array.from(parents, (p) => [id, p])
     }
     return []
   })
diff --git a/app/gui2/src/stores/visualization/compilerMessaging.ts b/app/gui2/src/stores/visualization/compilerMessaging.ts
index 47d121f11c8c..f3739ea06abe 100644
--- a/app/gui2/src/stores/visualization/compilerMessaging.ts
+++ b/app/gui2/src/stores/visualization/compilerMessaging.ts
@@ -19,8 +19,6 @@ import { VisualizationModule } from '@/stores/visualization/runtimeTypes'
 import { assertNever } from '@/util/assert'
 import { toError } from '@/util/data/error'
 import type { Opt } from '@/util/data/opt'
-import { defineKeybinds } from '@/util/shortcuts'
-import { VisualizationContainer, useVisualizationConfig } from '@/util/visualizationBuiltins'
 import { Error as DataError } from 'shared/binaryProtocol'
 import type { DataServer } from 'shared/dataServer'
 import type { Uuid } from 'shared/languageServerTypes'
@@ -36,7 +34,9 @@ const moduleCache: Record<string, unknown> = {
   get d3() {
     return import('d3')
   },
-  builtins: { VisualizationContainer, useVisualizationConfig, defineKeybinds },
+  get builtins() {
+    return import('@/util/visualizationBuiltins')
+  },
 }
 // @ts-expect-error Intentionally not defined in `env.d.ts` as it is a mistake to access this
 // anywhere else.
diff --git a/app/gui2/src/util/ast/abstract.ts b/app/gui2/src/util/ast/abstract.ts
index f42e642eba07..429a3c4a6069 100644
--- a/app/gui2/src/util/ast/abstract.ts
+++ b/app/gui2/src/util/ast/abstract.ts
@@ -5,6 +5,7 @@ import type { Opt } from '@/util/data/opt'
 import { Err, Ok, type Result } from '@/util/data/result'
 import type { LazyObject } from '@/util/parserSupport'
 import { unsafeEntries } from '@/util/record'
+import * as map from 'lib0/map'
 import * as random from 'lib0/random'
 import { reactive } from 'vue'
 import type { ExprId } from '../../../shared/yjsModel'
@@ -187,10 +188,6 @@ export abstract class Ast {
     return module.get(root)!
   }
 
-  get astId(): AstId {
-    return this.exprId
-  }
-
   /** Returns child subtrees, without information about the whitespace between them. */
   *children(): IterableIterator<Ast | Token> {
     for (const child of this.concreteChildren()) {
@@ -291,12 +288,8 @@ export abstract class Ast {
       }
     }
     const span = nodeKey(offset, code.length, this.treeType)
-    const infos = info.nodes.get(span)
-    if (infos == null) {
-      info.nodes.set(span, [this.exprId])
-    } else {
-      infos.unshift(this.exprId)
-    }
+    const infos = map.setIfUndefined(info.nodes, span, (): AstId[] => [])
+    infos.unshift(this.exprId)
     return code
   }
 }
diff --git a/app/gui2/src/util/ast/node.ts b/app/gui2/src/util/ast/node.ts
index 19585c4afba3..c9e50e64eef7 100644
--- a/app/gui2/src/util/ast/node.ts
+++ b/app/gui2/src/util/ast/node.ts
@@ -5,7 +5,7 @@ import { Vec2 } from '@/util/data/vec2'
 export function nodeFromAst(ast: Ast.Ast): Node {
   if (ast instanceof Ast.Assignment) {
     return {
-      outerExprId: ast.astId,
+      outerExprId: ast.exprId,
       pattern: ast.pattern ?? undefined,
       rootSpan: ast.expression ?? ast,
       position: Vec2.Zero,
@@ -13,7 +13,7 @@ export function nodeFromAst(ast: Ast.Ast): Node {
     }
   } else {
     return {
-      outerExprId: ast.astId,
+      outerExprId: ast.exprId,
       pattern: undefined,
       rootSpan: ast,
       position: Vec2.Zero,
diff --git a/app/gui2/src/util/callTree.ts b/app/gui2/src/util/callTree.ts
index 1bee5d9ba6be..b3607da82440 100644
--- a/app/gui2/src/util/callTree.ts
+++ b/app/gui2/src/util/callTree.ts
@@ -1,4 +1,4 @@
-import type { ForcePort } from '@/providers/portInfo'
+import type { PortId } from '@/providers/portInfo'
 import type { SuggestionEntry, SuggestionEntryArgument } from '@/stores/suggestionDatabase/entry'
 import { Ast } from '@/util/ast'
 import { tryGetIndex } from '@/util/data/array'
@@ -15,10 +15,16 @@ export const enum ApplicationKind {
  */
 export class ArgumentPlaceholder {
   constructor(
+    public callId: string,
     public index: number,
     public info: SuggestionEntryArgument,
     public kind: ApplicationKind,
+    public insertAsNamed: boolean,
   ) {}
+
+  get portId(): PortId {
+    return `${this.callId}[${this.index}]` as PortId
+  }
 }
 
 export class ArgumentAst {
@@ -28,11 +34,15 @@ export class ArgumentAst {
     public info: SuggestionEntryArgument | undefined,
     public kind: ApplicationKind,
   ) {}
+
+  get portId(): PortId {
+    return this.ast.exprId as string as PortId
+  }
 }
 
-type InterpretedCall = AnalyzedInfix | AnalyzedPrefix
+type InterpretedCall = InterpretedInfix | InterpretedPrefix
 
-interface AnalyzedInfix {
+interface InterpretedInfix {
   kind: 'infix'
   appTree: Ast.OprApp
   operator: Ast.Token | undefined
@@ -40,7 +50,7 @@ interface AnalyzedInfix {
   rhs: Ast.Ast | undefined
 }
 
-interface AnalyzedPrefix {
+interface InterpretedPrefix {
   kind: 'prefix'
   func: Ast.Ast
   args: FoundApplication[]
@@ -54,7 +64,7 @@ interface FoundApplication {
 
 export class ArgumentApplication {
   private constructor(
-    public appTree: Ast.Ast | undefined,
+    public appTree: Ast.Ast,
     public target: ArgumentApplication | Ast.Ast | ArgumentPlaceholder | ArgumentAst,
     public infixOperator: Ast.Token | undefined,
     public argument: Ast.Ast | ArgumentAst | ArgumentPlaceholder,
@@ -102,6 +112,9 @@ export class ArgumentApplication {
   ): ArgumentApplication | Ast.Ast {
     const knownArguments = suggestion?.arguments
 
+    const callId =
+      interpreted.kind === 'infix' ? interpreted.appTree.exprId : interpreted.func.exprId
+
     if (interpreted.kind === 'infix') {
       const isAccess = isAccessOperator(interpreted.operator)
       const argFor = (key: 'lhs' | 'rhs', index: number) => {
@@ -110,8 +123,8 @@ export class ArgumentApplication {
         return tree != null
           ? isAccess
             ? tree
-            : new ArgumentAst(tree, 0, info, ApplicationKind.Infix)
-          : new ArgumentPlaceholder(0, info, ApplicationKind.Infix)
+            : new ArgumentAst(tree, index, info, ApplicationKind.Infix)
+          : new ArgumentPlaceholder(callId, index, info, ApplicationKind.Infix, false)
       }
       return new ArgumentApplication(
         interpreted.appTree,
@@ -148,21 +161,31 @@ export class ArgumentApplication {
     }> = []
 
     function insertPlaceholdersUpto(index: number, appTree: Ast.Ast) {
+      let canInsertPositional = true
       while (placeholdersToInsert[0] != null && placeholdersToInsert[0] < index) {
         const argIndex = placeholdersToInsert.shift()
         const argInfo = tryGetIndex(knownArguments, argIndex)
-        if (argIndex != null && argInfo != null)
+        if (argIndex != null && argInfo != null) {
           prefixArgsToDisplay.push({
             appTree,
-            argument: new ArgumentPlaceholder(argIndex, argInfo, ApplicationKind.Prefix),
+            argument: new ArgumentPlaceholder(
+              callId,
+              argIndex,
+              argInfo,
+              ApplicationKind.Prefix,
+              !canInsertPositional,
+            ),
           })
+
+          canInsertPositional = false
+        }
       }
     }
 
     for (const realArg of interpreted.args) {
       if (realArg.argName == null) {
         const argIndex = argumentsLeftToMatch.shift()
-        if (argIndex != null) insertPlaceholdersUpto(argIndex, realArg.appTree)
+        if (argIndex != null) insertPlaceholdersUpto(argIndex, realArg.appTree.function)
         prefixArgsToDisplay.push({
           appTree: realArg.appTree,
           argument: new ArgumentAst(
@@ -180,7 +203,8 @@ export class ArgumentApplication {
         const name = realArg.argName
         const foundIdx = argumentsLeftToMatch.findIndex((i) => knownArguments?.[i]?.name === name)
         const argIndex = foundIdx === -1 ? undefined : argumentsLeftToMatch.splice(foundIdx, 1)[0]
-        if (argIndex != null && foundIdx === 0) insertPlaceholdersUpto(argIndex, realArg.appTree)
+        if (argIndex != null && foundIdx === 0)
+          insertPlaceholdersUpto(argIndex, realArg.appTree.function)
         prefixArgsToDisplay.push({
           appTree: realArg.appTree,
           argument: new ArgumentAst(
@@ -193,7 +217,8 @@ export class ArgumentApplication {
       }
     }
 
-    insertPlaceholdersUpto(Infinity, interpreted.func)
+    const outerApp = interpreted.args[interpreted.args.length - 1]?.appTree ?? interpreted.func
+    insertPlaceholdersUpto(Infinity, outerApp)
 
     return prefixArgsToDisplay.reduce(
       (target: ArgumentApplication | Ast.Ast, toDisplay) =>
@@ -201,6 +226,14 @@ export class ArgumentApplication {
       interpreted.func,
     )
   }
+
+  *iterApplications(): IterableIterator<ArgumentApplication> {
+    let current: typeof this.target = this
+    while (current instanceof ArgumentApplication) {
+      yield current
+      current = current.target
+    }
+  }
 }
 
 const unknownArgInfoNamed = (name: string) => ({
@@ -221,12 +254,10 @@ function isAccessOperator(opr: Ast.Token | undefined): boolean {
 declare const ArgumentApplicationKey: unique symbol
 declare const ArgumentPlaceholderKey: unique symbol
 declare const ArgumentAstKey: unique symbol
-declare const ForcePortKey: unique symbol
 declare module '@/providers/widgetRegistry' {
   export interface WidgetInputTypes {
     [ArgumentApplicationKey]: ArgumentApplication
     [ArgumentPlaceholderKey]: ArgumentPlaceholder
     [ArgumentAstKey]: ArgumentAst
-    [ForcePortKey]: ForcePort
   }
 }
diff --git a/app/gui2/src/util/reactivity.ts b/app/gui2/src/util/reactivity.ts
index e6a19bb7e6e7..36758aa9ccd1 100644
--- a/app/gui2/src/util/reactivity.ts
+++ b/app/gui2/src/util/reactivity.ts
@@ -8,6 +8,8 @@ import {
   effectScope,
   isRef,
   queuePostFlushCb,
+  shallowRef,
+  watch,
   type Ref,
   type WatchSource,
 } from 'vue'
@@ -96,3 +98,37 @@ export class LazySyncEffectSet {
     this._scope.stop()
   }
 }
+
+function defaultEquality(a: unknown, b: unknown): boolean {
+  return a === b
+}
+
+/**
+ * Create a ref that is updated whenever the given function's return value changes. Similar to
+ * `computed`, but differs in significant ways:
+ * - The dependencies of the `getter` will not be propagated to any effects that access the result.
+ * - The `getter` will run even if the ref is not actively observed by any effects (i.e. it is
+ * effectively an **always-active watcher**),
+ * - The `ref` will only be updated only when the derived value actually changed (as determined by
+ *   the `equalFn` equality test).
+ *
+ * This is most useful for derived values that are accessed often and recompute frequently, but the
+ * actual derived result changes very rarely. When in doubt, use `computed` instead.
+ */
+export function cachedGetter<T>(
+  getter: () => T,
+  equalFn: (a: T, b: T) => boolean = defaultEquality,
+): Ref<T> {
+  const valueRef = shallowRef<T>()
+  watch(
+    getter,
+    (newValue) => {
+      const oldValue = valueRef.value
+      if (oldValue === undefined || !equalFn(oldValue, newValue)) valueRef.value = newValue
+    },
+    { immediate: true, flush: 'sync' },
+  )
+
+  // Since the watch is immediate, the value is guaranteed to be assigned at least once this point.
+  return valueRef as Ref<T>
+}
diff --git a/app/gui2/src/util/visualizationBuiltins.ts b/app/gui2/src/util/visualizationBuiltins.ts
index 3e747f0bbe70..1692b90217d5 100644
--- a/app/gui2/src/util/visualizationBuiltins.ts
+++ b/app/gui2/src/util/visualizationBuiltins.ts
@@ -1,4 +1,3 @@
-import VisualizationContainer from '@/components/VisualizationContainer.vue'
+export { default as VisualizationContainer } from '@/components/VisualizationContainer.vue'
 export { useVisualizationConfig } from '@/providers/visualizationConfig'
 export { defineKeybinds } from '@/util/shortcuts'
-export { VisualizationContainer }
diff --git a/app/gui2/stories/GraphNode.story.vue b/app/gui2/stories/GraphNode.story.vue
index 71f59176b904..ccbca8075d07 100644
--- a/app/gui2/stories/GraphNode.story.vue
+++ b/app/gui2/stories/GraphNode.story.vue
@@ -1,23 +1,17 @@
 <script setup lang="ts">
-import { logEvent } from 'histoire/client'
-import { computed, ref } from 'vue'
-
-import * as Y from 'yjs'
-
 import GraphNode from '@/components/GraphEditor/GraphNode.vue'
+import { useNavigator } from '@/composables/navigator'
 import { provideGraphSelection } from '@/providers/graphSelection'
 import type { Node } from '@/stores/graph'
-import { RawAstExtended } from '@/util/ast'
+import { Ast } from '@/util/ast'
+import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
-import { useNavigator } from '@/util/navigator'
-import { Rect } from '@/util/rect'
-import { reactive, watchEffect } from 'vue'
+import { logEvent } from 'histoire/client'
+import { computed, reactive, ref, watchEffect } from 'vue'
 import { IdMap, type ContentRange } from '../shared/yjsModel'
 import { createSetupComponent } from './histoire/utils'
 
-const doc = new Y.Doc()
-const text = doc.getText('content')
-const idMap = doc.getMap<Uint8Array>('idMap')
+const idMap = new IdMap()
 
 const nodeBinding = ref('binding')
 const nodeContent = ref('content')
@@ -37,8 +31,8 @@ function updateContent(updates: [range: ContentRange, content: string][]) {
   nodeContent.value = content
 }
 
-const rootSpan = computed(() => RawAstExtended.parse(nodeContent.value, idMap))
-const pattern = computed(() => RawAstExtended.parse(nodeBinding.value, idMap))
+const rootSpan = computed(() => Ast.parseTransitional(nodeContent.value, idMap))
+const pattern = computed(() => Ast.parseTransitional(nodeBinding.value, idMap))
 
 const node = computed((): Node => {
   return {
@@ -53,7 +47,7 @@ const node = computed((): Node => {
 const mockRects = reactive(new Map())
 
 watchEffect((onCleanup) => {
-  const id = node.value.rootSpan.astId
+  const id = node.value.rootSpan.exprId
   mockRects.set(id, Rect.Zero)
   onCleanup(() => {
     mockRects.delete(id)
@@ -78,14 +72,15 @@ const SetupStory = createSetupComponent((app) => {
     <SetupStory />
     <div style="height: 72px; padding: 20px; padding-left: 50px">
       <GraphNode
+        :edited="false"
         :node="node"
         @movePosition="
           (nodeX += $event.x),
             (nodeY += $event.y),
             logEvent('movePosition', [JSON.stringify($event)])
         "
-        @updateContent="updateContent($event), logEvent('updateContent', [JSON.stringify($event)])"
-        @updateExprRect="(id, rect) => logEvent('updateExprRect', [id, JSON.stringify(rect)])"
+        @update:content="updateContent($event), logEvent('updateContent', [JSON.stringify($event)])"
+        @update:rect="(rect) => logEvent('update:rect', JSON.stringify(rect))"
         @replaceSelection="(selected = true), logEvent('replaceSelection', [])"
         @update:selected="(selected = $event), logEvent('update:selected', [$event])"
       />