noice

app.js

@@ -455,6 +455,7 @@ function populateDemoShell() {
       <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>`;
@@ -591,12 +592,16 @@ function renderAgentTabs() {
         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>
     `;
@@ -1194,12 +1199,11 @@ async function saveInvoiceEmail() {
 
 async function openBillingPortal() {
   const btn = document.getElementById("portal-btn");
-  if (!btn) return;
   if (!currentEmail) {
     toast("No email found. Please sign in again.", "warning");
     return;
   }
-  btnLoad(btn, "");
+  if (btn) btnLoad(btn, "");
   try {
     const res = await apiFetch(
       `${PORTAL_URL}?email=${encodeURIComponent(currentEmail)}`,
@@ -1221,7 +1225,7 @@ async function openBillingPortal() {
   } catch (err) {
     toast(err.message, "error");
   } finally {
-    btnReset(btn);
+    if (btn) btnReset(btn);
   }
 }
 

styles.css

@@ -721,6 +721,23 @@ body::after {
     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;