nextcl skill

app.js

@@ -443,7 +443,8 @@ function populateDemoShell() {
       <span class="agent-tab-dot"></span>
       <span>hermes</span>
       <span class="agent-tab-badge">EU</span>
-    </button>`;
+    </button>
+    <a class="agent-tab-add" href="https://derez.ai/add.html" target="_blank" title="Add agent">+</a>`;
 
   // Show agent panel with demo data
   hide("no-agents");
@@ -566,7 +567,8 @@ function renderAgentTabs() {
     bar.innerHTML = '<span class="tabs-empty">No agents on your account</span>';
     return;
   }
-  bar.innerHTML = agents
+  bar.innerHTML =
+    agents
       .map((a) => {
         const uuid = a.UUID || a.uuid || "";
         const server = a.server || "";
@@ -579,7 +581,8 @@ function renderAgentTabs() {
         </button>
     `;
       })
-    .join("");
+      .join("") +
+    `<a class="agent-tab-add" href="https://derez.ai/add.html" target="_blank" title="Add agent">+</a>`;
 }
 
 function selectAgent(uuid) {

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 {