ScuttleBot

ui: fix agent filter bar — compact badge, fixed dropdown width

lmata 2026-04-03 22:03 trunk
Commit f77dd8a4c68156dcd550438d6a5bc79a8c046fd9e8f22cba01439e9f3cd09ac6
Parent c080acb0e001b92…
1 file changed +5 -3
~ internal/api/ui/index.html
M internal/api/ui/index.html
+5 -3
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -42,11 +42,11 @@
4242
 .beh-config.open { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
4343
 .beh-field label { display:block; font-size:11px; color:#8b949e; margin-bottom:3px; }
4444
 .beh-field input[type=text],.beh-field input[type=number],.beh-field select { width:100%; }
4545
 .beh-field .hint { font-size:10px; color:#6e7681; margin-top:2px; }
4646
 .spacer { flex:1; }
47
-.badge { background:#1f6feb22; border:1px solid #1f6feb44; color:#58a6ff; border-radius:999px; padding:1px 8px; font-size:12px; }
47
+.badge { background:#1f6feb22; border:1px solid #1f6feb44; color:#58a6ff; border-radius:999px; padding:1px 8px; font-size:12px; white-space:nowrap; }
4848
4949
 /* status */
5050
 .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
5151
 .stat { background:#0d1117; border:1px solid #21262d; border-radius:6px; padding:12px 16px; }
5252
 .stat .lbl { font-size:11px; color:#8b949e; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
@@ -423,11 +423,11 @@
423423
424424
 <!-- AGENTS -->
425425
 <div class="tab-pane" id="pane-agents">
426426
 <div class="filter-bar">
427427
 <input type="text" id="agent-search" placeholder="search by nick, type, channel…" oninput="agentPage=0;renderAgentTable()" style="max-width:280px">
428
- <select id="agent-status-filter" onchange="agentPage=0;renderAgentTable()" style="padding:5px 8px;font-size:12px">
428
+ <select id="agent-status-filter" onchange="agentPage=0;renderAgentTable()" style="padding:5px 8px;font-size:12px;width:90px">
429429
 <option value="all">all</option>
430430
 <option value="online">online</option>
431431
 <option value="offline">offline</option>
432432
 <option value="revoked">revoked</option>
433433
 </select>
@@ -1524,11 +1524,13 @@
15241524
 if (agentPage < 0) agentPage = 0;
15251525
 const start = agentPage * AGENTS_PER_PAGE;
15261526
 const pageAgents = agents.slice(start, start + AGENTS_PER_PAGE);
15271527
15281528
 const onlineCount = bots.filter(a => a.online).length;
1529
- document.getElementById('agent-count').textContent = onlineCount + '/' + bots.length + ' online' + (agents.length !== bots.length ? ' (' + agents.length + ' shown)' : '');
1529
+ let countText = onlineCount + '/' + bots.length;
1530
+ if (agents.length !== bots.length) countText = agents.length + ' of ' + bots.length;
1531
+ document.getElementById('agent-count').textContent = countText;
15301532
15311533
 // Pagination controls.
15321534
 const pagEl = document.getElementById('agent-pagination');
15331535
 if (agents.length > AGENTS_PER_PAGE) {
15341536
 pagEl.style.display = 'flex';
15351537
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -42,11 +42,11 @@
42 .beh-config.open { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
43 .beh-field label { display:block; font-size:11px; color:#8b949e; margin-bottom:3px; }
44 .beh-field input[type=text],.beh-field input[type=number],.beh-field select { width:100%; }
45 .beh-field .hint { font-size:10px; color:#6e7681; margin-top:2px; }
46 .spacer { flex:1; }
47 .badge { background:#1f6feb22; border:1px solid #1f6feb44; color:#58a6ff; border-radius:999px; padding:1px 8px; font-size:12px; }
48
49 /* status */
50 .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
51 .stat { background:#0d1117; border:1px solid #21262d; border-radius:6px; padding:12px 16px; }
52 .stat .lbl { font-size:11px; color:#8b949e; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
@@ -423,11 +423,11 @@
423
424 <!-- AGENTS -->
425 <div class="tab-pane" id="pane-agents">
426 <div class="filter-bar">
427 <input type="text" id="agent-search" placeholder="search by nick, type, channel…" oninput="agentPage=0;renderAgentTable()" style="max-width:280px">
428 <select id="agent-status-filter" onchange="agentPage=0;renderAgentTable()" style="padding:5px 8px;font-size:12px">
429 <option value="all">all</option>
430 <option value="online">online</option>
431 <option value="offline">offline</option>
432 <option value="revoked">revoked</option>
433 </select>
@@ -1524,11 +1524,13 @@
1524 if (agentPage < 0) agentPage = 0;
1525 const start = agentPage * AGENTS_PER_PAGE;
1526 const pageAgents = agents.slice(start, start + AGENTS_PER_PAGE);
1527
1528 const onlineCount = bots.filter(a => a.online).length;
1529 document.getElementById('agent-count').textContent = onlineCount + '/' + bots.length + ' online' + (agents.length !== bots.length ? ' (' + agents.length + ' shown)' : '');
 
 
1530
1531 // Pagination controls.
1532 const pagEl = document.getElementById('agent-pagination');
1533 if (agents.length > AGENTS_PER_PAGE) {
1534 pagEl.style.display = 'flex';
1535
--- internal/api/ui/index.html
+++ internal/api/ui/index.html
@@ -42,11 +42,11 @@
42 .beh-config.open { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
43 .beh-field label { display:block; font-size:11px; color:#8b949e; margin-bottom:3px; }
44 .beh-field input[type=text],.beh-field input[type=number],.beh-field select { width:100%; }
45 .beh-field .hint { font-size:10px; color:#6e7681; margin-top:2px; }
46 .spacer { flex:1; }
47 .badge { background:#1f6feb22; border:1px solid #1f6feb44; color:#58a6ff; border-radius:999px; padding:1px 8px; font-size:12px; white-space:nowrap; }
48
49 /* status */
50 .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
51 .stat { background:#0d1117; border:1px solid #21262d; border-radius:6px; padding:12px 16px; }
52 .stat .lbl { font-size:11px; color:#8b949e; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
@@ -423,11 +423,11 @@
423
424 <!-- AGENTS -->
425 <div class="tab-pane" id="pane-agents">
426 <div class="filter-bar">
427 <input type="text" id="agent-search" placeholder="search by nick, type, channel…" oninput="agentPage=0;renderAgentTable()" style="max-width:280px">
428 <select id="agent-status-filter" onchange="agentPage=0;renderAgentTable()" style="padding:5px 8px;font-size:12px;width:90px">
429 <option value="all">all</option>
430 <option value="online">online</option>
431 <option value="offline">offline</option>
432 <option value="revoked">revoked</option>
433 </select>
@@ -1524,11 +1524,13 @@
1524 if (agentPage < 0) agentPage = 0;
1525 const start = agentPage * AGENTS_PER_PAGE;
1526 const pageAgents = agents.slice(start, start + AGENTS_PER_PAGE);
1527
1528 const onlineCount = bots.filter(a => a.online).length;
1529 let countText = onlineCount + '/' + bots.length;
1530 if (agents.length !== bots.length) countText = agents.length + ' of ' + bots.length;
1531 document.getElementById('agent-count').textContent = countText;
1532
1533 // Pagination controls.
1534 const pagEl = document.getElementById('agent-pagination');
1535 if (agents.length > AGENTS_PER_PAGE) {
1536 pagEl.style.display = 'flex';
1537

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button