From 90a4a6c22ac7333f3ec1fc33ec3984fc2441c11a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 15 Feb 2026 22:56:47 +0000
Subject: [PATCH] Show group names in Node Library table instead of tiny dots
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Group column previously only showed a 6x6px colored dot — nearly
invisible and conveying no information. Now shows a proper colored badge
with the dot + group name (e.g. "Workloads", "Compute", "Memory & Storage").

https://claude.ai/code/session_01PHK9qmguUSTyvykAoho467
---
 src/components/NodeLibraryTab.jsx | 16 +++++++++++-----
 src/styles/app.css                | 12 ++++++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/NodeLibraryTab.jsx b/src/components/NodeLibraryTab.jsx
index 4ee50de..7944529 100644
--- a/src/components/NodeLibraryTab.jsx
+++ b/src/components/NodeLibraryTab.jsx
@@ -94,7 +94,7 @@ function NodeLibraryTab({ nodes, groups: groupsProp, selectedNode, onSelectNode
           <table className="data-table">
             <thead>
               <tr>
-                <th style={{ width: '40px' }}>Group</th>
+                <th style={{ width: '120px' }}>Group</th>
                 <th>Node</th>
                 <th>Unit</th>
                 <th style={{ width: '100px' }}>Base Capacity</th>
@@ -117,10 +117,16 @@ function NodeLibraryTab({ nodes, groups: groupsProp, selectedNode, onSelectNode
                   >
                     <td>
                       <span
-                        className="node-group-dot"
-                        style={{ background: getGroupColor(node.group) }}
-                        title={groups[node.group]?.name}
-                      />
+                        className="node-group-badge"
+                        style={{
+                          background: getGroupColor(node.group) + '14',
+                          color: getGroupColor(node.group),
+                          borderColor: getGroupColor(node.group) + '30'
+                        }}
+                      >
+                        <span className="node-group-dot" style={{ background: getGroupColor(node.group) }} />
+                        {groups[node.group]?.name || node.group}
+                      </span>
                     </td>
                     <td className="text-cell">
                       <div style={{ fontWeight: 500 }}>{node.name}</div>
diff --git a/src/styles/app.css b/src/styles/app.css
index a54bc57..8212187 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -564,6 +564,18 @@
   flex-shrink: 0;
 }
 
+.node-group-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  border: 1px solid;
+}
+
 .node-card-name {
   font-weight: 500;
   font-size: 0.875rem;