diff --git a/.gitignore b/.gitignore
index 4a2f08ac..dda4ae8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,5 @@ node_modules
 # storybook
 *storybook.log
 storybook-static
+
+.DS_Store
diff --git a/diagram-editor/dist.tar.gz b/diagram-editor/dist.tar.gz
index 3b66c756..3cb26b43 100644
Binary files a/diagram-editor/dist.tar.gz and b/diagram-editor/dist.tar.gz differ
diff --git a/diagram-editor/frontend/add-operation.tsx b/diagram-editor/frontend/add-operation.tsx
index da6f8912..809f3f58 100644
--- a/diagram-editor/frontend/add-operation.tsx
+++ b/diagram-editor/frontend/add-operation.tsx
@@ -1,119 +1,83 @@
-import { Button, ButtonGroup, styled } from '@mui/material';
+import { Button, ButtonGroup, Stack, TextField, Typography, styled } from '@mui/material';
 import type { NodeAddChange, XYPosition } from '@xyflow/react';
 import React from 'react';
-import { v4 as uuidv4 } from 'uuid';
 import { EditorMode, useEditorMode } from './editor-mode';
 import { useNodeManager } from './node-manager';
 import type { DiagramEditorNode } from './nodes';
 import {
   BufferAccessIcon,
   BufferIcon,
-  createOperationNode,
-  createScopeNode,
-  createSectionBufferNode,
-  createSectionInputNode,
-  createSectionOutputNode,
   ForkCloneIcon,
   ForkResultIcon,
   isOperationNode,
-  isSectionBufferNode,
-  isSectionInputNode,
-  isSectionOutputNode,
   JoinIcon,
   ListenIcon,
   NodeIcon,
   ScopeIcon,
   SectionBufferIcon,
-  type SectionBufferNode,
   SectionIcon,
   SectionInputIcon,
-  type SectionInputNode,
   SectionOutputIcon,
-  type SectionOutputNode,
   SplitIcon,
   StreamOutIcon,
   TransformIcon,
   UnzipIcon,
 } from './nodes';
-import type { DiagramOperation, NextOperation } from './types/api';
+import {
+  type AddOperationKey,
+  filterCompatibleAddOperations,
+  getVisibleAddOperations,
+} from './utils/add-operation-catalog';
 import { joinNamespaces, ROOT_NAMESPACE } from './utils/namespace';
-import { addUniqueSuffix } from './utils/unique-value';
 
 const StyledOperationButton = styled(Button)({
   justifyContent: 'flex-start',
 });
 
-export interface AddOperationProps {
-  parentId?: string;
-  newNodePosition: XYPosition;
-  onAdd?: (change: NodeAddChange<DiagramEditorNode>[]) => void;
-}
-
-function createSectionInputChange(
-  remappedId: string,
-  targetId: NextOperation,
-  position: XYPosition,
-): NodeAddChange<SectionInputNode> {
-  return {
-    type: 'add',
-    item: createSectionInputNode(remappedId, targetId, position),
-  };
-}
-
-function createSectionOutputChange(
-  outputId: string,
-  position: XYPosition,
-): NodeAddChange<SectionOutputNode> {
-  return {
-    type: 'add',
-    item: createSectionOutputNode(outputId, position),
-  };
-}
+const OPERATION_ICONS: Record<AddOperationKey, React.ReactNode> = {
+  sectionInput: <SectionInputIcon />,
+  sectionOutput: <SectionOutputIcon />,
+  sectionBuffer: <SectionBufferIcon />,
+  node: <NodeIcon />,
+  fork_clone: <ForkCloneIcon />,
+  unzip: <UnzipIcon />,
+  fork_result: <ForkResultIcon />,
+  split: <SplitIcon />,
+  join: <JoinIcon />,
+  transform: <TransformIcon />,
+  buffer: <BufferIcon />,
+  buffer_access: <BufferAccessIcon />,
+  listen: <ListenIcon />,
+  stream_out: <StreamOutIcon />,
+  scope: <ScopeIcon />,
+  section: <SectionIcon />,
+};
 
