windmill-components 1.655.2 → 1.665.1

package/package/components/graph/GroupHeaderBlock.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import GroupHeader from './GroupHeader.svelte';
+import GroupNoteArea from './GroupNoteArea.svelte';
+import GroupActionBar from './GroupActionBar.svelte';
+import { getGroupEditorContext } from './groupEditor.svelte';
+import { getGraphContext } from './graphContext';
+let { groupId, summary, note, color, collapsed, autocollapse, editMode, showNotes } = $props();
+const groupEditorContext = getGroupEditorContext();
+const graphContext = getGraphContext();
+const moveManager = graphContext?.moveManager;
+let moveModuleId = $derived(collapsed ? `collapsed-group:${groupId}` : `group:${groupId}`);
+let hovered = $state(false);
+let menuOpen = $state(false);
+let actionBarHovered = $state(false);
+let visible = $derived(hovered || menuOpen || actionBarHovered);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="nodrag relative"
+	onmouseenter={() => (hovered = true)}
+	onmouseleave={() => (hovered = false)}
+>
+	<GroupHeader
+		{summary}
+		{color}
+		{collapsed}
+		{editMode}
+		onToggleCollapse={() => graphContext?.groupDisplayState?.toggleRuntimeCollapse(groupId)}
+		onSummaryUpdate={(text) => groupEditorContext?.groupEditor.updateSummary(groupId, text)}
+	/>
+	{#if showNotes && note != null}
+		<GroupNoteArea
+			note={note ?? ''}
+			{color}
+			{collapsed}
+			{editMode}
+			onHeightChange={(h) => graphContext?.groupDisplayState?.setNoteHeight(groupId, h)}
+			onNoteUpdate={(text) => groupEditorContext?.groupEditor.updateNote(groupId, text)}
+		/>
+	{/if}
+	{#if editMode}
+		<GroupActionBar
+			{note}
+			{color}
+			{autocollapse}
+			{visible}
+			{menuOpen}
+			{moveManager}
+			{moveModuleId}
+			onMenuOpenChange={(open) => (menuOpen = open)}
+			onAddNote={() => groupEditorContext?.groupEditor.addNote(groupId)}
+			onRemoveNote={() => groupEditorContext?.groupEditor.removeNote(groupId)}
+			onUpdateColor={(c) => groupEditorContext?.groupEditor.updateColor(groupId, c)}
+			onUpdateAutocollapse={(v) => groupEditorContext?.groupEditor.updateAutocollapse(groupId, v)}
+			onDeleteGroup={() => groupEditorContext?.groupEditor.deleteGroup(groupId)}
+		/>
+	{/if}
+</div>

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

@@ -0,0 +1,13 @@
+interface Props {
+    groupId: string;
+    summary?: string;
+    note?: string | null;
+    color?: string;
+    collapsed: boolean;
+    autocollapse: boolean;
+    editMode: boolean;
+    showNotes: boolean;
+}
+declare const GroupHeaderBlock: import("svelte").Component<Props, {}, "">;
+type GroupHeaderBlock = ReturnType<typeof GroupHeaderBlock>;
+export default GroupHeaderBlock;

package/package/components/graph/GroupModuleIcons.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">import FlowModuleIcon from '../flows/FlowModuleIcon.svelte';
+import Tooltip from '../meltComponents/Tooltip.svelte';
+import DropdownV2 from '../DropdownV2.svelte';
+import { getGraphContext } from './graphContext';
+import { getNodeColorClasses } from './';
+let { modules, flowModuleStates, eventHandlers } = $props();
+const { selectionManager } = getGraphContext();
+// Badge width model: icon(16) + pl(2) + gap(2) + pr(6) = 26px fixed + ~5.5px per char
+const BADGE_FIXED = 26;
+const CHAR_WIDTH = 5.5;
+const BADGE_MAX = 128; // 8rem
+const GAP = 4; // gap-1
+const ROW_WIDTH = 255; // 275px container - 2*px-2 padding
+const OVERFLOW_BTN_WIDTH = 32;
+function estimateBadgeWidth(id) {
+    return BADGE_FIXED + id.length * CHAR_WIDTH;
+}
+function totalWidth(mods, capped) {
+    return mods.reduce((sum, mod, i) => sum +
+        Math.min(estimateBadgeWidth(mod.id), capped ? BADGE_MAX : Infinity) +
+        (i > 0 ? GAP : 0), 0);
+}
+let { displayModules, overflowModules, capIds } = $derived.by(() => {
+    // Step 1: try all badges with full ids
+    if (totalWidth(modules, false) <= ROW_WIDTH) {
+        return { displayModules: modules, overflowModules: [], capIds: false };
+    }
+    // Step 2: try all badges with ids capped at 8rem
+    if (totalWidth(modules, true) <= ROW_WIDTH) {
+        return { displayModules: modules, overflowModules: [], capIds: true };
+    }
+    // Step 3: remove last modules until capped badges fit
+    const available = ROW_WIDTH - OVERFLOW_BTN_WIDTH - GAP;
+    let count = modules.length;
+    while (count > 1 && totalWidth(modules.slice(0, count), true) > available) {
+        count--;
+    }
+    return {
+        displayModules: modules.slice(0, count),
+        overflowModules: modules.slice(count),
+        capIds: true
+    };
+});
+const STATE_PRIORITY = {
+    WaitingForEvents: 4,
+    InProgress: 3,
+    WaitingForExecutor: 3,
+    Failure: 2,
+    Success: 1
+};
+let overflowAggregateState = $derived.by(() => {
+    if (!flowModuleStates)
+        return undefined;
+    let best = undefined;
+    let bestPriority = 0;
+    for (const mod of overflowModules) {
+        const state = flowModuleStates[mod.id]?.type;
+        if (state) {
+            const p = STATE_PRIORITY[state] ?? 0;
+            if (p > bestPriority) {
+                bestPriority = p;
+                best = state;
+            }
+        }
+    }
+    return best;
+});
+function moduleLabel(mod) {
+    if (mod.summary)
+        return mod.summary;
+    const type = mod.value?.type;
+    if (type === 'forloopflow')
+        return 'For loop';
+    if (type === 'whileloopflow')
+        return 'While loop';
+    if (type === 'branchone')
+        return 'Run one branch';
+    if (type === 'branchall')
+        return 'Run all branches';
+    if (type === 'flow')
+        return 'Flow';
+    if (type === 'identity')
+        return 'Identity';
+    if (type === 'aiagent')
+        return 'AI Agent';
+    return mod.id;
+}
+function selectModule(mod) {
+    selectionManager.selectId(mod.id);
+    eventHandlers?.select(mod.id);
+}
+</script>
+
+<div class="flex items-center gap-1">
+	{#each displayModules as mod (mod.id)}
+		{@const selected = selectionManager.isNodeSelected(mod.id)}
+		{@const nodeState = flowModuleStates?.[mod.id]?.type}
+		{@const colorClasses = getNodeColorClasses(nodeState, selected)}
+		<Tooltip placement="bottom">
+			{#snippet children()}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="h-5 rounded-md overflow-hidden flex items-center gap-0.5 shrink-0 shadow-sm pl-0.5 pr-1.5 cursor-pointer hover:opacity-80 {colorClasses.bg} {colorClasses.outline}"
+					style={capIds ? 'max-width: 8rem;' : ''}
+					onclick={() => selectModule(mod)}
+				>
+					<div class="w-4 h-4 flex items-center justify-center shrink-0">
+						<FlowModuleIcon module={mod} size={12} />
+					</div>
+					<span class="text-3xs font-medium truncate text-right flex-1 {colorClasses.text}"
+						>{mod.id}</span
+					>
+				</div>
+			{/snippet}
+			{#snippet text()}
+				<span class="font-medium">{mod.id}</span>: {moduleLabel(mod)}
+			{/snippet}
+		</Tooltip>
+	{/each}
+	{#if overflowModules.length > 0}
+		{@const overflowColorClasses = getNodeColorClasses(overflowAggregateState, false)}
+		<DropdownV2 placement="bottom" customMenu usePointerDownOutside>
+			{#snippet buttonReplacement()}
+				<div
+					class="h-5 rounded-md flex items-center justify-center shrink-0 shadow-sm px-1.5 cursor-pointer hover:opacity-80 {overflowColorClasses.bg} {overflowColorClasses.outline}"
+				>
+					<span class="text-3xs font-medium {overflowColorClasses.text}"
+						>+{overflowModules.length}</span
+					>
+				</div>
+			{/snippet}
+			{#snippet menu()}
+				<div
+					class="bg-surface-tertiary dark:border rounded-lg shadow-lg py-1 w-56 overflow-y-auto"
+					style="max-height: 50vh;"
+				>
+					{#each overflowModules as mod (mod.id)}
+						{@const nodeState = flowModuleStates?.[mod.id]?.type}
+						{@const colorClasses = getNodeColorClasses(nodeState, false)}
+						{@const selected = selectionManager.isNodeSelected(mod.id)}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							class="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-surface-hover text-2xs {selected
+								? 'bg-surface-accent-selected'
+								: ''}"
+							onclick={() => selectModule(mod)}
+						>
+							<div
+								class="w-4 h-4 rounded flex items-center justify-center shrink-0 {colorClasses.bg}"
+							>
+								<FlowModuleIcon module={mod} size={12} />
+							</div>
+							<span class="truncate flex-1">{moduleLabel(mod)}</span>
+							<span class="text-tertiary shrink-0">{mod.id}</span>
+						</div>
+					{/each}
+				</div>
+			{/snippet}
+		</DropdownV2>
+	{/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { GraphModuleState } from './model';
+import type { FlowModule } from '../../gen';
+import type { GraphEventHandlers } from './graphBuilder.svelte';
+interface Props {
+    modules: FlowModule[];
+    flowModuleStates?: Record<string, GraphModuleState> | undefined;
+    eventHandlers?: GraphEventHandlers;
+}
+declare const GroupModuleIcons: import("svelte").Component<Props, {}, "">;
+type GroupModuleIcons = ReturnType<typeof GroupModuleIcons>;
+export default GroupModuleIcons;

package/package/components/graph/GroupNodeCard.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">import { Group } from 'lucide-svelte';
+import { getNodeColorClasses } from './';
+import { NOTE_COLORS, NoteColor } from './noteColors';
+import { NODE } from './util';
+import { twMerge } from 'tailwind-merge';
+import { preventDefault, stopPropagation } from 'svelte/legacy';
+import GroupNoteArea from './GroupNoteArea.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import GroupModuleIcons from './GroupModuleIcons.svelte';
+let { summary, selected = false, stepCount, color, note, showNote = false, editMode = false, modules, onExpand, onSummaryUpdate, onNoteUpdate, onHeightChange } = $props();
+let noteColorConfig = $derived(color ? (NOTE_COLORS[color] ?? NOTE_COLORS[NoteColor.BLUE]) : undefined);
+let defaultColorClasses = $derived(getNodeColorClasses(undefined, selected));
+// 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;
+    }
+}
+// Reset height to 0 when note is hidden
+$effect(() => {
+    if (!showNote) {
+        onHeightChange?.(0);
+    }
+});
+</script>
+
+<div
+	class={twMerge(
+		'w-full module cursor-pointer max-w-full',
+		'shadow-sm rounded-md overflow-clip',
+		'bg-surface-tertiary'
+	)}
+	style="width: {NODE.width}px;"
+>
+	<div
+		class={twMerge(
+			'absolute z-0 outline-offset-0 inset-0',
+			'rounded-md',
+			noteColorConfig ? noteColorConfig.outline : defaultColorClasses.outline
+		)}
+	></div>
+	<div class="flex items-center w-full gap-1.5 px-2 h-[34px] relative z-1">
+		{#if modules && modules.length > 0}
+			<GroupModuleIcons {modules} />
+		{:else}
+			<Group size={14} />
+		{/if}
+		<div
+			class="absolute inset-x-0 flex items-center justify-center h-[34px] pointer-events-none px-8"
+		>
+			{#if editingSummary}
+				<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 w-full text-center !min-h-0 !h-auto nodrag nowheel pointer-events-auto"
+					inputProps={{
+						placeholder: 'Group',
+						onblur: saveSummary,
+						onkeydown: handleSummaryKeydown,
+						spellcheck: false
+					}}
+				/>
+			{:else}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<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 || 'Group'}</span
+				>
+			{/if}
+		</div>
+		<div class="flex-1"></div>
+		{#if stepCount != null}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<span
+				class="text-3xs opacity-60 shrink-0 whitespace-nowrap {noteColorConfig
+					? noteColorConfig.text
+					: ''} {onExpand
+					? 'cursor-pointer hover:opacity-100 hover:text-blue-500 dark:hover:text-blue-400'
+					: ''}"
+				onclick={onExpand ? stopPropagation(preventDefault(onExpand)) : undefined}
+				>{stepCount} node{stepCount !== 1 ? 's' : ''}</span
+			>
+		{/if}
+	</div>
+
+	{#if showNote}
+		<div class="relative z-1">
+			<GroupNoteArea
+				note={note ?? ''}
+				{color}
+				{editMode}
+				onHeightChange={(h) => onHeightChange?.(h)}
+				onNoteUpdate={(text) => onNoteUpdate?.(text)}
+			/>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,18 @@
+import type { FlowModule } from '../../gen';
+interface Props {
+    summary?: string;
+    selected?: boolean;
+    stepCount?: number;
+    color?: string;
+    note?: string;
+    showNote?: boolean;
+    editMode?: boolean;
+    modules?: FlowModule[];
+    onExpand?: () => void;
+    onSummaryUpdate?: (text: string) => void;
+    onNoteUpdate?: (text: string) => void;
+    onHeightChange?: (height: number) => void;
+}
+declare const GroupNodeCard: import("svelte").Component<Props, {}, "">;
+type GroupNodeCard = ReturnType<typeof GroupNodeCard>;
+export default GroupNodeCard;

package/package/components/graph/GroupNoteArea.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">import GfmMarkdown from '../GfmMarkdown.svelte';
+import { Check, X } from 'lucide-svelte';
+import { NOTE_COLORS, NoteColor } from './noteColors';
+import { stopPropagation, preventDefault } from 'svelte/legacy';
+let { note, color, collapsed = false, editMode, onHeightChange, onNoteUpdate } = $props();
+let editing = $state(false);
+let editHeight = $state(0);
+let textContent = $state('');
+let textareaElement = $state(undefined);
+let containerElement = $state(undefined);
+function autoResize(el) {
+    el.style.height = 'auto';
+    el.style.height = el.scrollHeight + 'px';
+}
+let noteColorConfig = $derived(color
+    ? (NOTE_COLORS[color] ?? NOTE_COLORS[NoteColor.BLUE])
+    : NOTE_COLORS[NoteColor.BLUE]);
+// Measure height and report to parent (skip while editing to avoid full graph rebuilds)
+$effect(() => {
+    if (containerElement && !editing) {
+        const height = containerElement.clientHeight;
+        onHeightChange(height);
+    }
+});
+// Also observe resize for dynamic content
+$effect(() => {
+    if (!containerElement)
+        return;
+    const observer = new ResizeObserver((entries) => {
+        if (editing)
+            return;
+        for (const entry of entries) {
+            onHeightChange(entry.contentRect.height);
+        }
+    });
+    observer.observe(containerElement);
+    return () => {
+        observer.disconnect();
+        onHeightChange(0);
+    };
+});
+function handleDoubleClick() {
+    if (!editMode)
+        return;
+    editHeight = containerElement?.clientHeight ?? 0;
+    editing = true;
+    textContent = note;
+    requestAnimationFrame(() => {
+        if (textareaElement) {
+            autoResize(textareaElement);
+            textareaElement.focus();
+        }
+    });
+}
+function handleSave() {
+    editing = false;
+    if (textContent !== note) {
+        onNoteUpdate(textContent);
+    }
+}
+function handleCancel() {
+    editing = false;
+    textContent = note;
+}
+function handleKeydown(event) {
+    event.stopPropagation();
+    if (event.key === 'Escape') {
+        handleSave();
+    }
+}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={containerElement}
+	class="nodrag nopan {collapsed ? 'mx-px' : 'w-full rounded-b-md'}"
+>
+	<div class={collapsed ? 'relative' : 'w-full rounded-b-md relative'}>
+		{#if editing}
+			<div class="absolute top-0 right-1 flex gap-0.5 z-10">
+				<button
+					class="p-0.5 {noteColorConfig.text} opacity-60 hover:opacity-100 cursor-pointer"
+					onpointerdown={stopPropagation(preventDefault(handleSave))}
+					title="Save (Esc)"
+				>
+					<Check size={11} />
+				</button>
+				<button
+					class="p-0.5 {noteColorConfig.text} opacity-60 hover:opacity-100 cursor-pointer"
+					onpointerdown={stopPropagation(preventDefault(handleCancel))}
+					title="Cancel"
+				>
+					<X size={11} />
+				</button>
+			</div>
+			<textarea
+				bind:this={textareaElement}
+				bind:value={textContent}
+				class="w-full shadow-none resize-none !text-2xs overflow-y-auto border-none bg-transparent p-1 nodrag nopan nowheel focus:outline-none select-text {noteColorConfig.text}"
+				style:max-height="max({editHeight}px, 4lh)"
+				oninput={() => textareaElement && autoResize(textareaElement)}
+				placeholder="Write a note (markdown supported)"
+				onblur={handleSave}
+				onkeydown={handleKeydown}
+				onpointerdown={stopPropagation(() => {})}
+				spellcheck="false"
+			></textarea>
+		{:else if note}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="w-full text-2xs break-words overflow-hidden p-2 select-text {noteColorConfig.text} {editMode
+					? 'cursor-pointer'
+					: ''}"
+				ondblclick={editMode ? stopPropagation(preventDefault(handleDoubleClick)) : undefined}
+				onpointerdown={editMode ? stopPropagation(() => {}) : undefined}
+			>
+				<GfmMarkdown md={note} noPadding />
+			</div>
+		{:else}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="text-2xs italic opacity-60 p-2 {noteColorConfig.text} {editMode
+					? 'cursor-pointer'
+					: ''}"
+				ondblclick={editMode ? stopPropagation(preventDefault(handleDoubleClick)) : undefined}
+				onpointerdown={editMode ? stopPropagation(() => {}) : undefined}
+			>
+				Double click to edit the note
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,11 @@
+interface Props {
+    note: string;
+    color?: string;
+    collapsed?: boolean;
+    editMode: boolean;
+    onHeightChange: (height: number) => void;
+    onNoteUpdate: (text: string) => void;
+}
+declare const GroupNoteArea: import("svelte").Component<Props, {}, "">;
+type GroupNoteArea = ReturnType<typeof GroupNoteArea>;
+export default GroupNoteArea;

package/package/components/graph/GroupOverlay.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">import { ViewportPortal } from '@xyflow/svelte';
+import { GROUP_HEADER_HEIGHT, groupKey } from './groupEditor.svelte';
+import { getGraphContext } from './graphContext';
+import { NoteColor, NOTE_COLORS } from './noteColors';
+let { allNodes, groups, groupDepths } = $props();
+const graphContext = getGraphContext();
+// Pre-compute bounds for all groups reactively (tracks allNodes measured changes)
+let groupBoundsMap = $derived.by(() => {
+    const map = {};
+    const nodeMap = new Map(allNodes.map((n) => [n.id, n]));
+    for (const group of groups) {
+        if (graphContext?.groupDisplayState?.isRuntimeCollapsed(groupKey(group))) {
+            continue;
+        }
+        const headId = `group:${groupKey(group)}`;
+        const endId = `group:${groupKey(group)}-end`;
+        const headNode = nodeMap.get(headId);
+        const endNode = nodeMap.get(endId);
+        if (headNode && endNode) {
+            const d = headNode.data;
+            const headCenterX = headNode.position.x + (headNode.measured?.width ?? 275) / 2;
+            const wrapperWidth = d.wrapperWidth ?? 275;
+            const headHeight = headNode.measured?.height ?? GROUP_HEADER_HEIGHT;
+            const topY = headNode.position.y + headHeight / 2;
+            map[groupKey(group)] = {
+                x: headCenterX - wrapperWidth / 2,
+                y: topY,
+                width: wrapperWidth,
+                height: endNode.position.y - topY
+            };
+        }
+        else {
+            map[groupKey(group)] = null;
+        }
+    }
+    return map;
+});
+function getOutlineColorClass(color) {
+    const config = NOTE_COLORS[color ?? NoteColor.BLUE] ?? NOTE_COLORS[NoteColor.BLUE];
+    return config.outline;
+}
+function getBgColorClass(color) {
+    return (NOTE_COLORS[color ?? NoteColor.BLUE]?.backgroundLight ??
+        NOTE_COLORS[NoteColor.BLUE].backgroundLight);
+}
+const moveManager = graphContext?.moveManager;
+function isGroupDragged(groupId) {
+    if (!moveManager)
+        return false;
+    return (moveManager.draggedNodeIds.has(`group:${groupId}`) ||
+        moveManager.draggedNodeIds.has(`collapsed-group:${groupId}`));
+}
+</script>
+
+{#each groups as group (groupKey(group))}
+	{@const bounds = groupBoundsMap[groupKey(group)]}
+	{#if bounds}
+		<ViewportPortal target="back">
+			<div
+				class="absolute rounded-lg outline outline-1 -outline-offset-1 pointer-events-none {getOutlineColorClass(
+					group.color
+				)} {getBgColorClass(group.color)}"
+				class:opacity-30={isGroupDragged(groupKey(group))}
+				style:transform="translate({bounds.x}px, {bounds.y}px)"
+				style:width="{bounds.width}px"
+				style:height="{bounds.height}px"
+				style:z-index={-10 + (groupDepths[groupKey(group)] ?? 0)}
+			></div>
+		</ViewportPortal>
+	{/if}
+{/each}

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

@@ -0,0 +1,12 @@
+import { type Node } from '@xyflow/svelte';
+import { type FlowGroup } from './groupEditor.svelte';
+interface Props {
+    allNodes: (Node & {
+        type: string;
+    })[];
+    groups: FlowGroup[];
+    groupDepths: Record<string, number>;
+}
+declare const GroupOverlay: import("svelte").Component<Props, {}, "">;
+type GroupOverlay = ReturnType<typeof GroupOverlay>;
+export default GroupOverlay;

package/package/components/graph/MiniFlowGraph.svelte

@@ -18,11 +18,23 @@ import AssetNode from './renderers/nodes/AssetNode.svelte';
 import AssetsOverflowedNode from './renderers/nodes/AssetsOverflowedNode.svelte';
 import AiToolNode from './renderers/nodes/AIToolNode.svelte';
 import NewAiToolNode from './renderers/nodes/NewAIToolNode.svelte';
+import CollapsedGroupNode from './renderers/nodes/CollapsedGroupNode.svelte';
+import GroupHeadNode from './renderers/nodes/GroupHeadNode.svelte';
+import GroupEndNode from './renderers/nodes/GroupEndNode.svelte';
 import BaseEdge from './renderers/edges/BaseEdge.svelte';
 import EmptyEdge from './renderers/edges/EmptyEdge.svelte';
 import DataflowEdge from './renderers/edges/DataflowEdge.svelte';
 import HiddenBaseEdge from './renderers/edges/HiddenBaseEdge.svelte';
-let { nodes, edges, width, height, initialViewport } = $props();
+let { nodes: nodesProp, edges: edgesProp, width, height, initialViewport } = $props();
+// Use $state.raw to avoid deep reactive proxies that trigger xyflow's performance warning
+let nodes = $state.raw([]);
+let edges = $state.raw([]);
+$effect(() => {
+    nodes = [...nodesProp];
+});
+$effect(() => {
+    edges = [...edgesProp];
+});
 setGraphContext({
     selectionManager: new SelectionManager(),
     useDataflow: writable(false),
@@ -46,7 +58,10 @@ const nodeTypes = {
     asset: AssetNode,
     assetsOverflowed: AssetsOverflowedNode,
     aiTool: AiToolNode,
-    newAiTool: NewAiToolNode
+    newAiTool: NewAiToolNode,
+    collapsedGroup: CollapsedGroupNode,
+    groupHead: GroupHeadNode,
+    groupEnd: GroupEndNode
 };
 const edgeTypes = {
     edge: BaseEdge,