style

app.js

@@ -454,8 +454,6 @@ function populateDemoShell() {
     <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>
-      <a class="agent-tab-resub" href="#" onclick="event.stopPropagation();openBillingPortal()" title="Resubscribe via Stripe portal">Resubscribe &rarr;</a>
       <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>`;
@@ -507,12 +505,14 @@ function populateDemoShell() {
 
   // Contract
   const demoDot = document.getElementById("contract-status-dot");
-  demoDot.className = "contract-dot contract-dot--green";
+  demoDot.className = "contract-dot contract-dot--red";
   demoDot.style.visibility = "visible";
   document.getElementById("contract-body").innerHTML = `
     <div class="contract-row">
       <div class="contract-info">
-        <span class="contract-type">Junior \u2013 Monthly</span>
+        <span class="contract-type">Trainee \u2013 Monthly</span>
+        <span class="contract-expires">expires 2026-07-10</span>
+        <a class="contract-extend-link" href="#" onclick="event.preventDefault();openBillingPortal()">Resubscribe &rarr;</a>
       </div>
     </div>`;
 
@@ -589,19 +589,11 @@ function renderAgentTabs() {
         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>`
-          : "";
-        const portalLink = hasExpiry
-          ? `<a class="agent-tab-resub" href="#" onclick="event.stopPropagation();openBillingPortal()" title="Resubscribe via Stripe portal">Resubscribe &rarr;</a>`
-          : "";
         return `
         <button class="agent-tab${uuid === activeUUID ? " active" : ""}"
                 onclick="selectAgent('${escAttr(uuid)}')">
             <span class="${dotClass}"></span>
             <span>${escHtml(uuid)}</span>
-            ${expiredText}
-            ${portalLink}
             <span class="agent-tab-badge">${escHtml(server.toUpperCase())}</span>
         </button>
     `;
@@ -1553,25 +1545,38 @@ function renderContract(data) {
     return;
   }
 
-  headerDot.className = "contract-dot contract-dot--green";
-  headerDot.style.visibility = "visible";
-
   const item = data[0];
   const product = stripQuotes(item.product || "");
   const period = stripQuotes(item.period || "");
   const type = stripQuotes(item.type || "");
+  const expires = stripQuotes(item.expires || "");
+  const hasExpiry = expires && expires !== "null" && expires !== "";
 
   const label =
     product && period
       ? `${product} \u2013 ${period}`
       : product || period || type || "—";
 
-  body.innerHTML = `
+  headerDot.className = hasExpiry
-    <div class="contract-row">
+    ? "contract-dot contract-dot--red"
+    : "contract-dot contract-dot--green";
+  headerDot.style.visibility = "visible";
+
+  let html = `<div class="contract-row">
       <div class="contract-info">
-        <span class="contract-type">${escHtml(label)}</span>
+        <span class="contract-type">${escHtml(label)}</span>`;
+
+  if (hasExpiry) {
+    html += `
+        <span class="contract-expires">expires ${escHtml(expires)}</span>
+        <a class="contract-extend-link" href="#" onclick="event.preventDefault();openBillingPortal()">Resubscribe &rarr;</a>`;
+  }
+
+  html += `
       </div>
     </div>`;
+
+  body.innerHTML = html;
 }
 
 /* ═══════════════════════════════════════════════════════════════

styles.css

@@ -714,30 +714,6 @@ body::after {
     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-resub {
-    font-size: 10px;
-    font-weight: 600;
-    color: var(--accent);
-    text-decoration: none;
-    margin-left: 4px;
-    padding: 1px 6px;
-    border: 1px solid var(--accent);
-    border-radius: 4px;
-    line-height: normal;
-    transition: background 0.15s;
-}
-
-.agent-tab-resub:hover {
-    background: var(--accent-dim);
-}
-
 .agent-tab-badge {
     font-size: 10px;
     font-weight: 600;