From 47ff122c48921688f0026e0a2b8f8035e7079782 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 18:36:53 +0100
Subject: [PATCH] feat: add Attributes column to Dashboard exchanges table

Shows up to 2 attribute badges (color="auto") per row with a +N overflow
indicator; empty rows render a muted dash. Uses CSS module classes only.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/pages/Dashboard/Dashboard.module.css | 16 ++++++++++++++++
 ui/src/pages/Dashboard/Dashboard.tsx        | 21 +++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/ui/src/pages/Dashboard/Dashboard.module.css b/ui/src/pages/Dashboard/Dashboard.module.css
index 2272aba6..efb40da7 100644
--- a/ui/src/pages/Dashboard/Dashboard.module.css
+++ b/ui/src/pages/Dashboard/Dashboard.module.css
@@ -239,6 +239,22 @@
   opacity: 1;
 }
 
+/* Attributes cell in table */
+.attrCell {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.attrOverflow {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.muted {
+  color: var(--text-muted);
+}
+
 /* Open full details link in panel */
 .openDetailLink {
   background: transparent;
diff --git a/ui/src/pages/Dashboard/Dashboard.tsx b/ui/src/pages/Dashboard/Dashboard.tsx
index 30fcc1d1..23cffd7d 100644
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -123,6 +123,27 @@ function buildBaseColumns(): Column<Row>[] {
         <span className={styles.appName}>{row.applicationName ?? ''}</span>
       ),
     },
+    {
+      key: 'attributes',
+      header: 'Attributes',
+      render: (_, row) => {
+        const attrs = row.attributes;
+        if (!attrs || Object.keys(attrs).length === 0) return <span className={styles.muted}>—</span>;
+        const entries = Object.entries(attrs);
+        const shown = entries.slice(0, 2);
+        const overflow = entries.length - 2;
+        return (
+          <div className={styles.attrCell}>
+            {shown.map(([k, v]) => (
+              <span key={k} title={k}>
+                <Badge label={String(v)} color="auto" />
+              </span>
+            ))}
+            {overflow > 0 && <span className={styles.attrOverflow}>+{overflow}</span>}
+          </div>
+        );
+      },
+    },
     {
       key: 'executionId',
       header: 'Exchange ID',