From e866a855422877bf95a94747c643bfec5a89443d Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 23 Feb 2026 17:20:34 +0000
Subject: [PATCH] feat: render collapsed group node like imported flow module

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../renderers/nodes/CollapsedGroupNode.svelte | 70 ++++++++++++++-----
 1 file changed, 51 insertions(+), 19 deletions(-)

diff --git a/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
index f029571e83..e9a71bacae 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
 	import { preventDefault, stopPropagation } from 'svelte/legacy'
-	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import FlowModuleSchemaItemViewer from '$lib/components/flows/map/FlowModuleSchemaItemViewer.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import { Maximize2 } from 'lucide-svelte'
+	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 	import type { CollapsedGroupN } from '../../graphBuilder.svelte'
 	import { getGraphContext } from '../../graphContext'
+	import { getNodeColorClasses } from '$lib/components/graph'
+	import { twMerge } from 'tailwind-merge'
 
 	interface Props {
 		data: CollapsedGroupN['data']
@@ -14,28 +17,57 @@
 	let { data, id }: Props = $props()
 
 	const { selectionManager } = getGraphContext()
+
+	let selected = $derived(!!(selectionManager && selectionManager.isNodeSelected(id)))
+	let colorClasses = $derived(getNodeColorClasses(undefined, selected))
+	let hover = $state(false)
 </script>
 
 <NodeWrapper offset={data.offset}>
 	{#snippet children({ darkMode })}
-		<VirtualItem
-			label={data.summary || 'Group'}
-			preLabel={`${data.stepCount} steps`}
-			selectable
-			selected={selectionManager && selectionManager.isNodeSelected(id)}
-		/>
-		<div class="z-50 absolute -top-4 right-11 rounded-md text-primary bg-surface">
-			<button
-				title="Expand group"
-				class="rounded-md center-center text-primary hover:bg-surface-tertiary shadow-md p-1 duration-0"
-				onclick={stopPropagation(
-					preventDefault(() => {
-						data.eventHandlers.expandGroup(data.groupId)
-					})
-				)}
-			>
-				<Maximize2 size={12} />
-			</button>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class={twMerge(
+				'w-full module flex rounded-md cursor-pointer max-w-full drop-shadow-base',
+				colorClasses.bg
+			)}
+			style="width: 275px; height: 34px;"
+			onmouseenter={() => (hover = true)}
+			onmouseleave={() => (hover = false)}
+		>
+			<div
+				class={twMerge('absolute z-0 rounded-md outline-offset-0', colorClasses.outline)}
+				style="width: 275px; height: 34px;"
+			></div>
+			<div class="flex flex-col w-full">
+				<FlowModuleSchemaItemViewer
+					label={data.summary || 'Group'}
+					{colorClasses}
+				>
+					{#snippet icon()}
+						<BarsStaggered size={16} />
+					{/snippet}
+				</FlowModuleSchemaItemViewer>
+			</div>
+
+			<div class="absolute -translate-y-[100%] top-2 right-10 h-7 p-1">
+				<button
+					title="Expand group"
+					class={twMerge(
+						'center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary p-1',
+						'shadow-md rounded-md',
+						hover || selected ? 'opacity-100' : 'opacity-50'
+					)}
+					onclick={stopPropagation(
+						preventDefault(() => {
+							data.eventHandlers.expandGroup(data.groupId)
+						})
+					)}
+					onpointerdown={stopPropagation(preventDefault(() => {}))}
+				>
+					<Maximize2 size={12} />
+				</button>
+			</div>
 		</div>
 	{/snippet}
 </NodeWrapper>