windmill-components 1.655.1 → 1.665.0

package/package/components/graph/FlowGraphV2.svelte

@@ -37,8 +37,17 @@ import AssetsOverflowedNode from './renderers/nodes/AssetsOverflowedNode.svelte'
 import AiToolNode, { computeAIToolNodes } from './renderers/nodes/AIToolNode.svelte';
 import NewAiToolNode from './renderers/nodes/NewAIToolNode.svelte';
 import NoteNode from './renderers/nodes/NoteNode.svelte';
+import CollapsedGroupNode from './renderers/nodes/CollapsedGroupNode.svelte';
+import GroupHeadNode from './renderers/nodes/GroupHeadNode.svelte';
+import GroupEndNode from './renderers/nodes/GroupEndNode.svelte';
 import NoteTool from './NoteTool.svelte';
 import SelectionBoundingBox from './SelectionBoundingBox.svelte';
+import GroupOverlay from './GroupOverlay.svelte';
+import { GroupDisplayState, getGroupEditorContext, groupKey } from './groupEditor.svelte';
+import { buildStructureTree, computeGroupDepths } from './flowStructure';
+import { stateSnapshot } from '../../svelte5Utils.svelte';
+import { computeGroupModuleIds } from './groupDetectionUtils';
+import { getAllModules } from '../flows/flowExplorer';
 import SelectionTool from './SelectionTool.svelte';
 import PaneContextMenu from './PaneContextMenu.svelte';
 import { SelectionManager } from './selectionUtils.svelte';
@@ -47,6 +56,7 @@ import { NoteManager } from './noteManager.svelte';
 import DragCoordinator from './DragCoordinator.svelte';
 import { compoundLayout } from './compoundLayout';
 import { deepEqual } from 'fast-equals';
+import { computeNodeExtraSpace } from './nodeExtraSpace';
 import { setGraphContext } from './graphContext';
 import { computeNoteNodes } from './noteUtils.svelte';
 import { Tooltip } from '../meltComponents';
@@ -61,16 +71,18 @@ const diffManager = createFlowDiffManager();
 let fullWidth = 0;
 let width = $state(0);
 let simplifiableFlow = $state(undefined);
-let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDuplicate = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, testModuleStates = undefined, moduleActions = undefined, selectionManager: selectionManagerProp = undefined, path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moveManager = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = {}, flowHasChanged = false, noteMode = false, notes = undefined, exitNoteMode = undefined, onNotePositionUpdate = undefined, chatInputEnabled = false, sharedViewport = undefined, onViewportChange = undefined, leftHeader = undefined, diffBeforeFlow = undefined, currentInputSchema = undefined, markRemovedAsShadowed = false, multiSelectEnabled = false, onDeleteMultiple = undefined, onDuplicateMultiple = undefined, onMoveMultiple = undefined, movingIds = undefined } = $props();
+let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDuplicate = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], groupedModules: groupedModulesProp = undefined, groupError = undefined, failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, testModuleStates = undefined, moduleActions = undefined, selectionManager: selectionManagerProp = undefined, path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moveManager = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = {}, flowHasChanged = false, noteMode = false, notes = undefined, groups = undefined, groupDisplayState: groupDisplayStateProp = undefined, exitNoteMode = undefined, onNotePositionUpdate = undefined, chatInputEnabled = false, sharedViewport = undefined, onViewportChange = undefined, leftHeader = undefined, diffBeforeFlow = undefined, currentInputSchema = undefined, markRemovedAsShadowed = false, multiSelectEnabled = false, onDeleteMultiple = undefined, onDuplicateMultiple = undefined, onMoveMultiple = undefined, movingIds = undefined } = $props();
 // Initialize note manager with fine-grained reactivity
 const noteManager = new NoteManager(() => notes ?? [], (newNodes) => {
     nodes = newNodes;
 }, () => nodes);
+const groupDisplayState = untrack(() => groupDisplayStateProp) ?? new GroupDisplayState(() => groups ?? []);
 // Runtime text height tracking for notes (not stored in FlowNote)
 let noteTextHeights = $state({});
 // Reference to pane context menu component
 let paneContextMenu = $state(undefined);
 let flowContainer = $state(undefined);
