diff --git a/app.js b/app.js
index c5869fd..6fb650f 100644
--- a/app.js
+++ b/app.js
@@ -443,7 +443,8 @@ function populateDemoShell() {
hermes
EU
- `;
+
+ +`;
// Show agent panel with demo data
hide("no-agents");
@@ -566,11 +567,12 @@ function renderAgentTabs() {
bar.innerHTML = 'No agents on your account';
return;
}
- bar.innerHTML = agents
- .map((a) => {
- const uuid = a.UUID || a.uuid || "";
- const server = a.server || "";
- return `
+ bar.innerHTML =
+ agents
+ .map((a) => {
+ const uuid = a.UUID || a.uuid || "";
+ const server = a.server || "";
+ return `
`;
- })
- .join("");
+ })
+ .join("") +
+ `+`;
}
function selectAgent(uuid) {
diff --git a/styles.css b/styles.css
index 4b32f28..a2064b8 100644
--- a/styles.css
+++ b/styles.css
@@ -479,6 +479,31 @@ body::before {
color: var(--accent);
}
+.agent-tab-add {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ border: 1px dashed var(--border);
+ background: transparent;
+ color: var(--text-muted);
+ font-size: 18px;
+ line-height: 1;
+ text-decoration: none;
+ flex-shrink: 0;
+ transition:
+ border-color 0.15s,
+ color 0.15s,
+ background 0.15s;
+}
+.agent-tab-add:hover {
+ border-color: var(--accent);
+ color: var(--accent);
+ background: var(--accent-dim);
+}
+
.tabs-loading,
.tabs-empty,
.tabs-error {