From 5ab4b9a9e346e82f85a471a3411ab23b7d707290 Mon Sep 17 00:00:00 2001
From: stijnpotters <stijn.potters1@gmail.com>
Date: Wed, 13 May 2026 11:12:14 +0200
Subject: [PATCH 1/3] Add group node color and description support; enhance
 multi-selection context handling

---
 src/main/frontend/app/app.css                 |  14 ++
 .../app/routes/studio/canvas/flow.tsx         |  50 ++++++-
 .../studio/canvas/nodetypes/frank-node.tsx    |   4 +-
 .../studio/canvas/nodetypes/group-node.tsx    |  44 ++++--
 .../routes/studio/context/group-context.tsx   |  84 +++++++++++
 .../app/routes/studio/flow-to-xml-parser.ts   |  14 +-
 .../frontend/app/routes/studio/studio.tsx     | 139 ++++++++++--------
 .../app/routes/studio/xml-to-json-parser.ts   |   6 +-
 src/main/frontend/app/stores/flow-store.ts    |  32 +++-
 .../frontend/app/stores/node-context-store.ts |   4 +
 .../frontend/src/assets/xsd/FlowConfig.xsd    |   8 +-
 11 files changed, 308 insertions(+), 91 deletions(-)
 create mode 100644 src/main/frontend/app/routes/studio/context/group-context.tsx

diff --git a/src/main/frontend/app/app.css b/src/main/frontend/app/app.css
index fc5078fe..ed3e8003 100644
--- a/src/main/frontend/app/app.css
+++ b/src/main/frontend/app/app.css
@@ -60,6 +60,13 @@
     --sticky-color-purple: #e9d5ff;
     --sticky-color-orange: #fed7aa;
 
+    --group-color-blue: #93c5fd;
+    --group-color-violet: #c4b5fd;
+    --group-color-rose: #fda4af;
+    --group-color-green: #86efac;
+    --group-color-amber: #fcd34d;
+    --group-color-cyan: #67e8f9;
+
     /* Palette Styling */
     --palette-pipes: #68d250;
     --palette-listeners: #d250bf;
@@ -110,6 +117,13 @@
     --sticky-color-purple: #581c87;
     --sticky-color-orange: #9a3412;
 
+    --group-color-blue: #1d4ed8;
+    --group-color-violet: #6d28d9;
+    --group-color-rose: #be123c;
+    --group-color-green: #15803d;
+    --group-color-amber: #b45309;
+    --group-color-cyan: #0e7490;
+
     --palette-pipes: #136502;
     --palette-listeners: #853279;
     --palette-senders: #1c7c6a;
