expires

app.js

@@ -451,6 +451,12 @@ function populateDemoShell() {
       <span>hermes</span>
       <span class="agent-tab-badge">EU</span>
     </button>
+    <button class="agent-tab">
+      <span class="agent-tab-dot agent-tab-dot--red"></span>
+      <span>bell</span>
+      <span class="agent-tab-expires">expires 2026-07-10</span>
+      <span class="agent-tab-badge">EU</span>
+    </button>
     <a class="agent-tab-add" href="https://derez.ai/add.html?email=${encodeURIComponent(currentEmail || "")}" target="_blank" title="Add agent">+ Add Agent</a>`;
 
   // Show agent panel with demo data
@@ -577,11 +583,20 @@ function renderAgentTabs() {
       .map((a) => {
         const uuid = a.UUID || a.uuid || "";
         const server = a.server || "";
+        const expires = a.expires || "";
+        const hasExpiry = expires && expires !== "null" && expires !== "";
+        const dotClass = hasExpiry
+          ? "agent-tab-dot agent-tab-dot--red"
+          : "agent-tab-dot";
+        const expiredText = hasExpiry
+          ? `<span class="agent-tab-expires">expires ${escHtml(expires)}</span>`
+          : "";
         return `
         <button class="agent-tab${uuid === activeUUID ? " active" : ""}"
                 onclick="selectAgent('${escAttr(uuid)}')">
-            <span class="agent-tab-dot"></span>
+            <span class="${dotClass}"></span>
             <span>${escHtml(uuid)}</span>
+            ${expiredText}
             <span class="agent-tab-badge">${escHtml(server.toUpperCase())}</span>
         </button>
     `;

styles.css

@@ -709,6 +709,18 @@ body::after {
     flex-shrink: 0;
 }
 
+.agent-tab-dot--red {
+    background: var(--danger);
+    box-shadow: 0 0 0 2px rgba(224, 82, 82, 0.25);
+}
+
+.agent-tab-expires {
+    font-size: 10px;
+    color: var(--danger);
+    font-weight: 500;
+    margin-left: 3px;
+}
+
 .agent-tab-badge {
     font-size: 10px;
     font-weight: 600;