nit

frontend/src/lib/components/flows/map/FlowStickyNode.svelte

@@ -98,7 +98,7 @@
 			selected={noteMode}
 		></Button>
 		{#snippet text()}
-			{noteMode ? 'Exit note mode' : 'Add notes'}
+			{noteMode ? 'Exit note mode' : 'Add sticky notes'}
 		{/snippet}
 	</Popover>
 </div>

frontend/src/lib/components/flows/map/MapItem.svelte

@@ -102,6 +102,13 @@
 	let parentLoop = $derived(
 		flowStore?.val && mod ? checkIfParentLoop(flowStore.val, mod.id) : undefined
 	)
+
+	function handlePointerDown(e: CustomEvent<PointerEvent>) {
+		// Only handle left clicks (button 0)
+		if (e.detail.button === 0) {
+			onSelect(mod.id)
+		}
+	}
 </script>
 
 {#if mod}
@@ -164,7 +171,7 @@
 					on:changeId
 					on:move
 					on:delete
-					on:pointerdown={() => onSelect(mod.id)}
+					on:pointerdown={handlePointerDown}
 					onUpdateMock={(mock) => {
 						mod.mock = mock
 						onUpdateMock?.({ id: mod.id, mock })
@@ -193,7 +200,7 @@
 					on:changeId
 					on:delete
 					on:move
-					on:pointerdown={() => onSelect(mod.id)}
+					on:pointerdown={handlePointerDown}
 					{...itemProps}
 					id={mod.id}
 					label={mod.summary || 'Run one branch'}
@@ -213,7 +220,7 @@
 					on:changeId
 					on:delete
 					on:move
-					on:pointerdown={() => onSelect(mod.id)}
+					on:pointerdown={handlePointerDown}
 					id={mod.id}
 					{...itemProps}
 					label={mod.summary || `Run all branches${mod.value.parallel ? ' (parallel)' : ''}`}
@@ -231,7 +238,7 @@
 					{moduleAction}
 					{onShowModuleDiff}
 					on:changeId
-					on:pointerdown={() => onSelect(mod.id)}
+					on:pointerdown={handlePointerDown}
 					on:delete
 					on:move
 					onUpdateMock={(mock) => {

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -36,10 +36,10 @@
 	import BaseEdge from './renderers/edges/BaseEdge.svelte'
 	import EmptyEdge from './renderers/edges/EmptyEdge.svelte'
 	import { sugiyama, dagStratify, coordCenter, decrossTwoLayer, decrossOpt } from 'd3-dag'
-	import { Expand, MousePointer } from 'lucide-svelte'
+	import { Expand, MousePointer, Hand } from 'lucide-svelte'
 	import Toggle from '../Toggle.svelte'
 	import DataflowEdge from './renderers/edges/DataflowEdge.svelte'
-	import { encodeState, readFieldsRecursively } from '$lib/utils'
+	import { encodeState, readFieldsRecursively, getModifierKey } from '$lib/utils'
 	import BranchOneStart from './renderers/nodes/BranchOneStart.svelte'
 	import NoBranchNode from './renderers/nodes/NoBranchNode.svelte'
 	import HiddenBaseEdge from './renderers/edges/HiddenBaseEdge.svelte'
@@ -74,6 +74,7 @@
 	import type { AIModuleAction } from '../copilot/chat/flow/core'
 	import { setGraphContext } from './graphContext'
 	import { buildNodeSpacingMap, getNoteStateSignature } from './groupNoteUtils'
+	import { Tooltip } from '../meltComponents'
 
 	let useDataflow: Writable<boolean | undefined> = writable<boolean | undefined>(false)
 	let showAssets: Writable<boolean | undefined> = writable<boolean | undefined>(true)
@@ -481,6 +482,9 @@
 	function handleKeyDown(event: KeyboardEvent) {
 		selectionManager.handleKeyDown(event, nodes)
 		noteManager.handleKeyDown(event)
+		if (noteMode) {
+			exitNoteMode?.()
+		}
 	}
 
 	async function updateStores() {
@@ -821,18 +825,39 @@
 					<Controls position="top-right" orientation="horizontal" showLock={false}>
 						{#if multiSelectEnabled}
 							<div class="flex items-center gap-2">
-								<ControlButton
-									onclick={() => {
-										selectionManager.mode =
-											selectionManager.mode === 'normal' ? 'rect-select' : 'normal'
-									}}
-									title="Toggle rectangle selection"
-									class={selectionManager.mode === 'rect-select'
-										? 'text-accent !bg-surface-selected'
-										: ''}
-								>
-									<MousePointer size="14" />
-								</ControlButton>
+								<Tooltip>
+									<ControlButton
+										onclick={() => {
+											selectionManager.mode =
+												selectionManager.mode === 'normal' ? 'rect-select' : 'normal'
+										}}
+									>
+										{#if selectionManager.mode === 'rect-select'}
+											<MousePointer size="14" />
+										{:else}
+											<Hand size="14" />
+										{/if}
+									</ControlButton>
+									{#snippet text()}
+										<div class="flex flex-col gap-2">
+											<div class="flex items-center gap-2">
+												<Hand size="14" />
+												<span class="text-secondary"
+													><strong>Grab</strong>: Click and drag to pan. Hold
+													<kbd class="text-primary text-lg">{getModifierKey()}</kbd> to box select.</span
+												>
+											</div>
+											<div class="flex items-center gap-2">
+												<MousePointer size="14" />
+												<span class="text-secondary"
+													><strong class="text-primary">Select</strong> Click and drag to box
+													select. Hold
+													<kbd class="text-primary text-lg">{getModifierKey()}</kbd> to pan.</span
+												>
+											</div>
+										</div>
+									{/snippet}
+								</Tooltip>
 							</div>
 						{/if}
 						{#if download}

frontend/src/lib/components/graph/groupNoteUtils.ts

@@ -2,6 +2,8 @@ import type { Node } from '@xyflow/svelte'
 import { NODE } from './util'
 import type { FlowNote } from '../../gen'
 import type { NoteManager } from './noteManager.svelte'
+import type { NoteEditorContext } from './noteEditor.svelte'
+import { StickyNote } from 'lucide-svelte'
 
 type NodeDep = { id: string; parentIds?: string[]; offset?: number }
 
@@ -250,3 +252,20 @@ export function calculateAllNoteZIndexes(
 
 	return zIndexMap
 }
+
+export function addGroupNoteContextMenuItem(
+	nodeId: string,
+	noteEditorContext: NoteEditorContext | undefined
+) {
+	return {
+		id: 'add-group-note',
+		label: 'Add group note',
+		icon: StickyNote,
+		disabled: !noteEditorContext?.noteEditor,
+		onClick: () => {
+			if (noteEditorContext?.noteEditor) {
+				noteEditorContext.noteEditor.createGroupNote([nodeId], 'Group Note')
+			}
+		}
+	}
+}

frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import MapItem from '$lib/components/flows/map/MapItem.svelte'
-	import { GitBranchPlus, StickyNote } from 'lucide-svelte'
+	import { GitBranchPlus } from 'lucide-svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import type { ModuleN } from '../../graphBuilder.svelte'
 	import { jobToGraphModuleState } from '$lib/components/modulesTest.svelte'
 	import { getNoteEditorContext } from '../../noteEditor.svelte'
 	import type { ContextMenuItem } from '../../../common/contextmenu/ContextMenu.svelte'
+	import { addGroupNoteContextMenuItem } from '../../groupNoteUtils'
 
 	interface Props {
 		data: ModuleN['data']
@@ -43,21 +44,7 @@
 
 	// Define context menu items
 	const contextMenuItems: ContextMenuItem[] = $derived(
-		data.editMode
-			? [
-					{
-						id: 'add-group-note',
-						label: 'Add group note',
-						icon: StickyNote,
-						disabled: !noteEditorContext?.noteEditor,
-						onClick: () => {
-							if (noteEditorContext?.noteEditor) {
-								noteEditorContext.noteEditor.createGroupNote([data.id], 'Group Note')
-							}
-						}
-					}
-				]
-			: []
+		data.editMode ? [addGroupNoteContextMenuItem(data.id, noteEditorContext)] : []
 	)
 </script>