@kiberon-labs/behave-graph-flow 2.0.0 → 3.0.0

package/docs/protocol.md

@@ -36,9 +36,9 @@ This protocol defines a WebSocket-based interface for decoupled execution of beh
 	```
 
 **Authentication Types:**
-- `bearer` — Bearer token (JWT or API key)
-- `apiKey` — Simple API key
-- `none` — No authentication (development only)
+- `bearer` , Bearer token (JWT or API key)
+- `apiKey` , Simple API key
+- `none` , No authentication (development only)
 
 **Example with API Key:**
 ```json
@@ -371,7 +371,9 @@ Get metadata about all available node types and their sockets.
 		"trace": true,
 		"eventFilter": { "variables": ["score", "health"], "events": ["onDeath"] },
 		"maxExecutionTimeMs": 30000,
-		// Whether the graph should complete with no more pending fibres
+		// Whether the run finalizes once no fibres are pending. Defaults to
+		// false: the run stays alive (servicing event-node subscriptions such
+		// as ai/onToolCall) until stopGraph.
 		"autoEnd":true
 	}
 }
@@ -546,6 +548,27 @@ Get metadata about all available node types and their sockets.
 }
 ```
 
+#### Trace Batch Event
+Servers should prefer `traceBatch` over per-event `trace` messages: node
+execution produces two events per node (start and end), so a graph ticking at
+display rate emits hundreds of events per frame. Buffering them and flushing
+one batch per flush window (roughly one frame, ~16ms) keeps the message
+pipeline off the hot path. Clients accept both; single `trace` messages remain
+valid for servers that predate batching. Timestamps are run-relative
+milliseconds, stamped when the event occurred (not when the batch flushed).
+
+```json
+{
+	"type": "traceBatch",
+	"runId": "abc123",
+	"graphId": "main-graph-1",
+	"events": [
+		{ "nodeId": "node42", "event": "start", "data": { "typeName": "flow/branch" }, "timestamp": 1200 },
+		{ "nodeId": "node42", "event": "end", "data": { "typeName": "flow/branch" }, "timestamp": 1201 }
+	]
+}
+```
+
 #### Log Event
 ```json
 {
@@ -559,7 +582,7 @@ Get metadata about all available node types and their sockets.
 ```
 
 ### Variable Change Events
-- `variableChanged` — Emitted when a variable's value changes during execution.
+- `variableChanged` , Emitted when a variable's value changes during execution.
 	- Includes: `runId`, `graphId`, `variableName`, `oldValue`, `newValue`, and optionally `nodeId` (if the change was triggered by a node).
 
 #### Example Variable Change Event
@@ -576,7 +599,7 @@ Get metadata about all available node types and their sockets.
 ```
 
 ### Event Emission
-- `eventEmitted` — Emitted when an event is triggered during graph execution.
+- `eventEmitted` , Emitted when an event is triggered during graph execution.
   - Includes: `runId`, `graphId`, `eventName`, `payload`, and optionally `nodeId` (if the event was triggered by a specific node).
 
 #### Example Event Emission
@@ -592,7 +615,7 @@ Get metadata about all available node types and their sockets.
 ```
 
 ### Node Addition Events
-- `nodeAdded` — Emitted when a node is added to a graph during execution.
+- `nodeAdded` , Emitted when a node is added to a graph during execution.
   - Includes: `runId`, `graphId`, `nodeId`, `nodeType`, and optionally `nodeData` with the full node configuration.
 
 #### Example Node Addition Event
@@ -617,19 +640,19 @@ Get metadata about all available node types and their sockets.
 ## 10. Error Handling
 
 ### Error Codes
-- `PROTOCOL_VERSION_MISMATCH` — Incompatible protocol versions
-- `PROTOCOL_VIOLATION` — Protocol rules violated (e.g., hello not sent first)
-- `AUTHENTICATION_FAILED` — Invalid or missing authentication credentials
-- `AUTHENTICATION_REQUIRED` — Authentication is required but not provided
-- `SESSION_NOT_FOUND` — Session does not exist or expired
-- `SESSION_EXPIRED` — Session timed out
-- `INVALID_GRAPH` — Graph definition is malformed
-- `VALIDATION_FAILED` — Graph failed validation
-- `RUN_NOT_FOUND` — Run ID does not exist
-- `NODE_EXECUTION_ERROR` — Error during node execution
-- `TIMEOUT` — Execution exceeded max time
-- `CONCURRENT_LIMIT_EXCEEDED` — Too many concurrent runs
-- `PERMISSION_DENIED` — Unauthorized operation
+- `PROTOCOL_VERSION_MISMATCH` , Incompatible protocol versions
+- `PROTOCOL_VIOLATION` , Protocol rules violated (e.g., hello not sent first)
+- `AUTHENTICATION_FAILED` , Invalid or missing authentication credentials
+- `AUTHENTICATION_REQUIRED` , Authentication is required but not provided
+- `SESSION_NOT_FOUND` , Session does not exist or expired
+- `SESSION_EXPIRED` , Session timed out
+- `INVALID_GRAPH` , Graph definition is malformed
+- `VALIDATION_FAILED` , Graph failed validation
+- `RUN_NOT_FOUND` , Run ID does not exist
+- `NODE_EXECUTION_ERROR` , Error during node execution
+- `TIMEOUT` , Execution exceeded max time
+- `CONCURRENT_LIMIT_EXCEEDED` , Too many concurrent runs
+- `PERMISSION_DENIED` , Unauthorized operation
 
 ### Error Response Format
 ```json

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiberon-labs/behave-graph-flow",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "exports": {
     ".": {
@@ -18,8 +18,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "@bosh-code/tsdown-plugin-inject-css": "^2.0.0",
-    "@bosh-code/tsdown-plugin-tailwindcss": "^1.0.1",
     "@storybook/addon-a11y": "^10.0.8",
     "@storybook/addon-docs": "^10.0.8",
     "@storybook/addon-vitest": "^10.0.8",
@@ -41,14 +39,13 @@
     "react-dom": "19.2.3",
     "reactflow": "^11.11.4",
     "storybook": "^10.0.8",
-    "tailwindcss": "^4.1.17",
     "tsdown": "^0.16.5",
     "unplugin-lightningcss": "^0.4.3",
     "vite": "^7.2.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^4.0.10",
     "vitest-browser-react": "^2.2.0",
-    "@kiberon-labs/behave-graph": "1.1.0"
+    "@kiberon-labs/behave-graph": "1.2.0"
   },
   "repository": {
     "type": "git",
@@ -60,6 +57,7 @@
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.15",
     "@reactflow/node-resizer": "^2.2.14",
+    "@tiptap/extension-youtube": "^3.27.1",
     "@tiptap/react": "^3.19.0",
     "@tiptap/starter-kit": "^3.19.0",
     "@vscode-elements/react-elements": "^2.4.0",
@@ -67,9 +65,7 @@
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dagre": "^0.8.5",
-    "dockview": "^4.11.0",
     "elkjs": "^0.11.0",
-    "fastify": "^5.7.4",
     "fuse.js": "^7.1.0",
     "graphlib": "^2.1.8",
     "iconoir-react": "^7.11.0",
@@ -82,17 +78,17 @@
     "react-hotkeys": "^2.0.0",
     "tiptap-markdown": "^0.9.0",
     "uuid": "^8.3.2",
-    "zod": "^4.1.13",
     "zustand": "^5.0.8"
   },
   "peerDependencies": {
     "reactflow": "^11.1.1",
-    "@kiberon-labs/behave-graph": "1.1.0"
+    "@kiberon-labs/behave-graph": "1.2.0"
   },
   "scripts": {
     "audit": "fallow",
     "dev": "tsdown --watch src",
     "build": "tsdown",
+    "release": "npm publish --dry-run",
     "test": "vitest",
     "test:visual": "vitest run --config vitest.visual.config.ts",
     "test:visual:update": "vitest run --config vitest.visual.config.ts --update",

package/src/components/FloatingToolbar/index.module.css

@@ -7,10 +7,10 @@
   display: flex;
   gap: 0.5rem;
   padding: 0.25rem;
-  background: var(--colors-bgSurface);
-  border: 1px solid var(--colors-borderSubtle);
+  background: var(--ds-widget-bg, #292929);
+  border: 1px solid var(--ds-border-subtle, #454545);
   border-radius: 0.375rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.36);
 }
 
 .buttonGroup {
@@ -28,18 +28,10 @@
   display: flex;
   align-items: center;
   padding: 0 0.5rem;
-  font-size: 0.85rem;
+  font-size: var(--fs-label, 0.8rem);
   font-weight: 500;
-  color: var(--colors-fg);
+  color: var(--ds-fg);
   user-select: none;
   min-width: 3rem;
   justify-content: center;
-}
-
-.contextMenu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 0.25rem;
-  z-index: 1000;
 }

package/src/components/FloatingToolbar/index.tsx

@@ -5,7 +5,7 @@ import {
   VscodeContextMenu
 } from '@vscode-elements/react-elements';
 import { ZoomIn, ZoomOut, AlignLeft, LayoutRight } from 'iconoir-react';
-import { useSystem } from '@/system/provider';
+import { useGraph } from '@/system/provider';
 import { useStore } from 'zustand';
 import styles from './index.module.css';
 import { useRefFromStore } from '@/system';
@@ -13,10 +13,10 @@ import type { ToolbarButton } from '@/store/toolbar';
 import type { AlignmentAxis, AlignmentType } from '@/plugin/alignment';
 
 export const FloatingToolbar: React.FC = () => {
-  const system = useSystem();
-  const visible = useStore(system.toolbarStore, (x) => x.visible);
-  const customGroups = useStore(system.toolbarStore, (x) => x.groups);
-  const reactFlowInstance = useRefFromStore(system.refStore, 'reactflow');
+  const session = useGraph();
+  const visible = useStore(session.editor.toolbarStore, (x) => x.visible);
+  const customGroups = useStore(session.editor.toolbarStore, (x) => x.groups);
+  const reactFlowInstance = useRefFromStore(session.refStore, 'reactflow');
   const { zoom } = useViewport();
   const currentZoom = Math.round(zoom * 100);
   const [alignMenuOpen, setAlignMenuOpen] = useState(false);
@@ -27,16 +27,16 @@ export const FloatingToolbar: React.FC = () => {
 
   const publishAlignment = useCallback(
     (type: AlignmentType, axis: AlignmentAxis) => {
-      system.pubsub.publishSync('alignment:align', { type, axis });
+      session.pubsub.publishSync('alignment:align', { type, axis });
     },
-    [system]
+    [session]
   );
 
   const publishDistribution = useCallback(
     (type: AlignmentType, axis: AlignmentAxis) => {
-      system.pubsub.publishSync('alignment:distribute', { type, axis });
+      session.pubsub.publishSync('alignment:distribute', { type, axis });
     },
-    [system]
+    [session]
   );
 
   const handleZoomIn = useCallback(() => {

package/src/components/Flow.tsx

@@ -18,7 +18,7 @@ import {
 import { useBehaveGraphFlow } from '../hooks/useBehaveGraphFlow.js';
 import { useFlowHandlers } from '../hooks/useFlowHandlers.js';
 import { useWasdPan } from '../hooks/useWasdPan.js';
-import { useSystem } from '@/system/provider.js';
+import { useGraph } from '@/system/provider.js';
 import { useStore } from 'zustand';
 import {
   NodeContextMenu,
@@ -32,7 +32,7 @@ import {
   SelectionContextMenu,
   type ISelectionContextMenuProps
 } from './contextMenus/selection.js';
-import { registerDefaultSocketGenerators } from '@/generators/registerDefaultGenerators';
+import { registerDefaults } from '@/generators/registerDefaults';
 import { FloatingToolbar } from './FloatingToolbar';
 import { layerId } from '@/annotations';
 
@@ -63,25 +63,36 @@ const isNodeVisibleInLayers = (
 };
 
 export const Flow: React.FC = () => {
-  const system = useSystem();
-  const getGraphJson = useStore(system.flowStore, (x) => x.getGraph);
-  const specJson = useStore(system.specStore, (x) => x.specs);
-  const showGrid = useStore(system.systemSettings, (x) => x.showGrid);
-  const showMinimap = useStore(system.systemSettings, (x) => x.showMinimap);
-  const snapToGrid = useStore(system.systemSettings, (x) => x.snapGrid);
-  const gridSize = useStore(system.systemSettings, (x) => x.gridSize);
-  const edgeTypes = useStore(system.flowStore, (x) => x.edgeTypes);
-  const nodeTypes = useStore(system.flowStore, (x) => x.nodeTypes);
-  const layers = useStore(system.layerStore, (x) => x.layers);
-  const nodeLayers = useStore(system.layerStore, (x) => x.nodeLayers);
-  const defaultLayerId = useStore(system.layerStore, (x) => x.defaultLayerId);
+  const session = useGraph();
+  const editor = session.editor;
+  const getGraphJson = useStore(session.flowStore, (x) => x.getGraph);
+  const specJson = useStore(editor.specStore, (x) => x.specs);
+  const showGrid = useStore(editor.systemSettings, (x) => x.showGrid);
+  const showMinimap = useStore(editor.systemSettings, (x) => x.showMinimap);
+  const snapToGrid = useStore(editor.systemSettings, (x) => x.snapGrid);
+  const gridSize = useStore(editor.systemSettings, (x) => x.gridSize);
+  const edgeTypes = useStore(session.flowStore, (x) => x.edgeTypes);
+  const nodeTypes = useStore(session.flowStore, (x) => x.nodeTypes);
+  const layers = useStore(session.layerStore, (x) => x.layers);
+  const nodeLayers = useStore(session.layerStore, (x) => x.nodeLayers);
+  const defaultLayerId = useStore(session.layerStore, (x) => x.defaultLayerId);
 
   const ref = useRef<HTMLDivElement>(null);
-  const setRef = useStore(system.refStore, (x) => x.setRef);
+  const setRef = useStore(session.refStore, (x) => x.setRef);
+
+  // When this canvas is interacted with, mark its graph as focused so the shared
+  // side-panels (Variables, Traces, ...) bind to it. Lets two graphs be open at
+  // once without a singular "active graph" , focus simply follows interaction.
+  const focusThisGraph = useCallback(() => {
+    const active = editor.activeGraph.getState();
+    if (active.activeGraphId !== session.id) {
+      active.setActiveGraph(session.id);
+    }
+  }, [editor, session.id]);
 
   const getReactFlowInstance = useCallback(
-    () => system.refStore.getState().getRef('reactflow'),
-    [system.refStore]
+    () => session.refStore.getState().getRef('reactflow'),
+    [session.refStore]
   );
 
   useWasdPan({ getReactFlowInstance });
@@ -98,13 +109,11 @@ export const Flow: React.FC = () => {
 
   const graph = useMemo(() => getGraphJson(), []);
 
+  // Editor-level built-in content. Idempotent per editor, so opening multiple
+  // graph tabs (each a Flow canvas) registers it once rather than per mount.
   useEffect(() => {
-    const cleanupGenerators = registerDefaultSocketGenerators(system);
-
-    return () => {
-      cleanupGenerators();
-    };
-  }, [system]);
+    registerDefaults(editor);
+  }, [editor]);
 
   const { nodes, edges, onNodesChange, onEdgesChange } = useBehaveGraphFlow({
     initialGraphJson: graph,
@@ -253,8 +262,10 @@ export const Flow: React.FC = () => {
   return (
     <>
       <ReactFlow
+        id={session.id}
         style={{ flex: 1 }}
         ref={ref}
+        onPointerDownCapture={focusThisGraph}
         onInit={setReactflowRef}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}

package/src/components/contextMenus/DynamicContextMenu.tsx

@@ -0,0 +1,85 @@
+import type { CSSProperties } from 'react';
+import { useStore } from 'zustand';
+import { VscodeContextMenu } from '@vscode-elements/react-elements';
+import { useGraph } from '@/system';
+import type { CommandContext } from '@/store/commands';
+import type { ContextMenuTarget } from '@/store/contextMenu';
+
+type MenuData =
+  | { separator: true }
+  | { label: string; value: string; keybinding?: string };
+
+/**
+ * Renders a context menu for a target from the editor's contextMenu registry,
+ * dispatching selections through the command registry. The three concrete menus
+ * (node/edge/selection) are thin wrappers that supply the target + context.
+ */
+export const DynamicContextMenu = ({
+  target,
+  context,
+  style
+}: {
+  target: ContextMenuTarget;
+  context: Omit<CommandContext, 'editor' | 'session'>;
+  style?: CSSProperties;
+}) => {
+  const session = useGraph();
+  const editor = session.editor;
+
+  // Subscribe so the menu re-renders when items/commands/keymap change.
+  useStore(editor.contextMenuStore, (s) => s.items);
+  useStore(editor.commandStore, (s) => s.commands);
+  useStore(editor.hotKeyStore, (s) => s.keymap);
+
+  const hotKeys = editor.hotKeyStore.getState();
+
+  const ctx: CommandContext = { editor, session, ...context };
+
+  const items = editor.contextMenuStore
+    .getState()
+    .getItems(target)
+    .filter((i) => !i.when || i.when(ctx));
+
+  const data: MenuData[] = [];
+  let lastGroup: unknown;
+  for (const item of items) {
+    if (data.length > 0 && item.group !== lastGroup) {
+      data.push({ separator: true });
+    }
+    lastGroup = item.group;
+    // Auto-detect the shortcut from the command's live keymap binding; fall
+    // back to a static hint only when the command has no bound key.
+    const derived = item.commandId
+      ? hotKeys.getCommandKeybinding(item.commandId)
+      : undefined;
+    data.push({
+      label: typeof item.label === 'function' ? item.label(ctx) : item.label,
+      value: item.id,
+      keybinding: derived ?? item.keybinding
+    });
+  }
+
+  if (data.length === 0) return null;
+
+  const onSelect = (e: any) => {
+    const id = e?.detail?.value as string | undefined;
+    const item = items.find((i) => i.id === id);
+    if (!item) return;
+    if (item.onSelect) {
+      item.onSelect(ctx);
+      return;
+    }
+    if (item.commandId) {
+      void editor.commandStore.getState().run(item.commandId, ctx);
+    }
+  };
+
+  return (
+    <VscodeContextMenu
+      show
+      onVscContextMenuSelect={onSelect}
+      style={{ zIndex: 2000, position: 'absolute', ...style }}
+      data={data}
+    />
+  );
+};

package/src/components/contextMenus/NodePicker.module.css

@@ -16,7 +16,7 @@
 }
 
 .sidebar {
-  border-right: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+  border-right: 1px solid var(--ds-input-border, var(--colors-borderSubtle));
   background: var(--colors-bgPanel);
   display: flex;
   flex-direction: column;
@@ -41,12 +41,12 @@
 }
 
 .sidebarItem:hover {
-  background: var(--vscode-button-hoverBackground, #026ec1);
+  background: var(--ds-button-hover-bg, #026ec1);
 }
 
 .sidebarItemActive {
-  background: var(--vscode-button-secondaryBackground, #313131);
-  color: var(--vscode-list-activeSelectionForeground);
+  background: var(--ds-button-secondary-bg, #313131);
+  color: var(--ds-list-active-fg);
 }
 
 .main {
@@ -61,7 +61,7 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem;
-  border-bottom: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+  border-bottom: 1px solid var(--ds-input-border, var(--colors-borderSubtle));
 }
 
 .search {
@@ -110,7 +110,7 @@
 }
 
 .nodeRow:hover {
-  background: var(--vscode-button-hoverBackground, #026ec1);
+  background: var(--ds-button-hover-bg, #026ec1);
 }
 
 .infoButton {
@@ -128,7 +128,7 @@
 }
 
 .infoButton:hover {
-  background: var(--vscode-button-secondaryBackground, #313131);
+  background: var(--ds-button-secondary-bg, #313131);
   opacity: 1 !important;
 }
 
@@ -145,7 +145,7 @@
   width: 28px;
   height: 28px;
   border-radius: 0.25rem;
-  border: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+  border: 1px solid var(--ds-input-border, var(--colors-borderSubtle));
   background: var(--colors-bgCanvas);
   overflow: hidden;
   display: flex;
@@ -210,8 +210,8 @@
   font-size: 0.65rem;
   padding: 0.1rem 0.35rem;
   border-radius: 0.25rem;
-  background: var(--vscode-badge-background, #4d4d4d);
-  color: var(--vscode-badge-foreground, #ffffff);
+  background: var(--ds-badge-bg, #4d4d4d);
+  color: var(--ds-badge-fg, #ffffff);
   opacity: 0.85;
 }
 
@@ -223,7 +223,7 @@
 }
 
 .card:hover {
-  background: var(--vscode-button-hoverBackground, #026ec1);
+  background: var(--ds-button-hover-bg, #026ec1);
 }
 
 .cardInner {
@@ -245,7 +245,7 @@
   width: 56px;
   height: 56px;
   border-radius: 0.25rem;
-  border: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+  border: 1px solid var(--ds-input-border, var(--colors-borderSubtle));
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -260,7 +260,7 @@
 
 .footer {
   padding: 0.35rem 0.5rem;
-  border-top: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+  border-top: 1px solid var(--ds-input-border, var(--colors-borderSubtle));
   font-size: 0.75rem;
   opacity: 0.8;
   display: flex;

package/src/components/contextMenus/edge.tsx

@@ -1,12 +1,5 @@
 import type { CSSProperties } from 'react';
-import { useCallback } from 'react';
-import type { EdgeChange } from 'reactflow';
-import {
-  VscodeContextMenu,
-  VscodeContextMenuItem,
-  VscodeDivider
-} from '@vscode-elements/react-elements';
-import { useSystem } from '@/system';
+import { DynamicContextMenu } from './DynamicContextMenu';
 
 export interface IEdgeContextMenuProps extends CSSProperties {
   edgeID: string;
@@ -14,95 +7,16 @@ export interface IEdgeContextMenuProps extends CSSProperties {
   targetID: string;
 }
 
+/** Edge context menu , items from the contextMenu registry (target 'edge'). */
 export const EdgeContextMenu = ({
   edgeID,
   sourceID,
   targetID,
   ...rest
-}: IEdgeContextMenuProps) => {
-  const sys = useSystem();
-
-  const centerOnNode = useCallback(
-    (nodeId: string) => {
-      const node = sys.nodeStore.getState().nodes.find((n) => n.id === nodeId);
-      if (!node) return;
-
-      const x = node.position.x + (node.width ?? 0) / 2;
-      const y = node.position.y + (node.height ?? 0) / 2;
-
-      sys.refStore.getState().getRef('reactflow')?.setCenter(x, y, {
-        duration: 200,
-        zoom: 1
-      });
-    },
-    [sys]
-  );
-
-  const findSource = useCallback(
-    () => centerOnNode(sourceID),
-    [centerOnNode, sourceID]
-  );
-  const findTarget = useCallback(
-    () => centerOnNode(targetID),
-    [centerOnNode, targetID]
-  );
-
-  const deleteEdge = useCallback(() => {
-    const change: EdgeChange = {
-      id: edgeID,
-      type: 'remove'
-    };
-    sys.edgeStore.getState().applyEdgeChanges([change]);
-  }, [edgeID, sys.edgeStore]);
-
-  const onSelect = useCallback(
-    (e: any) => {
-      switch (e.detail.value) {
-        case 'findSource':
-          findSource();
-          break;
-        case 'findTarget':
-          findTarget();
-          break;
-        case 'delete':
-          deleteEdge();
-          break;
-      }
-    },
-    [deleteEdge, findSource, findTarget]
-  );
-
-  return (
-    <VscodeContextMenu
-      show
-      onVscContextMenuSelect={onSelect}
-      style={{ zIndex: 2000, position: 'absolute', ...rest }}
-      data={[
-        {
-          label: 'Find Source',
-          value: 'findSource'
-        },
-        {
-          label: 'Find Target',
-          value: 'findTarget'
-        },
-        {
-          separator: true
-        },
-        {
-          label: 'Delete',
-          value: 'delete'
-        }
-      ]}
-    >
-      <VscodeContextMenuItem onClick={findSource}>
-        Find Source
-      </VscodeContextMenuItem>
-      <VscodeContextMenuItem onClick={findTarget}>
-        Find Target
-      </VscodeContextMenuItem>
-      <VscodeDivider />
-      <VscodeContextMenuItem onClick={deleteEdge}>Delete</VscodeContextMenuItem>
-    </VscodeContextMenu>
-  );
-};
+}: IEdgeContextMenuProps) => (
+  <DynamicContextMenu
+    target="edge"
+    context={{ edgeId: edgeID, sourceId: sourceID, targetId: targetID }}
+    style={rest}
+  />
+);