feat: add labels

public/components.js

@@ -452,6 +452,11 @@ class ClusterMembersComponent extends Component {
                                 <span class="latency-label">Latency:</span>
                                 <span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span>
                             </div>
+                            ${member.labels && Object.keys(member.labels).length ? `
+                            <div class="member-labels">
+                                ${Object.entries(member.labels).map(([key, value]) => `<span class=\"label-chip\">${key}: ${value}</span>`).join('')}
+                            </div>
+                            ` : ''}
                         </div>
                         <div class="expand-icon">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

public/deploy-button-test.html

@@ -147,7 +147,8 @@
                 ip: `192.168.1.${100 + nodeCount}`,
                 hostname: `TestNode${nodeCount}`,
                 status: 'active',
-                latency: Math.floor(Math.random() * 50) + 10
+                latency: Math.floor(Math.random() * 50) + 10,
+                labels: nodeCount % 2 === 0 ? { app: 'demo', role: 'worker' } : { device: 'sensor', zone: `Z${nodeCount}` }
             };
             testNodes.push(newNode);
             displayClusterMembers();
@@ -185,6 +186,7 @@
                             ${statusIcon} ${statusText}
                         </div>
                         <div class="member-latency">Latency: ${node.latency}ms</div>
+                        ${node.labels ? `<div class=\"member-labels\">${Object.entries(node.labels).map(([k,v]) => `<span class=\\\"label-chip\\\">${k}: ${v}</span>`).join('')}</div>` : ''}
                     </div>
                 `;
             }).join('');

public/styles.css

@@ -221,6 +221,26 @@ p {
 	z-index: 1;
 }
 
+/* Labels */
+.member-labels {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.35rem;
+	margin-top: 0.5rem;
+}
+
+.label-chip {
+	display: inline-flex;
+	align-items: center;
+	font-size: 0.75rem;
+	padding: 0.15rem 0.45rem;
+	border-radius: 9999px;
+	background: rgba(255, 255, 255, 0.08);
+	border: 1px solid rgba(255, 255, 255, 0.15);
+	color: rgba(255, 255, 255, 0.9);
+	white-space: nowrap;
+}
+
 .member-card::before {
     content: '';
     position: absolute;
@@ -1889,3 +1909,202 @@ p {
 	padding: 0.5rem;
 	border-radius: 6px;
 } 
+
+/* Modernized Tab Styles (overrides) */
+.tabs-container {
+	background: rgba(255, 255, 255, 0.04);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	border-radius: 14px;
+	padding: 0.75rem;
+}
+
+.tabs-header {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	padding: 0.25rem;
+	border-radius: 12px;
+	background: rgba(255, 255, 255, 0.06);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	backdrop-filter: blur(8px);
+	border-bottom: none;
+}
+
+.tab-button {
+	background: transparent;
+	border: 1px solid transparent;
+	color: rgba(255, 255, 255, 0.75);
+	padding: 0.5rem 1rem;
+	border-radius: 10px;
+	cursor: pointer;
+	font-size: 0.9rem;
+	font-weight: 600;
+	letter-spacing: 0.2px;
+	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+	position: relative;
+}
+
+.tab-button:hover {
+	background: rgba(255, 255, 255, 0.08);
+	border-color: rgba(255, 255, 255, 0.12);
+	color: rgba(255, 255, 255, 0.95);
+	transform: translateY(-1px);
+}
+
+.tab-button.active {
+	background: rgba(255, 255, 255, 0.16);
+	color: #ffffff;
+	border-color: rgba(255, 255, 255, 0.24);
+	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+/* Animated underline indicator */
+.tab-button::after {
+	content: '';
+	position: absolute;
+	left: 12px;
+	right: 12px;
+	bottom: -6px;
+	height: 3px;
+	border-radius: 2px;
+	background: linear-gradient(90deg, #8b5cf6, #60a5fa);
+	opacity: 0;
+	transform: scaleX(0.4);
+	transition: transform 0.25s ease, opacity 0.25s ease;
+}
+
+.tab-button.active::after {
+	opacity: 1;
+	transform: scaleX(1);
+}
+
+.tab-button:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
+}
+
+/* Content panel polish */
+.tab-content {
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	border-radius: 12px;
+	padding: 0.75rem;
+	background: rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(8px);
+}
+
+.tab-content.active {
+	animation: tabFadeIn 0.2s ease-out;
+}
+
+@keyframes tabFadeIn {
+	from { opacity: 0; transform: translateY(6px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+
+/* Small screens: allow horizontal scroll of tabs */
+@media (max-width: 640px) {
+	.tabs-header {
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+	.tab-button {
+		white-space: nowrap;
+	}
+} 
+
+/* Lighter Tab Theme (final overrides) */
+.tabs-container {
+	background: rgba(255, 255, 255, 0.06);
+	border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.tabs-header {
+	background: rgba(255, 255, 255, 0.10);
+	border: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.tab-button {
+	color: rgba(255, 255, 255, 0.85);
+}
+
+.tab-button:hover {
+	background: rgba(255, 255, 255, 0.12);
+	border-color: rgba(255, 255, 255, 0.18);
+}
+
+.tab-button.active {
+	background: rgba(255, 255, 255, 0.22);
+	border-color: rgba(255, 255, 255, 0.32);
+}
+
+.tab-button::after {
+	background: linear-gradient(90deg, #a78bfa, #93c5fd);
+	bottom: -4px;
+}
+
+.tab-content {
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	background: rgba(255, 255, 255, 0.08);
+} 
+
+/* Active tab: no background or border (keep underline) */
+.tab-button.active {
+	background: transparent;
+	border-color: transparent;
+	box-shadow: none;
+}
+
+.tab-button.active:hover {
+	background: transparent;
+	border-color: transparent;
+} 
+
+/* Preserve focus ring on active tab */
+.tab-button.active:focus-visible {
+	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
+} 
+
+/* Responsive Capability Selector */
+@media (max-width: 768px) {
+	.capability-selector {
+		flex-wrap: wrap;
+		align-items: stretch;
+	}
+	#capability-select {
+		flex: 1 1 100%;
+		width: 100%;
+		max-width: 100%;
+		min-width: 0;
+	}
+}
+
+@media (max-width: 480px) {
+	#capability-select {
+		padding-right: 1.75rem;
+		background-position: right 0.5rem center;
+		background-size: 10px 10px;
+	}
+} 
+
+/* Capability header mobile wrapping */
+@media (max-width: 768px) {
+	.capability-header {
+		flex-wrap: wrap;
+	}
+	.cap-uri {
+		flex: 1 1 100%;
+		min-width: 0;
+	}
+	.cap-call-btn {
+		flex: 1 1 100%;
+		width: 100%;
+		justify-content: center;
+		margin-top: 0.5rem;
+	}
+}
+
+@media (max-width: 480px) {
+	.cap-call-btn {
+		padding: 0.35rem 0.75rem;
+	}
+} 

public/test-deploy-button.html

@@ -169,7 +169,8 @@
                 ip: `192.168.1.${100 + nodeCount}`,
                 hostname: `TestNode${nodeCount}`,
                 status: 'active',
-                latency: Math.floor(Math.random() * 50) + 10
+                latency: Math.floor(Math.random() * 50) + 10,
+                labels: nodeCount % 2 === 0 ? { app: 'demo', role: 'worker' } : { device: 'sensor', zone: `Z${nodeCount}` }
             };
             testNodes.push(newNode);
             displayClusterMembers();
@@ -205,6 +206,7 @@
                             ${statusIcon} ${statusText}
                         </div>
                         <div class="member-latency">Latency: ${node.latency}ms</div>
+                        ${node.labels ? `<div class=\"member-labels\">${Object.entries(node.labels).map(([k,v]) => `<span class=\\\"label-chip\\\">${k}: ${v}</span>`).join('')}</div>` : ''}
                     </div>
                 `;
             }).join('');