-function createSectionBufferChange(
-  remappedId: string,
-  targetId: NextOperation,
-  position: XYPosition,
-): NodeAddChange<SectionBufferNode> {
-  return {
-    type: 'add',
-    item: createSectionBufferNode(remappedId, targetId, position),
-  };
+export interface AddOperationSelection {
+  primaryNodeId: string;
+  changes: NodeAddChange<DiagramEditorNode>[];
 }
 
-function createNodeChange(
-  namespace: string,
-  parentId: string | undefined,
-  newNodePosition: XYPosition,
-  op: DiagramOperation,
-): NodeAddChange<DiagramEditorNode>[] {
-  if (op.type === 'scope') {
-    return createScopeNode(
-      namespace,
-      parentId,
-      newNodePosition,
-      op,
-      uuidv4(),
-    ).map((node) => ({ type: 'add', item: node }));
-  }
-
-  return [
-    {
-      type: 'add',
-      item: createOperationNode(
-        namespace,
-        parentId,
-        newNodePosition,
-        op,
-        uuidv4(),
-      ),
-    },
-  ];
+export interface AddOperationProps {
+  parentId?: string;
+  newNodePosition: XYPosition;
+  sourceConnection?: {
+    sourceNodeId: string;
+    sourceHandle: string | null;
+    sourceHandleType: 'source' | 'target';
+  } | null;
+  onAdd?: (selection: AddOperationSelection) => void;
 }
 
-function AddOperation({ parentId, newNodePosition, onAdd }: AddOperationProps) {
+function AddOperation({
+  parentId,
+  newNodePosition,
+  sourceConnection,
+  onAdd,
+}: AddOperationProps) {
   const [editorMode] = useEditorMode();
   const nodeManager = useNodeManager();
+  const [search, setSearch] = React.useState('');
   const namespace = React.useMemo(() => {
     const parentNode = parentId && nodeManager.tryGetNode(parentId);
     if (!parentNode || !isOperationNode(parentNode)) {
@@ -121,254 +85,118 @@ function AddOperation({ parentId, newNodePosition, onAdd }: AddOperationProps) {
     }
     return joinNamespaces(parentNode.data.namespace, parentNode.data.opId);
   }, [parentId, nodeManager]);
+  const sourceNode = sourceConnection
+    ? nodeManager.tryGetNode(sourceConnection.sourceNodeId)
+    : null;
+  const compatibleOperations = React.useMemo(() => {
+    let visible = getVisibleAddOperations({
+      isTemplateMode: editorMode.mode === EditorMode.Template,
+      namespace,
+    });
+
+    if (sourceNode) {
+      visible = filterCompatibleAddOperations(
+        visible,
+        sourceNode,
+        sourceConnection?.sourceHandle,
+        { namespace, parentId },
+        sourceConnection?.sourceHandleType,
+      );
+    }
+
+    return visible;
+  }, [
+    editorMode.mode,
+    namespace,
+    sourceNode,
+    sourceConnection?.sourceHandle,
+    sourceConnection?.sourceHandleType,
+    parentId,
+  ]);
+
+  const operations = React.useMemo(() => {
+    const trimmedSearch = search.trim().toLowerCase();
+    if (!trimmedSearch) {
+      return compatibleOperations;
+    }
+
+    return compatibleOperations.filter((operation) =>
+      operation.label.toLowerCase().includes(trimmedSearch),
+    );
+  }, [compatibleOperations, search]);
+
+  const emptyMessage = React.useMemo(() => {
+    if (operations.length > 0) {
+      return null;
+    }
+
+    if (search.trim()) {
+      return sourceConnection
+        ? sourceConnection.sourceHandleType === 'target'
+          ? 'No compatible input operations match this filter.'
+          : 'No compatible output operations match this filter.'
+        : 'No operations match this filter.';
+    }
+
+    return sourceConnection
+      ? sourceConnection.sourceHandleType === 'target'
+        ? 'No compatible operations are available for this input yet.'
+        : 'No compatible operations are available for this output yet.'
+      : 'No operations are available here yet.';
+  }, [operations.length, search, sourceConnection]);
+
+  const title = sourceConnection
+    ? sourceConnection.sourceHandleType === 'target'
+      ? 'Compatible previous operations'
+      : 'Compatible next operations'
+    : 'Add operation';
 
   return (
-    <ButtonGroup
-      orientation="vertical"
-      variant="contained"
-      size="small"
-      aria-label="Add operation button group"
-    >
-      {editorMode.mode === EditorMode.Template &&
-        namespace === ROOT_NAMESPACE && (
-          <StyledOperationButton
-            startIcon={<SectionInputIcon />}
-            onClick={() => {
-              const remappedId = addUniqueSuffix(
-                'new_input',
-                nodeManager.nodes
-                  .filter(isSectionInputNode)
-                  .map((n) => n.data.remappedId),
-              );
-              onAdd?.([
-                createSectionInputChange(
-                  remappedId,
-                  { builtin: 'dispose' },
-                  newNodePosition,
-                ),
-              ]);
-            }}
-          >
-            Section Input
-          </StyledOperationButton>
-        )}
-      {editorMode.mode === EditorMode.Template &&
-        namespace === ROOT_NAMESPACE && (
-          <StyledOperationButton
-            startIcon={<SectionOutputIcon />}
-            onClick={() => {
-              const outputId = addUniqueSuffix(
-                'new_output',
-                nodeManager.nodes
-                  .filter(isSectionOutputNode)
-                  .map((n) => n.data.outputId),
-              );
-              onAdd?.([createSectionOutputChange(outputId, newNodePosition)]);
-            }}
-          >
-            Section Output
-          </StyledOperationButton>
-        )}
-      {editorMode.mode === EditorMode.Template &&
-        namespace === ROOT_NAMESPACE && (
-          <StyledOperationButton
-            startIcon={<SectionBufferIcon />}
-            onClick={() => {
-              const remappedId = addUniqueSuffix(
-                'new_buffer',
-                nodeManager.nodes
-                  .filter(isSectionBufferNode)
-                  .map((n) => n.data.remappedId),
-              );
-              onAdd?.([
-                createSectionBufferChange(
-                  remappedId,
-                  { builtin: 'dispose' },
+    <Stack spacing={1} sx={{ px: 1.5, pt: 1.5, pb: 1.5, width: 260 }}>
+      <Typography variant="subtitle2">{title}</Typography>
+      <TextField
+        size="small"
+        placeholder="Filter operations"
+        value={search}
+        onChange={(event) => setSearch(event.target.value)}
+      />
+      {operations.length > 0 && (
+        <ButtonGroup
+          orientation="vertical"
+          variant="contained"
+          size="small"
+          aria-label="Add operation button group"
+          sx={{ width: '100%' }}
+        >
+          {operations.map((operation) => (
+            <StyledOperationButton
+              key={operation.key}
+              startIcon={OPERATION_ICONS[operation.key]}
+              onClick={() => {
+                const changes = operation.createChanges({
+                  namespace,
+                  parentId,
                   newNodePosition,
-                ),
-              ]);
-            }}
-          >
-            Section Buffer
-          </StyledOperationButton>
-        )}
-      <StyledOperationButton
-        startIcon={<NodeIcon />}
-        onClick={() => {
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'node',
-              builder: '',
-              next: { builtin: 'dispose' },
-            }),
-          );
-        }}
-      >
-        Node
-      </StyledOperationButton>
-      {/* <Button>Section</Button> */}
-      <StyledOperationButton
-        startIcon={<ForkCloneIcon />}
-        onClick={() =>
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'fork_clone',
-              next: [],
-            }),
-          )
-        }
-      >
-        Fork Clone
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<UnzipIcon />}
-        onClick={() =>
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'unzip',
-              next: [],
-            }),
-          )
-        }
-      >
-        Unzip
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<ForkResultIcon />}
-        onClick={() => {
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'fork_result',
-              err: { builtin: 'dispose' },
-              ok: { builtin: 'dispose' },
-            }),
-          );
-        }}
-      >
-        Fork Result
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<SplitIcon />}
-        onClick={() =>
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'split',
-            }),
-          )
-        }
-      >
-        Split
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<JoinIcon />}
-        onClick={() => {
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'join',
-              buffers: [],
-              next: { builtin: 'dispose' },
-            }),
-          );
-        }}
-      >
-        Join
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<TransformIcon />}
-        onClick={() => {
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'transform',
-              cel: '',
-              next: { builtin: 'dispose' },
-            }),
-          );
-        }}
-      >
-        Transform
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<BufferIcon />}
-        onClick={() =>
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'buffer',
-            }),
-          )
-        }
-      >
-        Buffer
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<BufferAccessIcon />}
-        onClick={() => {
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'buffer_access',
-              buffers: [],
-              next: { builtin: 'dispose' },
-            }),
-          );
-        }}
-      >
-        Buffer Access
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<ListenIcon />}
-        onClick={() =>
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'listen',
-              buffers: [],
-              next: { builtin: 'dispose' },
-            }),
-          )
-        }
-      >
-        Listen
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<StreamOutIcon />}
-        onClick={() =>
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'stream_out',
-              name: '',
-            }),
-          )
-        }
-      >
-        Stream Out
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<ScopeIcon />}
-        onClick={() =>
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'scope',
-              start: { builtin: 'dispose' },
-              ops: {},
-              next: { builtin: 'dispose' },
-            }),
-          )
-        }
-      >
-        Scope
-      </StyledOperationButton>
-      <StyledOperationButton
-        startIcon={<SectionIcon />}
-        onClick={() =>
-          onAdd?.(
-            createNodeChange(namespace, parentId, newNodePosition, {
-              type: 'section',
-              template: '',
-            }),
-          )
-        }
-      >
-        Section
-      </StyledOperationButton>
-    </ButtonGroup>
+                  nodeManager,
+                });
+                const primaryNodeId = changes[0]?.item.id;
+                if (!primaryNodeId) {
+                  return;
+                }
+                onAdd?.({ changes, primaryNodeId });
+              }}
+            >
+              {operation.label}
+            </StyledOperationButton>
+          ))}
+        </ButtonGroup>
+      )}
+      {emptyMessage && (
+        <Typography variant="body2">
+          {emptyMessage}
+        </Typography>
+      )}
+    </Stack>
   );
 }
 
diff --git a/diagram-editor/frontend/api-client/base-api-client.ts b/diagram-editor/frontend/api-client/base-api-client.ts
index 64df17a8..6dbbd4e1 100644
--- a/diagram-editor/frontend/api-client/base-api-client.ts
+++ b/diagram-editor/frontend/api-client/base-api-client.ts
@@ -2,7 +2,7 @@ import type { Observable } from 'rxjs';
 import type { Diagram, DiagramElementMetadata } from '../types/api';
 
 export interface BaseApiClient {
-  getRegistry(): Observable<DiagramElementMetdata>;
+  getRegistry(): Observable<DiagramElementMetadata>;
   postRunWorkflow(diagram: Diagram, request: unknown): Observable<unknown>;
   // WIP
   // wsDebugWorkflow(diagram: Diagram, request: unknown): Promise<DebugSession>;
diff --git a/diagram-editor/frontend/api.preprocessed.schema.json b/diagram-editor/frontend/api.preprocessed.schema.json
index 16fdfd70..9245002a 100644
--- a/diagram-editor/frontend/api.preprocessed.schema.json
+++ b/diagram-editor/frontend/api.preprocessed.schema.json
@@ -58,20 +58,6 @@
       ],
       "type": "object"
     },
