From b3f77f90afebb3eee5f451e9fa7ea6dece9ebfdc Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Sat, 6 Jun 2026 12:29:44 -0300
Subject: [PATCH] nextcl skill

---
 app.js     | 19 +++++++++++--------
 styles.css | 25 +++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/app.js b/app.js
index c5869fd..6fb650f 100644
--- a/app.js
+++ b/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,11 +567,12 @@ function renderAgentTabs() {
     bar.innerHTML = '<span class="tabs-empty">No agents on your account</span>';
     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 `
         <button class="agent-tab${uuid === activeUUID ? " active" : ""}"
                 onclick="selectAgent('${escAttr(uuid)}')">
             <span class="agent-tab-dot"></span>
@@ -578,8 +580,9 @@ function renderAgentTabs() {
             <span class="agent-tab-badge">${escHtml(server.toUpperCase())}</span>
         </button>
     `;
-    })
-    .join("");
+      })
+      .join("") +
+    `<a class="agent-tab-add" href="https://derez.ai/add.html" target="_blank" title="Add agent">+</a>`;
 }
 
 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 {