From 2d6458a0c6d96e8009cb852bb2043d532a50f11d Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 4 Mar 2026 16:36:49 +0000
Subject: [PATCH] feat: display group name next to step count when collapsed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/graph/StepCountTab.svelte    |  5 +++--
 .../graph/renderers/nodes/CollapsedGroupNode.svelte | 13 +++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/graph/StepCountTab.svelte b/frontend/src/lib/components/graph/StepCountTab.svelte
index f9b6ad0eb8..a3f04402d3 100644
--- a/frontend/src/lib/components/graph/StepCountTab.svelte
+++ b/frontend/src/lib/components/graph/StepCountTab.svelte
@@ -6,13 +6,14 @@
 	interface Props {
 		stepCount?: number
 		label?: string
+		summary?: string
 		color?: string
 		collapsed?: boolean
 		short?: boolean
 		onExpand?: () => void
 	}
 
-	let { stepCount, label, color, collapsed = true, short = false, onExpand }: Props = $props()
+	let { stepCount, label, summary, color, collapsed = true, short = false, onExpand }: Props = $props()
 
 	let colorConfig: NoteColorConfig = $derived(
 		color
@@ -32,7 +33,7 @@
 	onpointerdown={onExpand ? stopPropagation(preventDefault(() => {})) : undefined}
 >
 	<div class="flex items-center gap-1 py-0.5 whitespace-nowrap">
-		{#if label}{label}{:else}{stepCount} step{stepCount !== 1 ? 's' : ''}{/if}
+		{#if label}{label}{:else}{stepCount} step{stepCount !== 1 ? 's' : ''}{/if}{#if summary && collapsed}<span class="opacity-60 mx-0.5">·</span><span class="truncate max-w-[120px]">{summary}</span>{/if}
 		{#if onExpand}
 			{#if collapsed}<Maximize2 size={10} class="-my-1" />{:else}<Minimize2
 					size={10}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
index c9d22311bd..db7dd7a250 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
@@ -30,12 +30,13 @@
 <NodeWrapper offset={data.offset}>
 	{#snippet children({ darkMode })}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="relative"
-			onmouseenter={() => (hover = true)}
-			onmouseleave={() => (hover = false)}
-		>
-			<StepCountTab stepCount={data.stepCount} color={data.color} onExpand={() => data.eventHandlers.expandGroup(data.groupId)} />
+		<div class="relative" onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)}>
+			<StepCountTab
+				stepCount={data.stepCount}
+				summary={data.summary}
+				color={data.color}
+				onExpand={() => data.eventHandlers.expandGroup(data.groupId)}
+			/>
 
 			<GroupNodeCard
 				summary={data.summary}