-    "BufferIdentifier": {
-      "anyOf": [
-        {
-          "description": "Identify a buffer by name",
-          "type": "string"
-        },
-        {
-          "description": "Identify a buffer by an index value",
-          "format": "uint",
-          "minimum": 0,
-          "type": "integer"
-        }
-      ]
-    },
     "BufferMapLayoutHints": {
       "oneOf": [
         {
@@ -741,6 +727,20 @@
       ],
       "type": "object"
     },
+    "IdentifierRef": {
+      "anyOf": [
+        {
+          "description": "Identify by a name",
+          "type": "string"
+        },
+        {
+          "description": "Identify by an index value",
+          "format": "uint",
+          "minimum": 0,
+          "type": "integer"
+        }
+      ]
+    },
     "InputExample": {
       "properties": {
         "description": {
@@ -781,7 +781,7 @@
         "clone": {
           "description": "List of the keys in the `buffers` dictionary whose value should be cloned\ninstead of removed from the buffer (pulled) when the join occurs. Cloning\nthe value will leave the buffer unchanged after the join operation takes\nplace.",
           "items": {
-            "$ref": "#/$defs/BufferIdentifier"
+            "$ref": "#/$defs/IdentifierRef"
           },
           "type": "array"
         },
diff --git a/diagram-editor/frontend/app.css b/diagram-editor/frontend/app.css
index 9234ce78..3bc7ba3c 100644
--- a/diagram-editor/frontend/app.css
+++ b/diagram-editor/frontend/app.css
@@ -13,6 +13,11 @@
   width: 8px;
   height: 8px;
   z-index: 10;
+  transition:
+    box-shadow 120ms ease,
+    opacity 120ms ease,
+    background-color 120ms ease,
+    border-color 120ms ease;
 }
 .react-flow__handle::before {
   content: "";
@@ -42,3 +47,25 @@
     var(--xy-handle-background-color-default) 50%
   );
 }
+.react-flow__handle.connectionindicator {
+  opacity: 1;
+  border: 1px solid transparent;
+  box-shadow: none;
+}
+.react-flow__handle.handle-compatible {
+  border: 1px solid var(--mui-palette-success-main);
+  box-shadow: 0 0 0 4px rgb(76 175 80 / 22%);
+}
+.react-flow__handle.handle-compatible:hover,
+.react-flow__handle.valid {
+  box-shadow: 0 0 0 6px rgb(76 175 80 / 30%);
+  border-color: var(--mui-palette-success-main);
+}
+.react-flow__handle.connectingto:not(.valid) {
+  opacity: 0.9;
+  box-shadow: 0 0 0 6px rgb(244 67 54 / 24%);
+  border-color: var(--mui-palette-error-main);
+}
+.react-flow__handle.connectingfrom {
+  box-shadow: 0 0 0 6px rgb(33 150 243 / 18%);
+}
diff --git a/diagram-editor/frontend/connection-hint-panel.tsx b/diagram-editor/frontend/connection-hint-panel.tsx
new file mode 100644
index 00000000..73b08b36
--- /dev/null
+++ b/diagram-editor/frontend/connection-hint-panel.tsx
@@ -0,0 +1,115 @@
+import { Paper, Stack, Typography } from '@mui/material';
+import { Panel, useConnection } from '@xyflow/react';
+import type { NodeManager } from './node-manager';
+import {
+  filterCompatibleAddOperations,
+  getVisibleAddOperations,
+} from './utils/add-operation-catalog';
+import {
+  createConnectionFromDraggedHandle,
+  validateConnectionSimple,
+  validateSourceOutputCapacity,
+} from './utils/connection';
+import { ROOT_NAMESPACE } from './utils/namespace';
+import { useEdges } from './use-edges';
+
+export interface ConnectionHintPanelProps {
+  nodeManager: NodeManager;
+}
+
+export function ConnectionHintPanel({ nodeManager }: ConnectionHintPanelProps) {
+  const connection = useConnection();
+  const edges = useEdges();
+
+  if (!connection.inProgress || !connection.fromHandle) {
+    return null;
+  }
+
+  const sourceNode = nodeManager.tryGetNode(connection.fromHandle.nodeId);
+  if (!sourceNode) {
+    return null;
+  }
+
+  const sourceOutputCapacity =
+    connection.fromHandle.type === 'source'
+      ? validateSourceOutputCapacity(sourceNode, connection.fromHandle.id, edges)
+      : { valid: true as const };
+  const compatibleOperations = sourceOutputCapacity.valid
+    ? filterCompatibleAddOperations(
+        getVisibleAddOperations({
+          isTemplateMode: false,
+          namespace: ROOT_NAMESPACE,
+        }),
+        sourceNode,
+        connection.fromHandle.id,
+        {
+          namespace: ROOT_NAMESPACE,
+          parentId: sourceNode.parentId,
+        },
+        connection.fromHandle.type,
+      )
+    : [];
+
+  let message =
+    !sourceOutputCapacity.valid
+      ? sourceOutputCapacity.error
+      : connection.fromHandle.type === 'target'
+        ? 'Drop on a compatible output, or release on empty space to add a compatible previous operation.'
+        : 'Drop on a compatible input, or release on empty space to add a compatible next operation.';
+  let tone: 'info' | 'success' | 'error' = sourceOutputCapacity.valid
+    ? 'info'
+    : 'error';
+
+  if (connection.toHandle && connection.toNode) {
+    const result = validateConnectionSimple(
+      createConnectionFromDraggedHandle({
+        fromNodeId: connection.fromHandle.nodeId,
+        fromHandleId: connection.fromHandle.id,
+        fromHandleType: connection.fromHandle.type,
+        otherNodeId: connection.toHandle.nodeId,
+        otherHandleId: connection.toHandle.id,
+      }),
+      nodeManager,
+      edges,
+    );
+
+    if (result.valid) {
+      tone = 'success';
+      message = `Compatible target: ${connection.toNode.type}`;
+    } else {
+      tone = 'error';
+      message = result.error;
+    }
+  }
+
+  return (
+    <Panel position="top-left">
+      <Paper
+        elevation={3}
+        sx={{
+          px: 2,
+          py: 1.5,
+          width: 320,
+          border: 1,
+          borderColor:
+            tone === 'success'
+              ? 'success.main'
+              : tone === 'error'
+                ? 'error.main'
+                : 'divider',
+        }}
+      >
+        <Stack spacing={0.5}>
+          <Typography variant="subtitle2">Connection Helper</Typography>
+          <Typography variant="body2">{message}</Typography>
+          <Typography variant="caption" color="text.secondary">
+            {connection.fromHandle.type === 'target'
+              ? 'Compatible previous operations available: '
+              : 'Compatible next operations available: '}
+            {compatibleOperations.length}
+          </Typography>
+        </Stack>
+      </Paper>
+    </Panel>
+  );
+}
diff --git a/diagram-editor/frontend/diagram-editor.tsx b/diagram-editor/frontend/diagram-editor.tsx
index a4628b8c..59429c9f 100644
--- a/diagram-editor/frontend/diagram-editor.tsx
+++ b/diagram-editor/frontend/diagram-editor.tsx
@@ -30,6 +30,7 @@ import { inflateSync, strFromU8 } from 'fflate';
 import React, { Suspense } from 'react';
 import AddOperation from './add-operation';
 import CommandPanel from './command-panel';
+import { ConnectionHintPanel } from './connection-hint-panel';
 import type { DiagramEditorEdge } from './edges';
 import {
   createBaseEdge,
@@ -47,7 +48,7 @@ import { ExportDiagramDialog } from './export-diagram-dialog';
 import { defaultEdgeData, EditEdgeForm, EditNodeForm } from './forms';
 import EditScopeForm from './forms/edit-scope-form';
 import { type LoadContext, LoadContextProvider } from './load-context-provider';
-import { type DiagramProperties, DiagramPropertiesProvider } from './diagram-properties-provider';
+import { DiagramPropertiesProvider } from './diagram-properties-provider';
 import { NodeManager, NodeManagerProvider } from './node-manager';
 import {
   type DiagramEditorNode,
@@ -62,9 +63,11 @@ import { EdgesProvider } from './use-edges';
 import { autoLayout } from './utils/auto-layout';
 import { isRemoveChange } from './utils/change';
 import {
+  createConnectionFromDraggedHandle,
   getValidEdgeTypes,
-  validateConnectionQuick,
+  validateConnectionSimple,
   validateEdgeSimple,
+  validateSourceOutputCapacity,
 } from './utils/connection';
 import { exhaustiveCheck } from './utils/exhaustive-check';
 import { exportTemplate } from './utils/export-diagram';
@@ -151,6 +154,7 @@ function DiagramEditor() {
     DiagramEditorNode,
     DiagramEditorEdge
   > | null>(null);
+  const suppressNextPaneClick = React.useRef(false);
 
   const [editorMode, setEditorMode] = React.useState<EditorModeContext>({
     mode: EditorMode.Normal,
@@ -392,10 +396,16 @@ function DiagramEditor() {
     open: boolean;
     popOverPosition: PopoverPosition;
     parentId: string | null;
+    sourceConnection: {
+      sourceNodeId: string;
+      sourceHandle: string | null;
+      sourceHandleType: 'source' | 'target';
+    } | null;
   }>({
     open: false,
     popOverPosition: { left: 0, top: 0 },
     parentId: null,
+    sourceConnection: null,
   });
   const addOperationNewNodePosition = React.useMemo<XYPosition>(() => {
     if (!reactFlowInstance.current) {
@@ -455,7 +465,11 @@ function DiagramEditor() {
   const closeAllPopovers = React.useCallback(() => {
     setEditingNodeId(null);
     setEditingEdgeId(null);
-    setAddOperationPopover((prev) => ({ ...prev, open: false }));
+    setAddOperationPopover((prev) => ({
+      ...prev,
+      open: false,
+      sourceConnection: null,
+    }));
     setEditOpFormPopoverProps({ open: false });
   }, []);
 
@@ -488,6 +502,7 @@ function DiagramEditor() {
                 open: true,
                 popOverPosition: { left: ev.clientX, top: ev.clientY },
                 parentId: node.id,
+                sourceConnection: null,
               });
             }}
           />
@@ -551,10 +566,36 @@ function DiagramEditor() {
     mouseDownTime.current = Date.now();
   }, []);
 
+  const getClientPosition = React.useCallback(
+    (event: MouseEvent | TouchEvent): XYPosition | null => {
+      if ('clientX' in event) {
+        return { x: event.clientX, y: event.clientY };
+      }
+
+      const touch = event.changedTouches[0] || event.touches[0];
+      if (!touch) {
+        return null;
+      }
+
+      return { x: touch.clientX, y: touch.clientY };
+    },
+    [],
+  );
+
   const tryCreateEdge = React.useCallback(
-    (conn: Connection, id?: string): DiagramEditorEdge | null => {
-      const sourceNode = nodeManager.tryGetNode(conn.source);
-      const targetNode = nodeManager.tryGetNode(conn.target);
+    (
+      conn: Connection,
+      id?: string,
+      nodeOverride?: DiagramEditorNode,
+    ): DiagramEditorEdge | null => {
+      const sourceNode =
+        nodeOverride?.id === conn.source
+          ? nodeOverride
+          : nodeManager.tryGetNode(conn.source);
+      const targetNode =
+        nodeOverride?.id === conn.target
+          ? nodeOverride
+          : nodeManager.tryGetNode(conn.target);
       if (!sourceNode || !targetNode) {
         throw new Error('cannot find source or target node');
       }
@@ -598,7 +639,17 @@ function DiagramEditor() {
         }
       }
 
-      const validationResult = validateEdgeSimple(newEdge, nodeManager, edges);
+      const validationNodeManager = nodeOverride
+        ? new NodeManager([
+            ...nodeManager.nodes.filter((node) => node.id !== nodeOverride.id),
+            nodeOverride,
+          ])
+        : nodeManager;
+      const validationResult = validateEdgeSimple(
+        newEdge,
+        validationNodeManager,
+        edges,
+      );
       if (!validationResult.valid) {
         showErrorToast(validationResult.error);
         return null;
@@ -666,7 +717,7 @@ function DiagramEditor() {
           }
         }}
         isValidConnection={(conn) => {
-          return validateConnectionQuick(conn, nodeManager).valid;
+          return validateConnectionSimple(conn, nodeManager, edges).valid;
         }}
         onReconnect={(oldEdge, newConnection) => {
           const newEdge = tryCreateEdge(newConnection, oldEdge.id);
@@ -676,6 +727,64 @@ function DiagramEditor() {
             setEdges((prev) => reconnectEdge(oldEdge, newConnection, prev));
           }
         }}
+        onConnectEnd={(event, connectionState) => {
+          if (!connectionState.fromHandle) {
+            return;
+          }
+
+          if (connectionState.isValid === false && connectionState.toHandle) {
+            const result = validateConnectionSimple(
+              createConnectionFromDraggedHandle({
+                fromNodeId: connectionState.fromHandle.nodeId,
+                fromHandleId: connectionState.fromHandle.id,
+                fromHandleType: connectionState.fromHandle.type,
+                otherNodeId: connectionState.toHandle.nodeId,
+                otherHandleId: connectionState.toHandle.id,
+              }),
+              nodeManager,
+              edges,
+            );
+
+            if (!result.valid) {
+              showErrorToast(result.error);
+            }
+            return;
+          }
+
+          if (connectionState.toHandle || connectionState.isValid) {
+            return;
+          }
+
+          const sourceNode = nodeManager.tryGetNode(connectionState.fromHandle.nodeId);
+          const clientPosition = getClientPosition(event);
+          if (!sourceNode || !clientPosition) {
+            return;
+          }
+
+          if (connectionState.fromHandle.type === 'source') {
+            const outputCapacity = validateSourceOutputCapacity(
+              sourceNode,
+              connectionState.fromHandle.id,
+              edges,
+            );
+            if (!outputCapacity.valid) {
+              showErrorToast(outputCapacity.error);
+              return;
+            }
+          }
+
+          setAddOperationPopover({
+            open: true,
+            popOverPosition: { left: clientPosition.x, top: clientPosition.y },
+            parentId: sourceNode.parentId || null,
+            sourceConnection: {
+              sourceNodeId: sourceNode.id,
+              sourceHandle: connectionState.fromHandle.id || null,
+              sourceHandleType: connectionState.fromHandle.type,
+            },
+          });
+          suppressNextPaneClick.current = true;
+        }}
         onNodeClick={(ev, node) => {
           ev.stopPropagation();
           closeAllPopovers();
@@ -710,6 +819,11 @@ function DiagramEditor() {
           });
         }}
         onPaneClick={(ev) => {
+          if (suppressNextPaneClick.current) {
+            suppressNextPaneClick.current = false;
+            return;
+          }
+
           if (addOperationPopover.open || editOpFormPopoverProps.open) {
             closeAllPopovers();
             return;
@@ -724,6 +838,7 @@ function DiagramEditor() {
             open: true,
             popOverPosition: { left: ev.clientX, top: ev.clientY },
             parentId: null,
+            sourceConnection: null,
           });
         }}
         onMouseDownCapture={handleMouseDown}
@@ -741,6 +856,7 @@ function DiagramEditor() {
             <Typography variant="h4">{editorMode.templateId}</Typography>
           </Panel>
         )}
+        <ConnectionHintPanel nodeManager={nodeManager} />
         <CommandPanel
           onNodeChanges={handleNodeChanges}
           onExportClick={React.useCallback(
@@ -773,9 +889,7 @@ function DiagramEditor() {
         )}
         <Popover
           open={addOperationPopover.open}
-          onClose={() =>
-            setAddOperationPopover((prev) => ({ ...prev, open: false }))
-          }
+          onClose={closeAllPopovers}
           anchorReference="anchorPosition"
           anchorPosition={addOperationPopover.popOverPosition}
           // use a custom component to prevent the popover from creating an invisible element that blocks clicks
@@ -784,8 +898,36 @@ function DiagramEditor() {
           <AddOperation
             parentId={addOperationPopover.parentId || undefined}
             newNodePosition={addOperationNewNodePosition}
-            onAdd={(changes) => {
+            sourceConnection={addOperationPopover.sourceConnection}
+            onAdd={({ changes, primaryNodeId }) => {
               handleNodeChanges(changes);
+              if (addOperationPopover.sourceConnection) {
+                const targetNode =
+                  changes.find((change) => change.item.id === primaryNodeId)?.item ||
+                  null;
+                if (targetNode) {
+                  const newEdge = tryCreateEdge(
+                    addOperationPopover.sourceConnection.sourceHandleType === 'source'
+                      ? {
+                          source: addOperationPopover.sourceConnection.sourceNodeId,
+                          sourceHandle: addOperationPopover.sourceConnection.sourceHandle,
+                          target: targetNode.id,
+                          targetHandle: null,
+                        }
+                      : {
+                          source: targetNode.id,
+                          sourceHandle: null,
+                          target: addOperationPopover.sourceConnection.sourceNodeId,
+                          targetHandle: addOperationPopover.sourceConnection.sourceHandle,
+                        },
+                    undefined,
+                    targetNode,
+                  );
+                  if (newEdge) {
+                    setEdges((prev) => addEdge(newEdge, prev));
+                  }
+                }
+              }
               closeAllPopovers();
             }}
           />
diff --git a/diagram-editor/frontend/forms/buffer-edge-form.tsx b/diagram-editor/frontend/forms/buffer-edge-form.tsx
index efaa89b6..9741b44b 100644
--- a/diagram-editor/frontend/forms/buffer-edge-form.tsx
+++ b/diagram-editor/frontend/forms/buffer-edge-form.tsx
@@ -68,7 +68,7 @@ export function BufferEdgeInputForm({
     if (typeof targetNode.data.op.builder === 'string') {
       const sectionRegistration = registry.sections[targetNode.data.op.builder];
       return sectionRegistration
-        ? Object.keys(sectionRegistration.metadata.buffers)
+        ? Object.keys(sectionRegistration.interface.buffers)
         : [];
     } else if (typeof targetNode.data.op.template === 'string') {
       const template = templates[targetNode.data.op.template];
diff --git a/diagram-editor/frontend/forms/data-input-form.tsx b/diagram-editor/frontend/forms/data-input-form.tsx
index a5d8ed54..f210b4a8 100644
--- a/diagram-editor/frontend/forms/data-input-form.tsx
+++ b/diagram-editor/frontend/forms/data-input-form.tsx
@@ -37,7 +37,7 @@ export function DataInputForm({ edge, onChange }: DataInputEdgeFormProps) {
 
     if (typeof targetNode.data.op.builder === 'string') {
       const sectionBuilder = registry.sections[targetNode.data.op.builder];
-      return Object.keys(sectionBuilder?.metadata.inputs || {});
+      return Object.keys(sectionBuilder?.interface.inputs || {});
     } else if (typeof targetNode.data.op.template === 'string') {
       const template = templates[targetNode.data.op.template];
       return template ? getTemplateInputs(template) : [];
diff --git a/diagram-editor/frontend/forms/section-form.tsx b/diagram-editor/frontend/forms/section-form.tsx
index ec770553..a58db85d 100644
--- a/diagram-editor/frontend/forms/section-form.tsx
+++ b/diagram-editor/frontend/forms/section-form.tsx
@@ -231,7 +231,7 @@ export function SectionEdgeForm({ edge, onChange }: SectionEdgeFormProps) {
     if (sourceNode && isSectionNode(sourceNode)) {
       if (typeof sourceNode.data.op.builder === 'string') {
         const sectionBuilder = registry.sections[sourceNode.data.op.builder];
-        return Object.keys(sectionBuilder?.metadata.outputs || {});
+        return Object.keys(sectionBuilder?.interface.outputs || {});
       } else if (typeof sourceNode.data.op.template === 'string') {
         const template = templates[sourceNode.data.op.template];
         return template?.outputs || [];
diff --git a/diagram-editor/frontend/handles.tsx b/diagram-editor/frontend/handles.tsx
index a2082986..89011e64 100644
--- a/diagram-editor/frontend/handles.tsx
+++ b/diagram-editor/frontend/handles.tsx
@@ -1,7 +1,15 @@
 import {
   Handle as ReactFlowHandle,
   type HandleProps as ReactFlowHandleProps,
+  useConnection,
+  useNodeId,
 } from '@xyflow/react';
+import { useNodeManager } from './node-manager';
+import {
+  createConnectionFromDraggedHandle,
+  validateConnectionSimple,
+} from './utils/connection';
+import { useEdges } from './use-edges';
 import { exhaustiveCheck } from './utils/exhaustive-check';
 
 export enum HandleId {
@@ -53,11 +61,52 @@ function variantClassName(handleType?: HandleType): string | undefined {
 }
 
 export function Handle({ id, variant, className, ...baseProps }: HandleProps) {
-  const prependClassName = className
-    ? `${variantClassName(variant)} ${className} `
-    : variantClassName(variant);
+  const nodeId = useNodeId();
+  const nodeManager = useNodeManager();
+  const edges = useEdges();
+  const connection = useConnection();
+  const handleType = baseProps.type || 'source';
+
+  const classNames: string[] = [];
+  const variantClass = variantClassName(variant);
+  if (variantClass) {
+    classNames.push(variantClass);
+  }
+  if (className) {
+    classNames.push(className);
+  }
+
+  if (
+    nodeId &&
+    connection.inProgress &&
+    connection.fromHandle &&
+    connection.fromHandle.nodeId !== nodeId &&
+    connection.fromHandle.type !== handleType
+  ) {
+    const conn = createConnectionFromDraggedHandle({
+      fromNodeId: connection.fromHandle.nodeId,
+      fromHandleId: connection.fromHandle.id,
+      fromHandleType: connection.fromHandle.type,
+      otherNodeId: nodeId,
+      otherHandleId: id,
+    });
+
+    const result = validateConnectionSimple(
+      conn,
+      nodeManager,
+      edges,
+    );
+
+    if (result.valid) {
+      classNames.push('handle-compatible');
+    }
+  }
 
   return (
-    <ReactFlowHandle {...baseProps} id={id} className={prependClassName} />
+    <ReactFlowHandle
+      {...baseProps}
+      id={id}
+      className={classNames.length > 0 ? classNames.join(' ') : undefined}
+    />
   );
 }
diff --git a/diagram-editor/frontend/nodes/test-utils.tsx b/diagram-editor/frontend/nodes/test-utils.tsx
index acf3d099..27314f35 100644
--- a/diagram-editor/frontend/nodes/test-utils.tsx
+++ b/diagram-editor/frontend/nodes/test-utils.tsx
@@ -54,15 +54,20 @@ export function render(
   registry?: DiagramElementMetadata,
   options?: Omit<RenderOptions, 'wrapper'>,
 ) {
-  registry = registry || {
-    messages: {},
+  const resolvedRegistry = registry || {
+    messages: [],
     nodes: {},
+    reverse_message_lookup: {
+      result: [],
+      split: [],
+      unzip: [],
+    },
     schemas: {},
     sections: {},
     trace_supported: false,
   };
   return baseRender(ui, {
-    wrapper: createTestingProviders(registry),
+    wrapper: createTestingProviders(resolvedRegistry),
     ...options,
   });
 }
diff --git a/diagram-editor/frontend/registry-provider.tsx b/diagram-editor/frontend/registry-provider.tsx
index c39e707e..401b8318 100644
--- a/diagram-editor/frontend/registry-provider.tsx
+++ b/diagram-editor/frontend/registry-provider.tsx
@@ -9,12 +9,12 @@ import {
 import { timer } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { useApiClient } from './api-client-provider';
-import type { DiagramElementMetdata } from './types/api';
+import type { DiagramElementMetadata } from './types/api';
 
-const RegistryContextComp = createContext<DiagramElementMetdata | null>(null);
+const RegistryContextComp = createContext<DiagramElementMetadata | null>(null);
 
 export const RegistryProvider = ({ children }: PropsWithChildren) => {
-  const [registry, setRegistry] = useState<DiagramElementMetdata | null>(null);
+  const [registry, setRegistry] = useState<DiagramElementMetadata | null>(null);
   const [showLoading, setShowLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   const apiClient = useApiClient();
diff --git a/diagram-editor/frontend/run-button.tsx b/diagram-editor/frontend/run-button.tsx
index 1e172ae5..f963ba0d 100644
--- a/diagram-editor/frontend/run-button.tsx
+++ b/diagram-editor/frontend/run-button.tsx
@@ -115,8 +115,13 @@ export function RunButton({ requestJsonString }: RunButtonProps) {
         slotProps={{
           paper: {
             sx: {
-              overflow: 'visible',
+              overflow: 'hidden',
               mt: 0.5,
+              width: 'min(560px, calc(100vw - 32px))',
+              maxWidth: 'calc(100vw - 32px)',
+              maxHeight: 'calc(100vh - 32px)',
+              display: 'flex',
+              flexDirection: 'column',
               backgroundColor: theme.palette.background.paper,
               border: `1px solid ${theme.palette.divider}`,
               '&:before': {
@@ -138,13 +143,20 @@ export function RunButton({ requestJsonString }: RunButtonProps) {
       >
         <DialogTitle>Run Workflow</DialogTitle>
         <Divider />
-        <DialogContent sx={{ width: 500 }}>
+        <DialogContent
+          sx={{
+            width: '100%',
+            overflowY: 'auto',
+            flex: 1,
+          }}
+        >
           <Stack spacing={2}>
             <Typography variant="body1">Request:</Typography>
             <TextField
               fullWidth
               multiline
-              rows={10}
+              minRows={6}
+              maxRows={10}
               variant="outlined"
               value={requestJson}
               slotProps={{
@@ -179,7 +191,8 @@ export function RunButton({ requestJsonString }: RunButtonProps) {
             <TextField
               fullWidth
               multiline
-              rows={10}
+              minRows={6}
+              maxRows={10}
               variant="outlined"
               value={responseValue}
               slotProps={{
@@ -191,7 +204,7 @@ export function RunButton({ requestJsonString }: RunButtonProps) {
             />
           </Stack>
         </DialogContent>
-        <DialogActions>
+        <DialogActions sx={{ flexShrink: 0 }}>
           <Button
             variant="contained"
             onClick={handleRunClick}
diff --git a/diagram-editor/frontend/types/api.d.ts b/diagram-editor/frontend/types/api.d.ts
index 765bb4e8..70dd65b3 100644
--- a/diagram-editor/frontend/types/api.d.ts
+++ b/diagram-editor/frontend/types/api.d.ts
@@ -62,11 +62,6 @@ export type BuiltinTarget = 'terminate' | 'dispose' | 'cancel';
  * via the `definition` "TraceToggle".
  */
 export type TraceToggle = 'off' | 'on' | 'messages';
-/**
- * This interface was referenced by `DiagramEditorApi`'s JSON-Schema
- * via the `definition` "BufferIdentifier".
- */
-export type BufferIdentifier = string | number;
 /**
  * This interface was referenced by `DiagramEditorApi`'s JSON-Schema
  * via the `definition` "RetentionPolicy".
@@ -195,6 +190,11 @@ export type SectionSchema = (
   trace?: TraceToggle | null;
   [k: string]: unknown;
 };
+/**
+ * This interface was referenced by `DiagramEditorApi`'s JSON-Schema
+ * via the `definition` "IdentifierRef".
+ */
+export type IdentifierRef = string | number;
 /**
  * This interface was referenced by `DiagramEditorApi`'s JSON-Schema
  * via the `definition` "InputRemapping".
@@ -1073,7 +1073,7 @@ export interface JoinSchema {
    * the value will leave the buffer unchanged after the join operation takes
    * place.
    */
-  clone?: BufferIdentifier[];
+  clone?: IdentifierRef[];
   /**
    * Override for text that should be displayed for an operation within an
    * editor.
diff --git a/diagram-editor/frontend/utils/add-operation-catalog.test.ts b/diagram-editor/frontend/utils/add-operation-catalog.test.ts
new file mode 100644
index 00000000..6c0cde2f
--- /dev/null
+++ b/diagram-editor/frontend/utils/add-operation-catalog.test.ts
@@ -0,0 +1,87 @@
+import { NodeManager } from '../node-manager';
+import { createOperationNode } from '../nodes';
+import {
+  filterCompatibleAddOperations,
+  getVisibleAddOperations,
+} from './add-operation-catalog';
+import { ROOT_NAMESPACE } from './namespace';
+
+describe('add operation catalog', () => {
+  test('filters add-operation suggestions to compatible targets', () => {
+    const sourceNode = createOperationNode(
+      ROOT_NAMESPACE,
+      undefined,
+      { x: 0, y: 0 },
+      { type: 'buffer' },
+      'source_buffer',
+    );
+    const compatible = filterCompatibleAddOperations(
+      getVisibleAddOperations({
+        isTemplateMode: false,
+        namespace: ROOT_NAMESPACE,
+      }),
+      sourceNode,
+      null,
+      {
+        namespace: ROOT_NAMESPACE,
+        parentId: undefined,
+      },
+    );
+
+    expect(compatible.some((operation) => operation.key === 'join')).toBe(true);
+    expect(compatible.some((operation) => operation.key === 'listen')).toBe(
+      true,
+    );
+    expect(compatible.some((operation) => operation.key === 'node')).toBe(
+      false,
+    );
+    expect(new NodeManager([sourceNode]).getNode(sourceNode.id).type).toBe('buffer');
+  });
+
+  test('shows section interface operations only for template roots', () => {
+    const normalMode = getVisibleAddOperations({
+      isTemplateMode: false,
+      namespace: ROOT_NAMESPACE,
+    });
+    const templateMode = getVisibleAddOperations({
+      isTemplateMode: true,
+      namespace: ROOT_NAMESPACE,
+    });
+
+    expect(normalMode.some((operation) => operation.key === 'sectionInput')).toBe(
+      false,
+    );
+    expect(templateMode.some((operation) => operation.key === 'sectionInput')).toBe(
+      true,
+    );
+  });
+
+  test('filters add-operation suggestions for upstream sources when dragging from a target handle', () => {
+    const targetNode = createOperationNode(
+      ROOT_NAMESPACE,
+      undefined,
+      { x: 0, y: 0 },
+      { type: 'join', buffers: [], next: { builtin: 'dispose' } },
+      'target_join',
+    );
+    const compatible = filterCompatibleAddOperations(
+      getVisibleAddOperations({
+        isTemplateMode: false,
+        namespace: ROOT_NAMESPACE,
+      }),
+      targetNode,
+      null,
+      {
+        namespace: ROOT_NAMESPACE,
+        parentId: undefined,
+      },
+      'target',
+    );
+
+    expect(compatible.some((operation) => operation.key === 'buffer')).toBe(true);
+    expect(compatible.some((operation) => operation.key === 'fork_result')).toBe(
+      false,
+    );
+    expect(compatible.some((operation) => operation.key === 'node')).toBe(false);
+  });
+});
diff --git a/diagram-editor/frontend/utils/add-operation-catalog.ts b/diagram-editor/frontend/utils/add-operation-catalog.ts
new file mode 100644
index 00000000..d2b23629
--- /dev/null
+++ b/diagram-editor/frontend/utils/add-operation-catalog.ts
@@ -0,0 +1,459 @@
+import type { NodeAddChange, XYPosition } from '@xyflow/react';
+import { v4 as uuidv4 } from 'uuid';
+import type { NodeManager } from '../node-manager';
+import {
+  createOperationNode,
+  createScopeNode,
+  createSectionBufferNode,
+  createSectionInputNode,
+  createSectionOutputNode,
+  type DiagramEditorNode,
+  isSectionBufferNode,
+  isSectionInputNode,
+  isSectionOutputNode,
+} from '../nodes';
+import type { DiagramOperation, NextOperation } from '../types/api';
+import { getValidEdgeTypes } from './connection';
+import { ROOT_NAMESPACE } from './namespace';
+import { addUniqueSuffix } from './unique-value';
+
+export type AddOperationKey =
+  | 'sectionInput'
+  | 'sectionOutput'
+  | 'sectionBuffer'
+  | 'node'
+  | 'fork_clone'
+  | 'unzip'
+  | 'fork_result'
+  | 'split'
+  | 'join'
+  | 'transform'
+  | 'buffer'
+  | 'buffer_access'
+  | 'listen'
+  | 'stream_out'
+  | 'scope'
+  | 'section';
+
+type AddOperationDefinition = {
+  key: AddOperationKey;
+  label: string;
+  templateOnlyRoot?: boolean;
+  createPreviewNode: (
+    namespace: string,
+    parentId: string | undefined,
+  ) => DiagramEditorNode;
+  createChanges: (args: {
+    namespace: string;
+    parentId: string | undefined;
+    newNodePosition: XYPosition;
+    nodeManager: NodeManager;
+  }) => NodeAddChange<DiagramEditorNode>[];
+};
+
+function createSectionInputChange(
+  remappedId: string,
+  targetId: NextOperation,
+  position: XYPosition,
+): NodeAddChange<DiagramEditorNode> {
+  return {
+    type: 'add',
+    item: createSectionInputNode(remappedId, targetId, position),
+  };
+}
+
+function createSectionOutputChange(
+  outputId: string,
+  position: XYPosition,
+): NodeAddChange<DiagramEditorNode> {
+  return {
+    type: 'add',
+    item: createSectionOutputNode(outputId, position),
+  };
+}
+
+function createSectionBufferChange(
+  remappedId: string,
+  targetId: NextOperation,
+  position: XYPosition,
+): NodeAddChange<DiagramEditorNode> {
+  return {
+    type: 'add',
+    item: createSectionBufferNode(remappedId, targetId, position),
+  };
+}
+
+function createNodeChange(
+  namespace: string,
+  parentId: string | undefined,
+  newNodePosition: XYPosition,
+  op: DiagramOperation,
+): NodeAddChange<DiagramEditorNode>[] {
+  if (op.type === 'scope') {
+    return createScopeNode(
+      namespace,
+      parentId,
+      newNodePosition,
+      op,
+      uuidv4(),
+    ).map((node) => ({ type: 'add', item: node }));
+  }
+
+  return [
+    {
+      type: 'add',
+      item: createOperationNode(
+        namespace,
+        parentId,
+        newNodePosition,
+        op,
+        uuidv4(),
+      ),
+    },
+  ];
+}
+
+export const ADD_OPERATION_DEFINITIONS: AddOperationDefinition[] = [
+  {
+    key: 'sectionInput',
+    label: 'Section Input',
+    templateOnlyRoot: true,
+    createPreviewNode: () =>
+      createSectionInputNode('preview_input', { builtin: 'dispose' }, { x: 0, y: 0 }),
+    createChanges: ({ newNodePosition, nodeManager }) => {
+      const remappedId = addUniqueSuffix(
+        'new_input',
+        nodeManager.nodes
+          .filter(isSectionInputNode)
+          .map((n) => n.data.remappedId),
+      );
+      return [
+        createSectionInputChange(
+          remappedId,
+          { builtin: 'dispose' },
+          newNodePosition,
+        ),
+      ];
+    },
+  },
+  {
+    key: 'sectionOutput',
+    label: 'Section Output',
+    templateOnlyRoot: true,
+    createPreviewNode: () => createSectionOutputNode('preview_output', { x: 0, y: 0 }),
+    createChanges: ({ newNodePosition, nodeManager }) => {
+      const outputId = addUniqueSuffix(
+        'new_output',
+        nodeManager.nodes
+          .filter(isSectionOutputNode)
+          .map((n) => n.data.outputId),
+      );
+      return [createSectionOutputChange(outputId, newNodePosition)];
+    },
+  },
+  {
+    key: 'sectionBuffer',
+    label: 'Section Buffer',
+    templateOnlyRoot: true,
+    createPreviewNode: () =>
+      createSectionBufferNode('preview_buffer', { builtin: 'dispose' }, { x: 0, y: 0 }),
+    createChanges: ({ newNodePosition, nodeManager }) => {
+      const remappedId = addUniqueSuffix(
+        'new_buffer',
+        nodeManager.nodes
+          .filter(isSectionBufferNode)
+          .map((n) => n.data.remappedId),
+      );
+      return [
+        createSectionBufferChange(
+          remappedId,
+          { builtin: 'dispose' },
+          newNodePosition,
+        ),
+      ];
+    },
+  },
+  {
+    key: 'node',
+    label: 'Node',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'node', builder: '', next: { builtin: 'dispose' } },
+        'preview_node',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'node',
+        builder: '',
+        next: { builtin: 'dispose' },
+      }),
+  },
+  {
+    key: 'fork_clone',
+    label: 'Fork Clone',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'fork_clone', next: [] },
+        'preview_fork_clone',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'fork_clone',
+        next: [],
+      }),
+  },
+  {
+    key: 'unzip',
+    label: 'Unzip',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'unzip', next: [] },
+        'preview_unzip',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'unzip',
+        next: [],
+      }),
+  },
+  {
+    key: 'fork_result',
+    label: 'Fork Result',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        {
+          type: 'fork_result',
+          err: { builtin: 'dispose' },
+          ok: { builtin: 'dispose' },
+        },
+        'preview_fork_result',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'fork_result',
+        err: { builtin: 'dispose' },
+        ok: { builtin: 'dispose' },
+      }),
+  },
+  {
+    key: 'split',
+    label: 'Split',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'split' },
+        'preview_split',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'split',
+      }),
+  },
+  {
+    key: 'join',
+    label: 'Join',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'join', buffers: [], next: { builtin: 'dispose' } },
+        'preview_join',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'join',
+        buffers: [],
+        next: { builtin: 'dispose' },
+      }),
+  },
+  {
+    key: 'transform',
+    label: 'Transform',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'transform', cel: '', next: { builtin: 'dispose' } },
+        'preview_transform',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'transform',
+        cel: '',
+        next: { builtin: 'dispose' },
+      }),
+  },
+  {
+    key: 'buffer',
+    label: 'Buffer',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'buffer' },
+        'preview_buffer_node',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'buffer',
+      }),
+  },
+  {
+    key: 'buffer_access',
+    label: 'Buffer Access',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'buffer_access', buffers: [], next: { builtin: 'dispose' } },
+        'preview_buffer_access',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'buffer_access',
+        buffers: [],
+        next: { builtin: 'dispose' },
+      }),
+  },
+  {
+    key: 'listen',
+    label: 'Listen',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'listen', buffers: [], next: { builtin: 'dispose' } },
+        'preview_listen',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'listen',
+        buffers: [],
+        next: { builtin: 'dispose' },
+      }),
+  },
+  {
+    key: 'stream_out',
+    label: 'Stream Out',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'stream_out', name: '' },
+        'preview_stream_out',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'stream_out',
+        name: '',
+      }),
+  },
+  {
+    key: 'scope',
+    label: 'Scope',
+    createPreviewNode: (namespace, parentId) =>
+      createScopeNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        {
+          type: 'scope',
+          start: { builtin: 'dispose' },
+          ops: {},
+          next: { builtin: 'dispose' },
+        },
+        'preview_scope',
+      )[0],
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'scope',
+        start: { builtin: 'dispose' },
+        ops: {},
+        next: { builtin: 'dispose' },
+      }),
+  },
+  {
+    key: 'section',
+    label: 'Section',
+    createPreviewNode: (namespace, parentId) =>
+      createOperationNode(
+        namespace,
+        parentId,
+        { x: 0, y: 0 },
+        { type: 'section', template: '' },
+        'preview_section',
+      ),
+    createChanges: ({ namespace, parentId, newNodePosition }) =>
+      createNodeChange(namespace, parentId, newNodePosition, {
+        type: 'section',
+        template: '',
+      }),
+  },
+];
+
+export function getVisibleAddOperations(options: {
+  isTemplateMode: boolean;
+  namespace: string;
+}) {
+  return ADD_OPERATION_DEFINITIONS.filter((definition) => {
+    if (!definition.templateOnlyRoot) {
+      return true;
+    }
+
+    return options.isTemplateMode && options.namespace === ROOT_NAMESPACE;
+  });
+}
+
+export function filterCompatibleAddOperations(
+  definitions: AddOperationDefinition[],
+  anchorNode: DiagramEditorNode,
+  anchorHandle: string | null | undefined,
+  options: { namespace: string; parentId: string | undefined },
+  anchorHandleType: 'source' | 'target' = 'source',
+) {
+  return definitions.filter((definition) => {
+    const previewNode = definition.createPreviewNode(
+      options.namespace,
+      options.parentId,
+    );
+    if (
+      anchorHandleType === 'target' &&
+      previewNode.type === 'fork_result'
+    ) {
+      return false;
+    }
+    return anchorHandleType === 'source'
+      ? getValidEdgeTypes(
+          anchorNode,
+          anchorHandle,
+          previewNode,
+          null,
+        ).length > 0
+      : getValidEdgeTypes(
+          previewNode,
+          null,
+          anchorNode,
+          anchorHandle,
+        ).length > 0;
+  });
+}
diff --git a/diagram-editor/frontend/utils/connection.test.ts b/diagram-editor/frontend/utils/connection.test.ts
index fdfba6c6..34dc89bd 100644
--- a/diagram-editor/frontend/utils/connection.test.ts
+++ b/diagram-editor/frontend/utils/connection.test.ts
@@ -15,13 +15,50 @@ import {
   createTerminateNode,
 } from '../nodes';
 import {
+  createConnectionFromDraggedHandle,
   getValidEdgeTypes,
+  validateConnectionSimple,
   validateEdgeQuick,
   validateEdgeSimple,
+  validateSourceOutputCapacity,
 } from './connection';
 import { ROOT_NAMESPACE } from './namespace';
 
 describe('validate edges', () => {
+  test('createConnectionFromDraggedHandle normalizes source drags', () => {
+    expect(
+      createConnectionFromDraggedHandle({
+        fromNodeId: 'a',
+        fromHandleId: 'h1',
+        fromHandleType: 'source',
+        otherNodeId: 'b',
+        otherHandleId: 'h2',
+      }),
+    ).toEqual({
+      source: 'a',
+      sourceHandle: 'h1',
+      target: 'b',
+      targetHandle: 'h2',
+    });
+  });
+
+  test('createConnectionFromDraggedHandle normalizes target drags', () => {
+    expect(
+      createConnectionFromDraggedHandle({
+        fromNodeId: 'b',
+        fromHandleId: 'h2',
+        fromHandleType: 'target',
+        otherNodeId: 'a',
+        otherHandleId: 'h1',
+      }),
+    ).toEqual({
+      source: 'a',
+      sourceHandle: 'h1',
+      target: 'b',
+      targetHandle: 'h2',
+    });
+  });
+
   test('"buffer" can only connect to operations that accepts a buffer', () => {
     const node = createOperationNode(
       ROOT_NAMESPACE,
@@ -321,6 +358,29 @@ describe('validate edges', () => {
       const result = validateEdgeSimple(newEdge, nodeManager, edges);
       expect(result.valid).toBe(false);
     }
+    {
+      const capacity = validateSourceOutputCapacity(nodeNode, null, edges);
+      expect(capacity).toEqual({
+        valid: false,
+        error: 'This output can only be connected to one input',
+      });
+    }
+    {
+      const result = validateConnectionSimple(
+        {
+          source: nodeNode.id,
+          sourceHandle: null,
+          target: forkCloneNode2.id,
+          targetHandle: null,
+        },
+        nodeManager,
+        edges,
+      );
+      expect(result).toEqual({
+        valid: false,
+        error: 'This output can only be connected to one input',
+      });
+    }
   });
 
   test('"fork_clone" operation allows multiple outputs', () => {
diff --git a/diagram-editor/frontend/utils/connection.ts b/diagram-editor/frontend/utils/connection.ts
index 203b9c80..45e5d32f 100644
--- a/diagram-editor/frontend/utils/connection.ts
+++ b/diagram-editor/frontend/utils/connection.ts
@@ -202,6 +202,28 @@ function createValidationError(error: string): ValidationError {
   return { valid: false, error };
 }
 
+export function createConnectionFromDraggedHandle(args: {
+  fromNodeId: string;
+  fromHandleId: string | null | undefined;
+  fromHandleType: 'source' | 'target';
+  otherNodeId: string;
+  otherHandleId: string | null | undefined;
+}): Connection {
+  return args.fromHandleType === 'source'
+    ? {
+        source: args.fromNodeId,
+        sourceHandle: args.fromHandleId || null,
+        target: args.otherNodeId,
+        targetHandle: args.otherHandleId || null,
+      }
+    : {
+        source: args.otherNodeId,
+        sourceHandle: args.otherHandleId || null,
+        target: args.fromNodeId,
+        targetHandle: args.fromHandleId || null,
+      };
+}
+
 /**
  * Perform a quick check if an edge is valid.
  * This only checks if the edge type is valid, does not check for conflicting edges, data correctness etc.
@@ -274,6 +296,83 @@ export function validateConnectionQuick(
   return { valid: true };
 }
 
+export function validateSourceOutputCapacity(
+  sourceNode: DiagramEditorNode,
+  sourceHandle: string | null | undefined,
+  edges: DiagramEditorEdge[],
+  edgeId?: string,
+): ConnectionValidationResult {
+  // Check if the source supports emitting multiple outputs.
+  // NOTE: All nodes supports "Many" inputs so we don't need to check that.
+  const outputCardinality = getOutputCardinality(
+    sourceNode.type,
+    sourceHandle,
+  );
+  switch (outputCardinality) {
+    case CardinalityType.Single: {
+      if (
+        edges.some(
+          (e) =>
+            e.source === sourceNode.id &&
+            (sourceHandle || null) === (e.sourceHandle || null) &&
+            edgeId !== e.id,
+        )
+      ) {
+        return createValidationError(
+          'This output can only be connected to one input',
+        );
+      }
+      break;
+    }
+    case CardinalityType.Pair: {
+      let count = 0;
+      for (const e of edges) {
+        if (e.source === sourceNode.id && edgeId !== e.id) {
+          count++;
+        }
+        if (count > 1) {
+          return createValidationError(
+            'This output can only be connected to two inputs',
+          );
+        }
+      }
+      break;
+    }
+    case CardinalityType.Many: {
+      break;
+    }
+    default: {
+      exhaustiveCheck(outputCardinality);
+      throw new Error('unknown output cardinality');
+    }
+  }
+
+  return { valid: true };
+}
+
+export function validateConnectionSimple(
+  conn: Connection | DiagramEditorEdge,
+  nodeManager: NodeManager,
+  edges: DiagramEditorEdge[],
+): ConnectionValidationResult {
+  const quickCheck = validateConnectionQuick(conn, nodeManager);
+  if (!quickCheck.valid) {
+    return quickCheck;
+  }
+
+  const sourceNode = nodeManager.tryGetNode(conn.source);
+  if (!sourceNode) {
+    return createValidationError('cannot find source or target node');
+  }
+
+  return validateSourceOutputCapacity(
+    sourceNode,
+    conn.sourceHandle,
+    edges,
+    'id' in conn ? conn.id : undefined,
+  );
+}
+
 /**
  * Perform a simple check of the validity of edges.
  * Includes the checks in `validateEdgeQuick` and the following:
@@ -316,49 +415,14 @@ export function validateEdgeSimple(
     }
   }
 
-  // Check if the source supports emitting multiple outputs.
-  // NOTE: All nodes supports "Many" inputs so we don't need to check that.
-  const outputCardinality = getOutputCardinality(
-    sourceNode.type,
+  const outputCapacity = validateSourceOutputCapacity(
+    sourceNode,
     edge.sourceHandle,
+    edges,
+    edge.id,
   );
-  switch (outputCardinality) {
-    case CardinalityType.Single: {
-      if (
-        edges.some(
-          (e) =>
-            e.source === sourceNode.id &&
-            (edge.sourceHandle || null) === (e.sourceHandle || null) &&
-            edge.id !== e.id,
-        )
-      ) {
-        return createValidationError(
-          'This output can only be connected to one input',
-        );
-      }
-      break;
-    }
-    case CardinalityType.Pair: {
-      let count = 0;
-      for (const e of edges) {
-        if (e.source === sourceNode.id && edge.id !== e.id) {
-          count++;
-        }
-        if (count > 1) {
-          return createValidationError(
-            'This output can only be connected to two inputs',
-          );
-        }
-      }
-      break;
-    }
-    case CardinalityType.Many: {
-      break;
-    }
-    default: {
-      exhaustiveCheck(outputCardinality);
-      throw new Error('unknown output cardinality');
-    }
+  if (!outputCapacity.valid) {
+    return outputCapacity;
   }
 
   return { valid: true, validEdgeTypes: quickCheck.validEdgeTypes };