feat(clients): adds group affiliation to clients table

src/ReverseLlama.Server/wwwroot/admin/app.css

@@ -281,7 +281,7 @@ textarea {
 table {
   width: 100%;
   border-collapse: collapse;
-  min-width: 760px;
+  min-width: 900px;
 }
 
 th,
@@ -359,6 +359,17 @@ tr:last-child td {
   color: var(--amber);
 }
 
+.badge[href] {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.badge[href]:hover {
+  border-color: var(--blue);
+  background: #edf4ff;
+  color: var(--blue);
+}
+
 .metric-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(120px, 1fr));

src/ReverseLlama.Server/wwwroot/admin/app.js

@@ -315,7 +315,10 @@ function renderClients() {
 }
 
 function clientsTable(clients) {
-  const rows = clients.map((client) => `
+  const clientGroups = state.summary?.clientGroups || {};
+  const rows = clients.map((client) => {
+    const groups = clientGroups[client.id] || [];
+    return `
     <tr>
       <td>
         <div class="cell-main">${escapeHtml(client.id)}</div>
@@ -335,6 +338,11 @@ function clientsTable(clients) {
       </td>
       <td>${modelBadges(client.models)}</td>
       <td>${modelBadges(client.activeModels)}</td>
+      <td>
+        <div class="badge-row">
+          ${groups.length ? groups.map((g) => `<a class="badge" href="#groups/${encodeURIComponent(g)}">${escapeHtml(g)}</a>`).join("") : `<span class="cell-sub">None</span>`}
+        </div>
+      </td>
       <td>
         <div class="actions">
           <button class="button warning" data-action="disable-hour" data-client-id="${escapeAttr(client.id)}" ${client.disabled ? "disabled" : ""}>Disable 1h</button>
@@ -343,7 +351,7 @@ function clientsTable(clients) {
         </div>
       </td>
     </tr>
-  `).join("");
+  `}).join("");
 
   return `
     <table>
@@ -355,6 +363,7 @@ function clientsTable(clients) {
           <th>Requests</th>
           <th>Listed models</th>
           <th>Active models</th>
+          <th>Groups</th>
           <th>Actions</th>
         </tr>
       </thead>