diff --git a/src/main/frontend/app/routes/studio/canvas/flow.tsx b/src/main/frontend/app/routes/studio/canvas/flow.tsx
index f9438836..1fafa01a 100644
--- a/src/main/frontend/app/routes/studio/canvas/flow.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/flow.tsx
@@ -122,6 +122,7 @@ function FlowCanvas() {
     setDropSuccessful,
     setIsMultiSelect,
     setSelectedStickyId,
+    setSelectedGroupId,
   } = useNodeContextStore(
     useShallow((s) => ({
       isEditing: s.isEditing,
@@ -139,6 +140,7 @@ function FlowCanvas() {
       setIsMultiSelect: s.setIsMultiSelect,
       setSelectedStickyId: s.setSelectedStickyId,
       selectedStickyId: s.selectedStickyId,
+      setSelectedGroupId: s.setSelectedGroupId,
     })),
   )
   const { elements } = useFFDoc()
@@ -461,6 +463,7 @@ function FlowCanvas() {
 
     if (fullySelectedGroupIds.length > 1) {
       handleMultiGroupMerge(fullySelectedGroupIds, selectedNodes)
+      showNodeContextMenu(true)
       return
     }
 
@@ -468,10 +471,12 @@ function FlowCanvas() {
 
     if (shouldMergeUngroupedIntoGroup(selectedNodes)) {
       handleMergeUngroupedIntoGroup(selectedNodes)
+      showNodeContextMenu(true)
       return
     }
 
     groupNodes(selectedNodes, nodes)
+    showNodeContextMenu(true)
   }, [
     nodes,
     allSelectedInSameGroup,
@@ -479,6 +484,7 @@ function FlowCanvas() {
     handleMergeUngroupedIntoGroup,
     handleMultiGroupMerge,
     shouldMergeUngroupedIntoGroup,
+    showNodeContextMenu,
   ])
 
   const copySelection = useCallback(() => {
@@ -652,6 +658,14 @@ function FlowCanvas() {
 
       if (node.type === 'stickyNote') {
         setSelectedStickyId(node.id)
+        setSelectedGroupId(null)
+        showNodeContextMenu(true)
+        return
+      }
+
+      if (node.type === 'groupNode') {
+        setSelectedGroupId(node.id)
+        setSelectedStickyId(null)
         showNodeContextMenu(true)
         return
       }
@@ -661,12 +675,21 @@ function FlowCanvas() {
         if (frankElement) {
           deselectOtherNodes(node.id)
           setSelectedStickyId(null)
+          setSelectedGroupId(null)
           applyNodeContext(node, frankElement)
           showNodeContextMenu(true)
         }
       }
     },
-    [isDirty, lookupFrankElement, deselectOtherNodes, applyNodeContext, showNodeContextMenu, setSelectedStickyId],
+    [
+      isDirty,
+      lookupFrankElement,
+      deselectOtherNodes,
+      applyNodeContext,
+      showNodeContextMenu,
+      setSelectedStickyId,
+      setSelectedGroupId,
+    ],
   )
 
   const handleNodeDoubleClick = useCallback(
@@ -703,21 +726,31 @@ function FlowCanvas() {
   const handleEdgeClick = useCallback(() => {
     setIsMultiSelect(false)
     setSelectedStickyId(null)
+    setSelectedGroupId(null)
     showNodeContextMenu(false)
     setIsEditing(false)
-  }, [setIsMultiSelect, setSelectedStickyId, showNodeContextMenu, setIsEditing])
+  }, [setIsMultiSelect, setSelectedStickyId, setSelectedGroupId, showNodeContextMenu, setIsEditing])
 
   const handleSelectionChange = useCallback(
     ({ nodes: selectedNodes }: { nodes: FlowNode[] }) => {
       const frankNodes = selectedNodes.filter((n) => isFrankNode(n))
 
       if (frankNodes.length > 1) {
+        const firstParent = frankNodes[0]?.parentId
+        const allInSameGroup = Boolean(firstParent) && frankNodes.every((n) => n.parentId === firstParent)
+
         setIsMultiSelect(true)
         setSelectedStickyId(null)
-        showNodeContextMenu(false)
+        setSelectedGroupId(null)
         setIsEditing(false)
         setParentId(null)
         setChildParentId(null)
+
+        if (allInSameGroup) {
+          showNodeContextMenu(true)
+        } else {
+          showNodeContextMenu(false)
+        }
         return
       }
 
@@ -727,6 +760,7 @@ function FlowCanvas() {
         const frankElement = lookupFrankElement((frankNodes[0] as FrankNodeType).data.subtype)
         if (!frankElement) return
         setSelectedStickyId(null)
+        setSelectedGroupId(null)
         applyNodeContext(frankNodes[0] as FrankNodeType, frankElement)
         showContextIfSidebarOpen()
       }
@@ -736,6 +770,7 @@ function FlowCanvas() {
       setIsEditing,
       setIsMultiSelect,
       setSelectedStickyId,
+      setSelectedGroupId,
       setParentId,
       setChildParentId,
       lookupFrankElement,
@@ -1066,13 +1101,19 @@ function FlowCanvas() {
     const unsub = useFlowStore.subscribe(
       (state) => state.nodes,
       (nodes) => {
-        const { selectedStickyId, setSelectedStickyId, setIsEditing } = useNodeContextStore.getState()
+        const { selectedStickyId, setSelectedStickyId, selectedGroupId, setSelectedGroupId, setIsEditing } =
+          useNodeContextStore.getState()
 
         if (selectedStickyId && !nodes.some((node) => node.id === selectedStickyId)) {
           setSelectedStickyId(null)
           showNodeContextMenu(false)
           setIsEditing(false)
         }
+
+        if (selectedGroupId && !nodes.some((node) => node.id === selectedGroupId)) {
+          setSelectedGroupId(null)
+          showNodeContextMenu(false)
+        }
       },
     )
     return () => unsub()
@@ -1158,6 +1199,7 @@ function FlowCanvas() {
         onPaneClick={() => {
           setContextMenu(null)
           setSelectedStickyId(null)
+          setSelectedGroupId(null)
           if (!isDirty) {
             showNodeContextMenu(false)
             setIsEditing(false)
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
index 1a994b1d..0eb1731f 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx
@@ -492,9 +492,7 @@ export default function FrankNode(properties: NodeProps<FrankNodeType>) {
         {properties.data.attributes &&
           Object.entries(properties.data.attributes).map(([key, value]) => (
             <div key={key} className="my-1 w-full max-w-full px-1">
-              <p className="text-gray-1000 overflow-hidden text-sm font-bold text-ellipsis whitespace-nowrap">
-                {key}
-              </p>
+              <p className="text-gray-1000 overflow-hidden text-sm font-bold text-ellipsis whitespace-nowrap">{key}</p>
               <p className="overflow-hidden text-sm text-ellipsis whitespace-nowrap">{value}</p>
             </div>
           ))}
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
index 1671b2a8..edce617a 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
@@ -3,8 +3,21 @@ import { useState, type ChangeEvent } from 'react'
 import { ResizeIcon } from '~/routes/studio/canvas/nodetypes/frank-node'
 import useFlowStore from '~/stores/flow-store'
 
+export const GROUP_COLORS = [
+  { label: 'Blue', value: 'var(--group-color-blue)' },
+  { label: 'Violet', value: 'var(--group-color-violet)' },
+  { label: 'Rose', value: 'var(--group-color-rose)' },
+  { label: 'Green', value: 'var(--group-color-green)' },
+  { label: 'Amber', value: 'var(--group-color-amber)' },
+  { label: 'Cyan', value: 'var(--group-color-cyan)' },
+]
+
+export const GROUP_DEFAULT_COLOR = 'var(--group-color-blue)'
+
 export type GroupNode = Node<{
   label: string
+  description?: string
+  color?: string
   width: number
   height: number
   childrenNames?: string[]
@@ -16,15 +29,20 @@ export default function GroupNodeComponent({ id, data, selected }: NodeProps<Gro
     height: data.height,
   })
   const [isEditing, setIsEditing] = useState(false)
-  const [label, setLabel] = useState(data.label)
-  const { setGroupnodeLabel } = useFlowStore.getState()
+  const [editValue, setEditValue] = useState('')
+
+  const color = data.color || GROUP_DEFAULT_COLOR
+
+  const handleStartEdit = () => {
+    setEditValue(data.label)
+    setIsEditing(true)
+  }
 
   const handleBlur = () => setIsEditing(false)
-  const handleClick = () => setIsEditing(true)
 
   const handleSave = (event: ChangeEvent<HTMLInputElement>) => {
-    setGroupnodeLabel(id, event.target.value)
-    setLabel(event.target.value)
+    setEditValue(event.target.value)
+    useFlowStore.getState().setGroupnodeLabel(id, event.target.value)
   }
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -36,7 +54,7 @@ export default function GroupNodeComponent({ id, data, selected }: NodeProps<Gro
   return (
     <>
       <NodeResizeControl
-        onResize={(event, resizeData) => {
+        onResize={(_event, resizeData) => {
           setDimensions({
             width: resizeData.width,
             height: resizeData.height,
@@ -47,16 +65,18 @@ export default function GroupNodeComponent({ id, data, selected }: NodeProps<Gro
         <ResizeIcon color="black" />
       </NodeResizeControl>
       <div
-        className={`cursor-default rounded border bg-pink-300/25 ${selected ? 'border-blue-500' : 'border-border'}`}
+        className={`cursor-default rounded border ${selected ? 'border-blue-500' : 'border-border'}`}
         style={{
           width: dimensions.width,
           height: dimensions.height,
+          backgroundColor: `color-mix(in srgb, ${color} 25%, transparent)`,
         }}
       >
         <div
-          className="drag-handle relative max-h-1/2 cursor-move bg-pink-300 p-1"
+          className="drag-handle relative max-h-1/2 cursor-move p-1"
           style={{
             pointerEvents: 'all',
+            backgroundColor: color,
           }}
         >
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
@@ -67,7 +87,7 @@ export default function GroupNodeComponent({ id, data, selected }: NodeProps<Gro
             {isEditing ? (
               <input
                 type="text"
-                value={label}
+                value={editValue}
                 onChange={handleSave}
                 onKeyDown={handleKeyDown}
                 onBlur={handleBlur}
@@ -76,10 +96,10 @@ export default function GroupNodeComponent({ id, data, selected }: NodeProps<Gro
               />
             ) : (
               <>
-                <div className="cursor-pointer" onClick={handleClick}>
-                  {label}
+                <div className="cursor-pointer" onClick={handleStartEdit}>
+                  {data.label}
                 </div>
-                <div onClick={handleClick} className="flex-shrink-0 cursor-pointer self-start">
+                <div onClick={handleStartEdit} className="flex-shrink-0 cursor-pointer self-start">
                   <PenIcon />
                 </div>
               </>
diff --git a/src/main/frontend/app/routes/studio/context/group-context.tsx b/src/main/frontend/app/routes/studio/context/group-context.tsx
new file mode 100644
index 00000000..df80766e
--- /dev/null
+++ b/src/main/frontend/app/routes/studio/context/group-context.tsx
@@ -0,0 +1,84 @@
+import useFlowStore, { isGroupNode } from '~/stores/flow-store'
+import { GROUP_COLORS, GROUP_DEFAULT_COLOR } from '~/routes/studio/canvas/nodetypes/group-node'
+import { ALL_SHORTCUTS, formatShortcutParts, useShortcutStore } from '~/stores/shortcut-store'
+import Button from '~/components/inputs/button'
+
+export default function GroupContext({ nodeId }: Readonly<{ nodeId: string }>) {
+  const node = useFlowStore((state) => state.nodes.find((node) => node.id === nodeId))
+  const platform = useShortcutStore((state) => state.platform)
+
+  if (!node || !isGroupNode(node)) return null
+
+  const { label, description = '', color = GROUP_DEFAULT_COLOR } = node.data
+
+  const ungroupDef = ALL_SHORTCUTS.find((state) => state.id === 'studio.ungroup')!
+  const ungroupParts = formatShortcutParts(ungroupDef, platform)
+  const triggerUngroup = () => useShortcutStore.getState().shortcuts.get('studio.ungroup')?.handler?.()
+
+  return (
+    <div className="flex flex-col">
+      <div className="p-4">
+        <Button onClick={triggerUngroup} className="flex w-full items-center justify-between gap-2 px-4 py-2 text-sm">
+          <span>Ungroup</span>
+          <span className="flex gap-1">
+            {ungroupParts.map((part) => (
+              <kbd
+                key={part}
+                className="rounded border border-current/40 bg-current/10 px-1.5 py-0.5 font-mono text-xs"
+              >
+                {part}
+              </kbd>
+            ))}
+          </span>
+        </Button>
+      </div>
+
+      <div className="bg-border h-px" />
+
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex flex-col gap-1">
+          <label className="text-foreground-muted text-xs font-semibold tracking-wide uppercase">Name</label>
+          <input
+            type="text"
+            value={label}
+            onChange={(changeEvent) => useFlowStore.getState().setGroupnodeLabel(nodeId, changeEvent.target.value)}
+            className="border-border bg-background text-foreground focus:ring-ring w-full rounded border px-3 py-2 text-sm focus:ring-1 focus:outline-none"
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <label className="text-foreground-muted text-xs font-semibold tracking-wide uppercase">Description</label>
+          <textarea
+            value={description}
+            onChange={(changeEvent) =>
+              useFlowStore.getState().setGroupnodeDescription(nodeId, changeEvent.target.value)
+            }
+            rows={3}
+            className="border-border bg-background text-foreground focus:ring-ring w-full resize-none rounded border px-3 py-2 text-sm focus:ring-1 focus:outline-none"
+            placeholder="Add a description..."
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <label className="text-foreground-muted text-xs font-semibold tracking-wide uppercase">Color</label>
+          <div className="flex flex-wrap gap-2">
+            {GROUP_COLORS.map(({ label: colorLabel, value }) => (
+              <button
+                key={value}
+                title={colorLabel}
+                onClick={() => useFlowStore.getState().setGroupnodeColor(nodeId, value)}
+                className="h-7 w-7 rounded-full border-2 transition-transform hover:scale-110"
+                style={{
+                  background: value,
+                  borderColor: color === value ? '#3b82f6' : 'transparent',
+                  outline: color === value ? '2px solid #3b82f6' : 'none',
+                  outlineOffset: '2px',
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/main/frontend/app/routes/studio/flow-to-xml-parser.ts b/src/main/frontend/app/routes/studio/flow-to-xml-parser.ts
index e90f204b..c1872ed5 100644
--- a/src/main/frontend/app/routes/studio/flow-to-xml-parser.ts
+++ b/src/main/frontend/app/routes/studio/flow-to-xml-parser.ts
@@ -359,15 +359,23 @@ function generateGroupNodeXml(groupNodes: GroupNode[], groupChildrenMap: Map<str
 
     const groupName = escapeXml(groupNode.data?.label || '')
 
-    const attrs = [
+    const attrParts = [
       `flow:children="${childNames}"`,
       `flow:height="${height}"`,
       `flow:width="${width}"`,
       `flow:x="${roundedX}"`,
       `flow:y="${roundedY}"`,
       `flow:label="${groupName}"`,
-    ].join(' ')
+    ]
 
-    return `    <flow:GroupNode ${attrs} />`
+    if (groupNode.data?.description) {
+      attrParts.push(`flow:description="${escapeXml(groupNode.data.description)}"`)
+    }
+
+    if (groupNode.data?.color) {
+      attrParts.push(`flow:color="${escapeXml(groupNode.data.color)}"`)
+    }
+
+    return `    <flow:GroupNode ${attrParts.join(' ')} />`
   })
 }
diff --git a/src/main/frontend/app/routes/studio/studio.tsx b/src/main/frontend/app/routes/studio/studio.tsx
index 7bb7ed52..d11ff717 100644
--- a/src/main/frontend/app/routes/studio/studio.tsx
+++ b/src/main/frontend/app/routes/studio/studio.tsx
@@ -20,61 +20,63 @@ import Button from '~/components/inputs/button'
 import useFlowStore, { isStickyNote } from '~/stores/flow-store'
 import type { StickyNote } from '~/routes/studio/canvas/nodetypes/sticky-note'
 import { ALL_SHORTCUTS, formatShortcutParts, useShortcutStore } from '~/stores/shortcut-store'
+import GroupContext from '~/routes/studio/context/group-context'
 
 interface RightPanelProps {
   isMultiSelect: boolean
   selectedStickyId: string | null
+  selectedGroupId: string | null
   showNodeContext: boolean
   nodeId: number
   editingSubtype: string | null
-  groupLabel: string
-  groupKeyHint: string
-  groupActionId: string
   onShowNodeContext: (visible: boolean) => void
 }
 
 function getRightPanelTitle(
   isMultiSelect: boolean,
+  allInSameGroup: boolean,
   selectedStickyId: string | null,
-  groupLabel: string,
+  selectedGroupId: string | null,
   showNodeContext: boolean,
   editingSubtype: string | null,
 ): string {
-  if (isMultiSelect) return groupLabel
+  if (isMultiSelect) return allInSameGroup ? 'Group' : 'Group Selection'
   if (selectedStickyId) return 'Sticky Note'
+  if (selectedGroupId) return 'Group'
   if (showNodeContext) return `Edit ${editingSubtype ?? 'node'}`
   return 'Palette'
 }
 
 function MultiSelectPanel() {
-  const allInSameGroup = useFlowStore((state) => {
-    const selected = state.nodes.filter((node) => node.selected)
-    if (selected.length < 2) return false
-    const firstParent = selected[0].parentId
-    return Boolean(firstParent) && selected.every((node) => node.parentId === firstParent)
-  })
+  const { allInSameGroup, groupId } = useFlowStore(
+    useShallow((state) => {
+      const selected = state.nodes.filter((node) => node.selected)
+      if (selected.length < 2) return { allInSameGroup: false, groupId: null }
 
-  const platform = useShortcutStore((shortcut) => shortcut.platform)
+      const content = selected.filter((node) => node.type === 'frankNode' || node.type === 'exitNode')
+      if (content.length < 2) return { allInSameGroup: false, groupId: null }
 
-  const groupDef = ALL_SHORTCUTS.find((shortCut) => shortCut.id === 'studio.group')!
-  const ungroupDef = ALL_SHORTCUTS.find((shortCut) => shortCut.id === 'studio.ungroup')!
+      const firstParent = content[0].parentId
+      const allSame = Boolean(firstParent) && content.every((node) => node.parentId === firstParent)
+      return { allInSameGroup: allSame, groupId: allSame ? (firstParent ?? null) : null }
+    }),
+  )
 
+  const platform = useShortcutStore((shortcut) => shortcut.platform)
+  const groupDef = ALL_SHORTCUTS.find((shortCut) => shortCut.id === 'studio.group')!
   const groupParts = formatShortcutParts(groupDef, platform)
-  const ungroupParts = formatShortcutParts(ungroupDef, platform)
-
   const triggerGroup = () => useShortcutStore.getState().shortcuts.get('studio.group')?.handler?.()
-  const triggerUngroup = () => useShortcutStore.getState().shortcuts.get('studio.ungroup')?.handler?.()
 
-  const actionLabel = allInSameGroup ? 'Ungroup' : 'Group'
-  const actionParts = allInSameGroup ? ungroupParts : groupParts
-  const triggerAction = allInSameGroup ? triggerUngroup : triggerGroup
+  if (allInSameGroup && groupId) {
+    return <GroupContext nodeId={groupId} />
+  }
 
   return (
-    <div className="flex flex-col gap-2 p-4">
-      <Button onClick={triggerAction} className="flex items-center justify-between gap-2 px-4 py-2 text-sm">
-        <span>{actionLabel}</span>
+    <div className="p-4">
+      <Button onClick={triggerGroup} className="flex w-full items-center justify-between gap-2 px-4 py-2 text-sm">
+        <span>Group</span>
         <span className="flex gap-1">
-          {actionParts.map((part) => (
+          {groupParts.map((part) => (
             <kbd key={part} className="rounded border border-current/40 bg-current/10 px-1.5 py-0.5 font-mono text-xs">
               {part}
             </kbd>
@@ -117,28 +119,48 @@ function AttachedNotesPanel({ nodeId }: { nodeId: number }) {
 }
 
 function RightPanelContent({
-  isMultiSelect,
-  selectedStickyId,
-  showNodeContext,
-  nodeId,
-  onShowNodeContext,
-}: RightPanelProps) {
-  const showPalette = !isMultiSelect && !selectedStickyId && !showNodeContext
+                             isMultiSelect,
+                             selectedStickyId,
+                             selectedGroupId, // Added prop
+                             showNodeContext,
+                             nodeId,
+                             onShowNodeContext,
+                           }: RightPanelProps) {
+  // The palette (StudioContext) only shows if absolutely nothing else is active
+  const showPalette =
+          !isMultiSelect &&
+          !selectedStickyId &&
+          !selectedGroupId &&
+          !showNodeContext
 
   return (
-    <>
-      {isMultiSelect && <MultiSelectPanel />}
-      {!isMultiSelect && selectedStickyId && <StickyNoteContext nodeId={selectedStickyId} />}
-      {!isMultiSelect && !selectedStickyId && showNodeContext && (
-        <div className="flex min-h-0 flex-1 flex-col">
-          <AttachedNotesPanel nodeId={nodeId} />
-          <NodeContext nodeId={nodeId} setShowNodeContext={onShowNodeContext} />
-        </div>
-      )}
-      <div className={showPalette ? 'contents' : 'hidden'}>
-        <StudioContext />
-      </div>
-    </>
+          <>
+            {/* 1. Multi-Select Priority */}
+            {isMultiSelect && <MultiSelectPanel />}
+
+            {/* 2. Sticky Note Priority */}
+            {!isMultiSelect && selectedStickyId && (
+                    <StickyNoteContext nodeId={selectedStickyId} />
+            )}
+
+            {/* 3. Group Context Priority */}
+            {!isMultiSelect && !selectedStickyId && selectedGroupId && (
+                    <GroupContext nodeId={selectedGroupId} />
+            )}
+
+            {/* 4. Node Context (Attached Notes) */}
+            {!isMultiSelect && !selectedStickyId && !selectedGroupId && showNodeContext && (
+                    <div className="flex min-h-0 flex-1 flex-col">
+                      <AttachedNotesPanel nodeId={nodeId} />
+                      <NodeContext nodeId={nodeId} setShowNodeContext={onShowNodeContext} />
+                    </div>
+            )}
+
+            {/* 5. Default Studio Context (Palette) */}
+            <div className={showPalette ? 'contents' : 'hidden'}>
+              <StudioContext />
+            </div>
+          </>
   )
 }
 
@@ -146,12 +168,13 @@ export default function Studio() {
   const project = useProjectStore((state) => state.project)
   const setVisibility = useSidebarStore((state) => state.setVisibility)
   const [showNodeContext, setShowNodeContext] = useState(false)
-  const { nodeId, editingSubtype, isMultiSelect, selectedStickyId } = useNodeContextStore(
+  const { nodeId, editingSubtype, isMultiSelect, selectedStickyId, selectedGroupId } = useNodeContextStore(
     useShallow((state) => ({
       nodeId: state.nodeId,
       editingSubtype: state.editingSubtype,
       isMultiSelect: state.isMultiSelect,
       selectedStickyId: state.selectedStickyId,
+      selectedGroupId: state.selectedGroupId,
     })),
   )
 
@@ -168,20 +191,15 @@ export default function Studio() {
     })),
   )
 
-  const platform = useShortcutStore((shortcut) => shortcut.platform)
-
   const allInSameGroup = useFlowStore((flowStore) => {
     const selected = flowStore.nodes.filter((node) => node.selected)
     if (selected.length <= 1) return false
-    const firstParentId = selected[0].parentId
-    return !!firstParentId && selected.every((node) => node.parentId === firstParentId)
+    const content = selected.filter((node) => node.type === 'frankNode' || node.type === 'exitNode')
+    if (content.length <= 1) return false
+    const firstParentId = content[0].parentId
+    return !!firstParentId && content.every((node) => node.parentId === firstParentId)
   })
 
-  const groupActionId = allInSameGroup ? 'studio.ungroup' : 'studio.group'
-  const groupLabel = allInSameGroup ? 'Ungroup' : 'Group Selection'
-  const groupShortcutDef = ALL_SHORTCUTS.find((shortcut) => shortcut.id === groupActionId)
-  const groupKeyHint = groupShortcutDef ? formatShortcutParts(groupShortcutDef, platform).join('+') : ''
-
   const handleShowNodeContext = useCallback(
     (visible: boolean) => {
       setShowNodeContext(visible)
@@ -208,7 +226,14 @@ export default function Studio() {
     openInEditor(fileName, activeTabPath)
   }, [activeTabPath])
 
-  const rightPanelTitle = getRightPanelTitle(isMultiSelect, activeStickyId, groupLabel, showNodeContext, editingSubtype)
+  const rightPanelTitle = getRightPanelTitle(
+    isMultiSelect,
+    allInSameGroup,
+    activeStickyId,
+    selectedGroupId,
+    showNodeContext,
+    editingSubtype,
+  )
 
   return (
     <SidebarLayout name="studio">
@@ -256,12 +281,10 @@ export default function Studio() {
         <RightPanelContent
           isMultiSelect={isMultiSelect}
           selectedStickyId={activeStickyId}
+          selectedGroupId={selectedGroupId}
           showNodeContext={showNodeContext}
           nodeId={nodeId}
           editingSubtype={editingSubtype}
-          groupLabel={groupLabel}
-          groupKeyHint={groupKeyHint}
-          groupActionId={groupActionId}
           onShowNodeContext={handleShowNodeContext}
         />
       </>
diff --git a/src/main/frontend/app/routes/studio/xml-to-json-parser.ts b/src/main/frontend/app/routes/studio/xml-to-json-parser.ts
index f50eb354..1647513d 100644
--- a/src/main/frontend/app/routes/studio/xml-to-json-parser.ts
+++ b/src/main/frontend/app/routes/studio/xml-to-json-parser.ts
@@ -563,7 +563,7 @@ function convertElementToNode(element: Element, idCounter: IdCounter, sourceHand
   return {
     id: thisId,
     type: 'frankNode',
-    position: {x, y},
+    position: { x, y },
     width,
     height,
     data: {
@@ -686,6 +686,8 @@ function extractGroupNodesFromAdapter(adapter: Element, flowNodes: FlowNode[], i
     const y = parseNumericAttribute(node.getAttribute('flow:y'), 0)
     const width = parseNumericAttribute(node.getAttribute('flow:width'), 0)
     const height = parseNumericAttribute(node.getAttribute('flow:height'), 0)
+    const description = node.getAttribute('flow:description') || undefined
+    const color = node.getAttribute('flow:color') || undefined
 
     const groupNode: GroupNode = {
       id: (idCounter.current++).toString(),
@@ -693,6 +695,8 @@ function extractGroupNodesFromAdapter(adapter: Element, flowNodes: FlowNode[], i
       position: { x, y },
       data: {
         label,
+        description,
+        color,
         width,
         height,
         childrenNames: children,
diff --git a/src/main/frontend/app/stores/flow-store.ts b/src/main/frontend/app/stores/flow-store.ts
index 94fb684c..4779e3af 100644
--- a/src/main/frontend/app/stores/flow-store.ts
+++ b/src/main/frontend/app/stores/flow-store.ts
@@ -60,6 +60,8 @@ export interface FlowState {
   setStickyAttachment: (nodeId: string, attachedToNodeId: string | null) => void
   setNodesWithoutHistory: (nodes: FlowNode[]) => void
   setGroupnodeLabel: (nodeId: string, newLabel: string) => void
+  setGroupnodeDescription: (nodeId: string, description: string) => void
+  setGroupnodeColor: (nodeId: string, color: string) => void
   setNodeName: (nodeId: string, name: string, options?: { isNewNode?: boolean }) => void
   getNodeName: (nodeId: string) => string | null
   addHandle: (nodeId: string, handle: { type: string; index: number }) => void
@@ -441,13 +443,29 @@ const useFlowStore = create<FlowState>()(
       set({
         nodes: get().nodes.map((node) => {
           if (node.id === nodeId && isGroupNode(node)) {
-            return {
-              ...node,
-              data: {
-                ...node.data,
-                label: newLabel,
-              },
-            }
+            return { ...node, data: { ...node.data, label: newLabel } }
+          }
+          return node
+        }),
+      })
+    },
+    setGroupnodeDescription: (nodeId, description) => {
+      get().saveToHistory()
+      set({
+        nodes: get().nodes.map((node) => {
+          if (node.id === nodeId && isGroupNode(node)) {
+            return { ...node, data: { ...node.data, description } }
+          }
+          return node
+        }),
+      })
+    },
+    setGroupnodeColor: (nodeId, color) => {
+      get().saveToHistory()
+      set({
+        nodes: get().nodes.map((node) => {
+          if (node.id === nodeId && isGroupNode(node)) {
+            return { ...node, data: { ...node.data, color } }
           }
           return node
         }),
diff --git a/src/main/frontend/app/stores/node-context-store.ts b/src/main/frontend/app/stores/node-context-store.ts
index 257c3ae7..958eccc9 100644
--- a/src/main/frontend/app/stores/node-context-store.ts
+++ b/src/main/frontend/app/stores/node-context-store.ts
@@ -15,6 +15,7 @@ interface NodeContextStore {
   dropSuccessful: boolean
   isMultiSelect: boolean
   selectedStickyId: string | null
+  selectedGroupId: string | null
   saveFlow: (() => Promise<void>) | null
   setNodeId: (nodeId: number) => void
   setAttributes: (attributes?: Record<string, Attribute>) => void
@@ -31,6 +32,7 @@ interface NodeContextStore {
   setDropSuccessful: (successful: boolean) => void
   setIsMultiSelect: (value: boolean) => void
   setSelectedStickyId: (id: string | null) => void
+  setSelectedGroupId: (id: string | null) => void
 }
 
 const useNodeContextStore = create<NodeContextStore>((set) => ({
@@ -47,6 +49,7 @@ const useNodeContextStore = create<NodeContextStore>((set) => ({
   dropSuccessful: false,
   isMultiSelect: false,
   selectedStickyId: null,
+  selectedGroupId: null,
   saveFlow: null,
   setNodeId: (nodeId) => set({ nodeId }),
   setAttributes: (attributes) => set({ attributes }),
@@ -63,6 +66,7 @@ const useNodeContextStore = create<NodeContextStore>((set) => ({
   setDropSuccessful: (dropSuccessful) => set({ dropSuccessful }),
   setIsMultiSelect: (isMultiSelect) => set({ isMultiSelect }),
   setSelectedStickyId: (selectedStickyId) => set({ selectedStickyId }),
+  setSelectedGroupId: (selectedGroupId) => set({ selectedGroupId }),
 }))
 
 export default useNodeContextStore
diff --git a/src/main/frontend/src/assets/xsd/FlowConfig.xsd b/src/main/frontend/src/assets/xsd/FlowConfig.xsd
index ef407273..a38b48f6 100644
--- a/src/main/frontend/src/assets/xsd/FlowConfig.xsd
+++ b/src/main/frontend/src/assets/xsd/FlowConfig.xsd
@@ -12,7 +12,7 @@
       </xs:sequence>
     </xs:complexType>
   </xs:element>
-  
+
   <!-- StickyNote -->
   <xs:element name="StickyNote">
     <xs:complexType>
@@ -34,9 +34,11 @@
       <xs:attribute name="y" type="xs:int" use="required"/>
       <xs:attribute name="width" type="xs:int" use="required"/>
       <xs:attribute name="height" type="xs:int" use="required"/>
-      <xs:attribute name="children" type="xs:string" use="required"/>
       <xs:attribute name="label" type="xs:string" use="required"/>
+      <xs:attribute name="description" type="xs:string" use="required"/>
+      <xs:attribute name="color" type="xs:string" use="required"/>
+      <xs:attribute name="children" type="xs:string" use="required"/>
     </xs:complexType>
   </xs:element>
 
-</xs:schema>
\ No newline at end of file
+</xs:schema>

From cdd50d463a78b152ced591432a77647f2b201a0b Mon Sep 17 00:00:00 2001
From: stijnpotters <stijn.potters1@gmail.com>
Date: Wed, 13 May 2026 17:39:56 +0200
Subject: [PATCH 2/3] Remove editing functionality from group node; simplify
 label display

---
 .../studio/canvas/nodetypes/group-node.tsx    | 66 +------------------
 1 file changed, 3 insertions(+), 63 deletions(-)

diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
index edce617a..83abc0c6 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
@@ -1,7 +1,6 @@
 import { type Node, type NodeProps, NodeResizeControl } from '@xyflow/react'
-import { useState, type ChangeEvent } from 'react'
+import { useState } from 'react'
 import { ResizeIcon } from '~/routes/studio/canvas/nodetypes/frank-node'
-import useFlowStore from '~/stores/flow-store'
 
 export const GROUP_COLORS = [
   { label: 'Blue', value: 'var(--group-color-blue)' },
@@ -23,34 +22,13 @@ export type GroupNode = Node<{
   childrenNames?: string[]
 }>
 
-export default function GroupNodeComponent({ id, data, selected }: NodeProps<GroupNode>) {
+export default function GroupNodeComponent({data, selected }: NodeProps<GroupNode>) {
   const [dimensions, setDimensions] = useState({
     width: data.width,
     height: data.height,
   })
-  const [isEditing, setIsEditing] = useState(false)
-  const [editValue, setEditValue] = useState('')
-
   const color = data.color || GROUP_DEFAULT_COLOR
 
-  const handleStartEdit = () => {
-    setEditValue(data.label)
-    setIsEditing(true)
-  }
-
-  const handleBlur = () => setIsEditing(false)
-
-  const handleSave = (event: ChangeEvent<HTMLInputElement>) => {
-    setEditValue(event.target.value)
-    useFlowStore.getState().setGroupnodeLabel(id, event.target.value)
-  }
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      handleBlur()
-    }
-  }
-
   return (
     <>
       <NodeResizeControl
@@ -84,26 +62,7 @@ export default function GroupNodeComponent({ id, data, selected }: NodeProps<Gro
           </div>
 
           <div className="flex max-w-1/2 gap-1 px-2 py-1 text-sm font-bold">
-            {isEditing ? (
-              <input
-                type="text"
-                value={editValue}
-                onChange={handleSave}
-                onKeyDown={handleKeyDown}
-                onBlur={handleBlur}
-                autoFocus
-                className="nodrag rounded border px-1 text-sm"
-              />
-            ) : (
-              <>
-                <div className="cursor-pointer" onClick={handleStartEdit}>
-                  {data.label}
-                </div>
-                <div onClick={handleStartEdit} className="flex-shrink-0 cursor-pointer self-start">
-                  <PenIcon />
-                </div>
-              </>
-            )}
+            <div>{data.label}</div>
           </div>
         </div>
       </div>
@@ -127,22 +86,3 @@ function HamburgerMenu() {
     </svg>
   )
 }
-
-function PenIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="ml-2 h-4 w-4"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      strokeWidth={2}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M11 5H6a2 2 0 00-2 2v11.5A1.5 1.5 0 005.5 20H17a2 2 0 002-2v-5M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"
-      />
-    </svg>
-  )
-}

From 5fd01c86fa52a752f468355c4c63a0309ee23f02 Mon Sep 17 00:00:00 2001
From: stijnpotters <stijn.potters1@gmail.com>
Date: Wed, 13 May 2026 17:50:41 +0200
Subject: [PATCH 3/3] Refactor GroupNodeComponent and RightPanelContent for
 improved readability and structure

---
 .../studio/canvas/nodetypes/group-node.tsx    |  2 +-
 .../frontend/app/routes/studio/studio.tsx     | 61 +++++++------------
 2 files changed, 23 insertions(+), 40 deletions(-)

diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
index 83abc0c6..512be842 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
@@ -22,7 +22,7 @@ export type GroupNode = Node<{
   childrenNames?: string[]
 }>
 
-export default function GroupNodeComponent({data, selected }: NodeProps<GroupNode>) {
+export default function GroupNodeComponent({ data, selected }: NodeProps<GroupNode>) {
   const [dimensions, setDimensions] = useState({
     width: data.width,
     height: data.height,
diff --git a/src/main/frontend/app/routes/studio/studio.tsx b/src/main/frontend/app/routes/studio/studio.tsx
index d11ff717..6fbae926 100644
--- a/src/main/frontend/app/routes/studio/studio.tsx
+++ b/src/main/frontend/app/routes/studio/studio.tsx
@@ -119,48 +119,31 @@ function AttachedNotesPanel({ nodeId }: { nodeId: number }) {
 }
 
 function RightPanelContent({
-                             isMultiSelect,
-                             selectedStickyId,
-                             selectedGroupId, // Added prop
-                             showNodeContext,
-                             nodeId,
-                             onShowNodeContext,
-                           }: RightPanelProps) {
-  // The palette (StudioContext) only shows if absolutely nothing else is active
-  const showPalette =
-          !isMultiSelect &&
-          !selectedStickyId &&
-          !selectedGroupId &&
-          !showNodeContext
+  isMultiSelect,
+  selectedStickyId,
+  selectedGroupId,
+  showNodeContext,
+  nodeId,
+  onShowNodeContext,
+}: RightPanelProps) {
+  const showPalette = !isMultiSelect && !selectedStickyId && !selectedGroupId && !showNodeContext
 
   return (
-          <>
-            {/* 1. Multi-Select Priority */}
-            {isMultiSelect && <MultiSelectPanel />}
-
-            {/* 2. Sticky Note Priority */}
-            {!isMultiSelect && selectedStickyId && (
-                    <StickyNoteContext nodeId={selectedStickyId} />
-            )}
-
-            {/* 3. Group Context Priority */}
-            {!isMultiSelect && !selectedStickyId && selectedGroupId && (
-                    <GroupContext nodeId={selectedGroupId} />
-            )}
-
-            {/* 4. Node Context (Attached Notes) */}
-            {!isMultiSelect && !selectedStickyId && !selectedGroupId && showNodeContext && (
-                    <div className="flex min-h-0 flex-1 flex-col">
-                      <AttachedNotesPanel nodeId={nodeId} />
-                      <NodeContext nodeId={nodeId} setShowNodeContext={onShowNodeContext} />
-                    </div>
-            )}
+    <>
+      {isMultiSelect && <MultiSelectPanel />}
+      {!isMultiSelect && selectedStickyId && <StickyNoteContext nodeId={selectedStickyId} />}
+      {!isMultiSelect && !selectedStickyId && selectedGroupId && <GroupContext nodeId={selectedGroupId} />}
+      {!isMultiSelect && !selectedStickyId && !selectedGroupId && showNodeContext && (
+        <div className="flex min-h-0 flex-1 flex-col">
+          <AttachedNotesPanel nodeId={nodeId} />
+          <NodeContext nodeId={nodeId} setShowNodeContext={onShowNodeContext} />
+        </div>
+      )}
 
-            {/* 5. Default Studio Context (Palette) */}
-            <div className={showPalette ? 'contents' : 'hidden'}>
-              <StudioContext />
-            </div>
-          </>
+      <div className={showPalette ? 'contents' : 'hidden'}>
+        <StudioContext />
+      </div>
+    </>
   )
 }