+// Hover tracking for group overlay
 // Selection manager - create one if not provided
 let selectionManager = untrack(() => selectionManagerProp) || new SelectionManager();
 const selectedId = $derived(selectionManager.getSelectedId());
@@ -99,7 +111,9 @@ setGraphContext({
     moveManager: untrack(() => moveManager),
     clearFlowSelection,
     yOffset,
-    diffManager
+    diffManager,
+    getFlowNodes: () => currentGraphNodeDeps,
+    groupDisplayState
 });
 if (triggerContext && untrack(() => allowSimplifiedPoll)) {
     if (isSimplifiable(untrack(() => modules))) {
@@ -123,9 +137,22 @@ function onModulesChange(modules) {
     computeSimplifiableFlow(modules, triggerContext?.simplifiedPoll ? (get(triggerContext.simplifiedPoll) ?? false) : false);
 }
 let lastNodes = undefined;
-function layoutNodes(nodes) {
-    let lastResult = lastNodes?.[1];
-    if (lastResult && deepEqual(nodes, lastNodes?.[0])) {
+let currentGraphNodeDeps = $state([]);
+// Keep canCreateGroup in sync for consumers (SelectionBoundingBox, FlowSelectionPanel, etc.)
+const groupEditorCtx = getGroupEditorContext();
+$effect(() => {
+    if (!groupEditorCtx)
+        return;
+    const ids = selectionManager.selectedIds;
+    groupEditorCtx.canCreateGroup.val =
+        ids.length >= 1 && groupEditorCtx.groupEditor.canCreateGroup(ids, currentGraphNodeDeps);
+});
+let lastGroupDimensions = undefined;
+function layoutNodes(nodes, nodeExtraSpace) {
+    let lastResult = lastNodes?.[2];
+    if (lastResult &&
+        deepEqual(nodes, lastNodes?.[0]) &&
+        deepEqual(nodeExtraSpace, lastNodes?.[1])) {
         console.debug('layoutNodes', 'same nodes');
         return lastResult;
     }
@@ -137,15 +164,17 @@ function layoutNodes(nodes) {
         }
         seenId.push(n.id);
     }
-    // Run recursive compound layout
-    const { positions, bbox } = compoundLayout(nodes, {
+    // Run recursive compound layout with pre-computed extra space
+    const layoutResult = compoundLayout(nodes, {
         nodeWidth: NODE.width,
         nodeHeight: NODE.height,
         gapH: NODE.gap.horizontal,
         gapV: NODE.gap.vertical
-    });
-    // Center horizontally
+    }, nodeExtraSpace);
+    const { positions, bbox } = layoutResult;
+    lastGroupDimensions = layoutResult.groupDimensions;
     const xCenter = (fullSize ? fullWidth : width) / 2 - bbox.width / 2 - (width - fullWidth) / 2;
+    // Center horizontally
     const newNodes = nodes.map((n) => ({
         id: n.id,
         position: {
@@ -153,7 +182,7 @@ function layoutNodes(nodes) {
             y: positions.get(n.id)?.y ?? 0
         }
     }));
-    lastNodes = [nodes, newNodes];
+    lastNodes = [nodes, nodeExtraSpace, newNodes];
     return newNodes;
 }
 let eventHandler = {
@@ -196,13 +225,16 @@ let eventHandler = {
     },
     expandSubflow: async (id, path) => {
         const flow = await FlowService.getFlowByPath({ workspace: workspace, path });
-        expandedSubflows[id] = flow.value.modules;
+        expandedSubflows[id] = { modules: flow.value.modules, groups: flow.value.groups };
         expandedSubflows = expandedSubflows;
     },
     minimizeSubflow: (id) => {
         delete expandedSubflows[id];
         expandedSubflows = expandedSubflows;
     },
+    expandGroup: (groupId) => {
+        groupDisplayState.expandGroup(groupId);
+    },
     updateMock: (detail) => {
         onUpdateMock?.(detail);
     },
@@ -342,13 +374,34 @@ async function updateStores() {
     if (graph.error) {
         return;
     }
-    // console.log('compute')
-    let layoutedNodes = layoutNodes(Object.values(graph.nodes).map((n) => ({
+    const graphNodeDeps = Object.values(graph.nodes).map((n) => ({
         id: n.id,
         parentIds: n.parentIds,
-        data: { assets: n.data.assets }
-    })));
-    let newNodes = layoutedNodes.map((n) => ({ ...n, ...graph.nodes[n.id] }));
+        data: { assets: n.data.assets, module: n.data.module }
+    }));
+    currentGraphNodeDeps = graphNodeDeps;
+    // Pre-compute extra space per node for assets, AI tools, group notes, group headers
+    const nodeExtraSpace = computeNodeExtraSpace(graphNodeDeps, {
+        showAssets: $showAssets ?? true,
+        showNotes,
+        notes,
+        noteTextHeights,
+        groupDisplayState,
+        insertable,
+        flowModuleStates
+    });
+    // Layout with extra space baked into sugiyama
+    let layoutedNodes = layoutNodes(graphNodeDeps, nodeExtraSpace);
+    let newNodes = layoutedNodes.map((n) => {
+        const merged = { ...n, ...graph.nodes[n.id] };
+        // Augment group head nodes with wrapper dimensions from compound layout
+        if (graph.nodes[n.id]?.type === 'groupHead' && lastGroupDimensions?.has(n.id)) {
+            const dims = lastGroupDimensions.get(n.id);
+            merged.data = { ...merged.data, wrapperWidth: dims.width, wrapperHeight: dims.height };
+        }
+        return merged;
+    });
+    // Compute asset visual nodes (no position remapping)
     let assetNodesResult = $showAssets
         ? computeAssetNodes(newNodes.map((n) => ({
             data: { assets: n.data?.assets },
@@ -356,23 +409,14 @@ async function updateStores() {
             position: n.position
         })))
         : undefined;
-    if (assetNodesResult) {
-        newNodes = newNodes.map((n) => ({
-            ...n,
-            position: assetNodesResult.newNodePositions[n.id]
-        }));
-    }
+    // Compute AI tool visual nodes (no position remapping)
     let aiToolNodesResult = computeAIToolNodes(newNodes, eventHandler, insertable, flowModuleStates);
-    let nodesAfterAITools = newNodes.map((n) => ({
-        ...n,
-        position: aiToolNodesResult.newNodePositions[n.id]
-    }));
     let finalNodes = [
-        ...nodesAfterAITools,
+        ...newNodes,
         ...(assetNodesResult?.newAssetNodes ?? []),
         ...aiToolNodesResult.toolNodes
     ];
-    // Compute note nodes and positions
+    // Compute note nodes (no position remapping)
     let noteNodesResult = showNotes
         ? computeNoteNodes(finalNodes.map((n) => ({
             id: n.id,
@@ -385,13 +429,6 @@ async function updateStores() {
             noteManager.render();
         }, editMode, noteEditorContext)
         : undefined;
-    // Apply note positioning to nodes if notes are enabled
-    if (noteNodesResult) {
-        finalNodes = finalNodes.map((n) => ({
-            ...n,
-            position: noteNodesResult.newNodePositions[n.id] || n.position
-        }));
-    }
     // update nodes
     nodes = [...finalNodes, ...(noteNodesResult?.noteNodes ?? [])];
     edges = [
@@ -435,7 +472,10 @@ const nodeTypes = {
     assetsOverflowed: AssetsOverflowedNode,
     aiTool: AiToolNode,
     newAiTool: NewAiToolNode,
-    note: NoteNode
+    note: NoteNode,
+    collapsedGroup: CollapsedGroupNode,
+    groupHead: GroupHeadNode,
+    groupEnd: GroupEndNode
 };
 const edgeTypes = {
     edge: BaseEdge,
@@ -464,7 +504,30 @@ $effect(() => {
 let graph = $derived.by(() => {
     moduleTracker.counter;
     effectiveModuleActions;
-    return graphBuilder(untrack(() => effectiveModules), {
+    currentGroups;
+    const collapsedGroupIds = new Set(allGroups
+        .filter((g) => groupDisplayState.isRuntimeCollapsed(groupKey(g)))
+        .map((g) => groupKey(g)));
+    if (groupError) {
+        return { nodes: {}, edges: [], error: groupError };
+    }
+    // Use provided structure tree (from proxy) or build locally (diff mode / read-only)
+    let gm = groupedModulesProp;
+    if (!gm) {
+        const allGroups = groups ?? [];
+        const graphGroups = allGroups.map((g) => ({
+            ...g,
+            id: groupKey(g),
+            moduleIds: untrack(() => computeGroupModuleIds(g.start_id, g.end_id, getAllModules(effectiveModules ?? [])))
+        }));
+        try {
+            gm = buildStructureTree(stateSnapshot(untrack(() => effectiveModules) ?? []), graphGroups);
+        }
+        catch (e) {
+            return { nodes: {}, edges: [], error: e };
+        }
+    }
+    const result = graphBuilder(gm, untrack(() => effectiveModules), {
         disableAi,
         insertable,
         flowModuleStates: untrack(() => flowModuleStates),
@@ -485,13 +548,31 @@ let graph = $derived.by(() => {
         flowHasChanged,
         chatInputEnabled,
         additionalAssetsMap: flowGraphAssetsCtx?.val.additionalAssetsMap
-    }, untrack(() => effectiveFailureModule), effectivePreprocessorModule, eventHandler, success, $useDataflow, untrack(() => selectedId), simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
+    }, untrack(() => effectiveFailureModule), effectivePreprocessorModule, eventHandler, success, $useDataflow, untrack(() => selectedId), simplifiableFlow, triggerNode ? path : undefined, expandedSubflows, showNotes, collapsedGroupIds);
+    return { ...result, structureTree: gm };
 });
 let hideAssetsToggle = $derived($showAssets && Object.values(nodes).every((n) => n.type !== 'asset'));
-let hideNotesToggle = $derived(!notes || notes.length === 0);
+let hideNotesToggle = $derived((!notes || notes.length === 0) && !(groups ?? []).some((g) => g.note != null));
+let currentGroupDepths = $derived('structureTree' in graph && graph.structureTree ? computeGroupDepths(graph.structureTree) : {});
+// All groups including those from expanded subflows (for overlay rendering)
+let allGroups = $derived.by(() => {
+    const base = groups ?? [];
+    const subflowGroups = Object.values(expandedSubflows).flatMap((sf) => sf.groups ?? []);
+    return subflowGroups.length > 0 ? [...base, ...subflowGroups] : base;
+});
+// Track groups for re-layout when groups change
+let currentGroups = $derived(groups ?? []);
 $effect(() => {
     ;
-    [graph, allowSimplifiedPoll, $showAssets, showNotes, noteManager.renderCount];
+    [
+        graph,
+        allowSimplifiedPoll,
+        $showAssets,
+        showNotes,
+        noteManager.renderCount,
+        currentGroups,
+        groupDisplayState.renderCount
+    ];
     untrack(async () => {
         await updateStores();
     });
@@ -587,6 +668,15 @@ export function enableNotes() {
         showNotes = true;
     }
 }
+export function createGroupFromSelection(ids) {
+    if (groupEditorCtx?.groupEditor) {
+        groupEditorCtx.groupEditor.createGroup(ids, currentGraphNodeDeps);
+        tick().then(() => {
+            clearFlowSelection();
+            selectionManager.clearSelection();
+        });
+    }
+}
 const modifierKey = isMac() ? 'Meta' : 'Control';
 </script>
 
@@ -603,7 +693,7 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 	bind:this={flowContainer}
 >
 	{#if graph?.error}
-		<div class="center-center p-2">
+		<div class="center-center p-2 mt-20">
 			<Alert title="Error parsing the flow" type="error" class="max-w-1/2">
 				{graph.error}
 
@@ -702,6 +792,12 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 					/>
 				{/if}
 
+				<GroupOverlay
+					allNodes={nodesWithOffset as (Node & { type: string })[]}
+					groups={allGroups}
+					groupDepths={currentGroupDepths}
+				/>
+
 				<!-- SelectionTool for handling selection changes and filtering -->
 				<SelectionTool {selectionManager} clearGraphSelection={clearFlowSelection} />
 
@@ -759,7 +855,7 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 									try {
 										localStorage.setItem(
 											'svelvet',
-											encodeState({ modules, failureModule, preprocessorModule, notes })
+											encodeState({ modules, failureModule, preprocessorModule, notes, groups })
 										)
 									} catch (e) {
 										console.error('error interacting with local storage', e)

package/package/components/graph/FlowGraphV2.svelte.d.ts

@@ -5,6 +5,8 @@ import '@xyflow/svelte/dist/base.css';
 import { type Viewport } from '@xyflow/svelte';
 import { type InlineScript, type InsertKind, type OnSelectedIteration } from './graphBuilder.svelte';
 import DiffDrawer from '../DiffDrawer.svelte';
+import { GroupDisplayState, type FlowGroup } from './groupEditor.svelte';
+import { type FlowStructureNode } from './flowStructure';
 import { SelectionManager } from './selectionUtils.svelte';
 import type { MoveManager } from './moveManager.svelte';
 import type { ModulesTestStates } from '../modulesTest.svelte';
@@ -12,6 +14,8 @@ import type { ModuleActionInfo } from '../flows/flowDiff';
 interface Props {
     success?: boolean | undefined;
     modules?: FlowModule[] | undefined;
+    groupedModules?: FlowStructureNode[];
+    groupError?: unknown;
     failureModule?: FlowModule | undefined;
     preprocessorModule?: FlowModule | undefined;
     minHeight?: number;
@@ -35,7 +39,10 @@ interface Props {
     workspace?: string;
     editMode?: boolean;
     allowSimplifiedPoll?: boolean;
-    expandedSubflows?: Record<string, FlowModule[]>;
+    expandedSubflows?: Record<string, {
+        modules: FlowModule[];
+        groups?: FlowGroup[];
+    }>;
     isOwner?: boolean;
     isRunning?: boolean;
     individualStepTests?: boolean;
@@ -47,6 +54,8 @@ interface Props {
     }>;
     noteMode?: boolean;
     notes?: FlowNote[];
+    groups?: FlowGroup[];
+    groupDisplayState?: GroupDisplayState;
     chatInputEnabled?: boolean;
     multiSelectEnabled?: boolean;
     onDeleteMultiple?: (ids: string[]) => void;
@@ -76,6 +85,10 @@ interface Props {
             summary: string;
         };
         kind: InsertKind;
+        expandGroup?: {
+            groupId: string;
+            position: 'top' | 'bottom';
+        };
     }) => Promise<void>;
     onNewBranch?: (id: string) => Promise<void>;
     onSelect?: (id: string | FlowModule) => void;
@@ -142,6 +155,7 @@ declare const FlowGraphV2: import("svelte").Component<Props, {
         showModuleDiff: (moduleId: string) => void;
     };
     enableNotes: () => void;
+    createGroupFromSelection: (ids: string[]) => void;
 }, "expandedSubflows">;
 type FlowGraphV2 = ReturnType<typeof FlowGraphV2>;
 export default FlowGraphV2;

package/package/components/graph/GroupActionBar.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
+import { EllipsisVertical, StickyNote, Ungroup } from 'lucide-svelte';
+import { NoteColor, NOTE_COLOR_SWATCHES } from './noteColors';
+import Toggle from '../Toggle.svelte';
+import DropdownV2 from '../DropdownV2.svelte';
+import { twMerge } from 'tailwind-merge';
+import MoveHandleButton from './MoveHandleButton.svelte';
+let { note, color, autocollapse, visible = true, menuOpen = $bindable(), moveManager, moveModuleId, onMenuOpenChange, onAddNote, onRemoveNote, onUpdateColor, onUpdateAutocollapse, onDeleteGroup = undefined } = $props();
+$effect(() => {
+    onMenuOpenChange?.(menuOpen ?? false);
+});
+</script>
+
+<div
+	class="absolute -translate-y-[100%] top-2 right-0 h-7 p-1 min-w-7 flex flex-row gap-2"
+	style="will-change: transform;"
+>
+	{#if moveManager && moveModuleId}
+		<MoveHandleButton
+			{moveManager}
+			moduleId={moveModuleId}
+			singleNode
+			{visible}
+			onClickMove={() => moveManager.toggleMoving(moveModuleId!)}
+		/>
+	{/if}
+	{#if note == null}
+		<button
+			class={twMerge(
+				'center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary',
+				visible ? 'block' : '!hidden',
+				'shadow-md rounded-md'
+			)}
+			onpointerdown={stopPropagation(preventDefault(() => {}))}
+			onclick={() => onAddNote()}
+			title="Add note"
+		>
+			<StickyNote size={12} />
+		</button>
+	{/if}
+	<DropdownV2
+		placement="bottom-end"
+		bind:open={menuOpen}
+		fixedHeight={false}
+		usePointerDownOutside
+		customMenu
+	>
+		{#snippet buttonReplacement()}
+			<button
+				class={twMerge(
+					'center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary',
+					visible || menuOpen ? 'block' : '!hidden',
+					'shadow-md rounded-md'
+				)}
+				onpointerdown={stopPropagation(preventDefault(() => {}))}
+				title="Actions"
+			>
+				<EllipsisVertical size={12} />
+			</button>
+		{/snippet}
+		{#snippet menu()}
+			<div
+				class="bg-surface-tertiary dark:border w-56 origin-top-right rounded-lg shadow-lg focus:outline-none py-1"
+			>
+				<!-- Color picker -->
+				<div class="px-4 py-2">
+					<div class="grid grid-cols-5 gap-1">
+						{#each Object.values(NoteColor) as c (c)}
+							<button
+								class="w-6 h-6 rounded-full hover:scale-110 transition-transform duration-100
+									{NOTE_COLOR_SWATCHES[c]}
+									{(color ?? NoteColor.BLUE) === c ? 'ring-2 ring-accent' : 'dark:border-gray-600'}"
+								onclick={() => onUpdateColor(c)}
+								title={c.charAt(0).toUpperCase() + c.slice(1)}
+							></button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Autocollapse toggle -->
+				<div class="px-4 py-2">
+					<Toggle
+						size="xs"
+						checked={autocollapse}
+						options={{ right: 'Autocollapse' }}
+						on:change={(e) => onUpdateAutocollapse(e.detail)}
+					/>
+				</div>
+
+				<div class="my-1 border-t border-border-light"></div>
+
+				<!-- Add / Remove note -->
+				<button
+					class="px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs w-full flex flex-row gap-2 items-center rounded-sm"
+					onclick={() => {
+						note == null ? onAddNote() : onRemoveNote()
+						menuOpen = false
+					}}
+				>
+					<StickyNote size={14} class="shrink-0" />
+					<p class="truncate grow min-w-0 whitespace-nowrap text-left"
+						>{note == null ? 'Add note' : 'Remove note'}</p
+					>
+				</button>
+
+				{#if onDeleteGroup}
+					<div class="my-1 border-t border-border-light"></div>
+
+					<!-- Ungroup -->
+					<button
+						class="px-4 py-2 font-normal hover:bg-red-500/10 cursor-pointer text-xs w-full flex flex-row gap-2 items-center rounded-sm text-red-600 dark:text-red-400"
+						onclick={() => {
+							onDeleteGroup?.()
+							menuOpen = false
+						}}
+					>
+						<Ungroup size={14} class="shrink-0" />
+						<p class="truncate grow min-w-0 whitespace-nowrap text-left">Ungroup</p>
+					</button>
+				{/if}
+			</div>
+		{/snippet}
+	</DropdownV2>
+</div>

package/package/components/graph/GroupActionBar.svelte.d.ts

@@ -0,0 +1,20 @@
+import { NoteColor } from './noteColors';
+import type { MoveManager } from './moveManager.svelte';
+interface Props {
+    note: string | undefined | null;
+    color: string | undefined;
+    autocollapse: boolean;
+    visible?: boolean;
+    menuOpen?: boolean;
+    moveManager?: MoveManager;
+    moveModuleId?: string;
+    onMenuOpenChange?: (open: boolean) => void;
+    onAddNote: () => void;
+    onRemoveNote: () => void;
+    onUpdateColor: (color: NoteColor) => void;
+    onUpdateAutocollapse: (value: boolean) => void;
+    onDeleteGroup?: () => void;
+}
+declare const GroupActionBar: import("svelte").Component<Props, {}, "menuOpen">;
+type GroupActionBar = ReturnType<typeof GroupActionBar>;
+export default GroupActionBar;

package/package/components/graph/GroupHeader.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">import { NOTE_COLORS, NoteColor } from './noteColors';
+import { stopPropagation, preventDefault } from 'svelte/legacy';
+import { ChevronRight } from 'lucide-svelte';
+import TextInput from '../text_input/TextInput.svelte';
+let { summary, color, collapsed, editMode, onToggleCollapse, onSummaryUpdate } = $props();
+let colorConfig = $derived(NOTE_COLORS[color ?? NoteColor.BLUE] ?? NOTE_COLORS[NoteColor.BLUE]);
+const PLACEHOLDER = 'Group';
+// Inline summary editing
+let editingSummary = $state(false);
+let summaryInput = $state('');
+let textInputComponent = $state(undefined);
+function startEditingSummary() {
+    if (!editMode)
+        return;
+    editingSummary = true;
+    summaryInput = summary ?? '';
+    requestAnimationFrame(() => {
+        textInputComponent?.focus();
+        textInputComponent?.select();
+    });
+}
+function saveSummary() {
+    editingSummary = false;
+    const trimmed = summaryInput.trim();
+    if (trimmed !== (summary ?? '')) {
+        onSummaryUpdate?.(trimmed);
+    }
+}
+function handleSummaryKeydown(event) {
+    if (event.key === 'Enter') {
+        saveSummary();
+    }
+    else if (event.key === 'Escape') {
+        editingSummary = false;
+    }
+}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+	class="flex items-center h-[22px] w-full px-2 relative cursor-pointer {colorConfig.background} {colorConfig.text} {collapsed
+		? 'rounded-t-md'
+		: 'rounded-md'}"
+	onclick={stopPropagation(preventDefault(onToggleCollapse))}
+	onpointerdown={stopPropagation(preventDefault(() => {}))}
+	title={collapsed ? 'Expand group' : 'Collapse group'}
+>
+	<div
+		class="flex items-center justify-center shrink-0 opacity-60 transition-transform duration-100"
+		class:rotate-90={!collapsed}
+	>
+		<ChevronRight size={12} />
+	</div>
+	<div class="absolute inset-x-0 flex items-center justify-center h-full pointer-events-none px-7">
+		{#if editingSummary}
+			<div
+				class="input-sizer inline-grid items-center pointer-events-auto text-2xs font-medium max-w-full"
+				data-value={summaryInput || PLACEHOLDER}
+			>
+				<TextInput
+					bind:this={textInputComponent}
+					bind:value={summaryInput}
+					size="xs"
+					class="!bg-transparent !border-transparent !shadow-none !text-2xs !font-medium !p-0 !m-0 !min-w-0 text-center !min-h-0 !h-auto nodrag nowheel"
+					inputProps={{
+						placeholder: PLACEHOLDER,
+						onblur: saveSummary,
+						onkeydown: handleSummaryKeydown,
+						spellcheck: false,
+						size: 1,
+						style: 'padding: 2px !important; grid-area: 1 / 1'
+					}}
+				/>
+			</div>
+		{:else}
+			<span
+				class="text-2xs font-medium truncate text-center pointer-events-auto {editMode
+					? 'cursor-text rounded px-0.5 -mx-0.5 hover:bg-black/10 dark:hover:bg-white/10'
+					: ''}"
+				onclick={editMode ? stopPropagation(preventDefault(startEditingSummary)) : undefined}
+				onpointerdown={editMode ? stopPropagation(preventDefault(() => {})) : undefined}
+				>{summary || PLACEHOLDER}</span
+			>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.input-sizer::after {
+		content: attr(data-value) ' ';
+		visibility: hidden;
+		white-space: pre;
+		grid-area: 1 / 1;
+		font: inherit;
+		padding: 2px;
+		text-align: center;
+	}</style>

package/package/components/graph/GroupHeader.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    summary?: string;
+    color?: string;
+    collapsed: boolean;
+    editMode: boolean;
+    onToggleCollapse: () => void;
+    onSummaryUpdate?: (text: string) => void;
+}
+declare const GroupHeader: import("svelte").Component<Props, {}, "">;
+type GroupHeader = ReturnType<typeof GroupHeader>;
+export default GroupHeader;