From f8a53a817d6a627ebb561e8ec24a12cf052a82f4 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 25 Feb 2026 08:46:08 +0000
Subject: [PATCH] feat: add clickable step count to toggle group
 collapse/expand

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/lib/components/graph/GroupNodeCard.svelte | 10 +++++++++-
 frontend/src/lib/components/graph/GroupOverlay.svelte  |  1 +
 .../graph/renderers/nodes/CollapsedGroupNode.svelte    |  1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/graph/GroupNodeCard.svelte b/frontend/src/lib/components/graph/GroupNodeCard.svelte
index 7ee51c1487..925f706b0a 100644
--- a/frontend/src/lib/components/graph/GroupNodeCard.svelte
+++ b/frontend/src/lib/components/graph/GroupNodeCard.svelte
@@ -19,6 +19,7 @@
 		showNote?: boolean
 		editMode?: boolean
 		modules?: FlowModule[]
+		onExpand?: () => void
 		onSummaryUpdate?: (text: string) => void
 		onNoteUpdate?: (text: string) => void
 		onHeightChange?: (height: number) => void
@@ -34,6 +35,7 @@
 		showNote = false,
 		editMode = false,
 		modules,
+		onExpand,
 		onSummaryUpdate,
 		onNoteUpdate,
 		onHeightChange
@@ -132,7 +134,13 @@
 			>
 		{/if}
 		{#if stepCount != null}
-			<span class="text-3xs opacity-60 ml-auto shrink-0 whitespace-nowrap"
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<span
+				class="text-3xs opacity-60 ml-auto shrink-0 whitespace-nowrap {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}
diff --git a/frontend/src/lib/components/graph/GroupOverlay.svelte b/frontend/src/lib/components/graph/GroupOverlay.svelte
index 2aad4bd1dd..c743d65674 100644
--- a/frontend/src/lib/components/graph/GroupOverlay.svelte
+++ b/frontend/src/lib/components/graph/GroupOverlay.svelte
@@ -155,6 +155,7 @@
 							showNote={showNotes && group.note != null}
 							{editMode}
 							modules={getGroupModules(group)}
+							onExpand={() => toggleCollapse(group.id)}
 							onSummaryUpdate={(text) => groupEditorContext?.groupEditor.updateSummary(group.id, text)}
 							onNoteUpdate={(text) => groupEditorContext?.groupEditor.updateNote(group.id, text)}
 							onHeightChange={(h) => groupEditorContext?.groupEditor.setNoteHeight(group.id, h)}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
index d758d56c0a..fb90a43952 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
@@ -47,6 +47,7 @@
 				showNote={data.showNotes && data.note != null}
 				editMode={data.editMode}
 				modules={data.modules}
+				onExpand={() => data.eventHandlers.expandGroup(data.groupId)}
 				onSummaryUpdate={(text) =>
 					groupEditorContext?.groupEditor.updateSummary(data.groupId, text)}
 				onNoteUpdate={(text) => groupEditorContext?.groupEditor.updateNote(data.groupId, text)}