chip

app.js

@@ -494,10 +494,8 @@ function populateDemoShell() {
   document.getElementById("contract-body").innerHTML = `
     <div class="contract-row">
       <div class="contract-info">
-        <span class="contract-type">Auto - Monthly</span>
-        <span class="contract-expires">No expiration</span>
+        <span class="contract-type">Junior \u2013 Monthly</span>
       </div>
-      <a href="#" class="btn btn-ghost btn-sm" style="margin-left:auto;flex-shrink:0;" onclick="return false">Cancel</a>
     </div>`;
 
   // Backups
@@ -1436,72 +1434,24 @@ function renderContract(data) {
     return;
   }
 
-  const item = data[0];
-  const type = (item.type || "").trim();
-  const expires = item.expires || "";
-
-  // Determine status
-  const t = type.toLowerCase();
-  let expired = false;
-  if (expires && expires.trim()) {
-    try {
-      expired = new Date(expires) < new Date();
-    } catch (_) {}
-  }
-
-  let statusClass;
-  if (!type || expired || t.includes("none")) {
-    statusClass = "contract-dot--red";
-  } else if (t.includes("auto")) {
-    statusClass = "contract-dot--green";
-  } else {
-    statusClass = "contract-dot--yellow";
-  }
-
-  // Update the header dot
-  headerDot.className = `contract-dot ${statusClass}`;
+  headerDot.className = "contract-dot contract-dot--green";
   headerDot.style.visibility = "visible";
 
-  // Empty type — show placeholder row with extend button on the right
-  if (!type) {
-    body.innerHTML = `
-      <div class="contract-row">
-        <div class="contract-info">
-          <span class="contract-type">No contract</span>
-          <span class="contract-expires">Stripe payments can take up to 24hrs to be recognized.</span>
-        </div>
-        <a href="${escAttr(CONTRACT_EXTEND_URL)}" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-left:auto;flex-shrink:0;">Extend Contract</a>
-      </div>`;
-    return;
-  }
+  const item = data[0];
+  const product = stripQuotes(item.product || "");
+  const period = stripQuotes(item.period || "");
+  const type = stripQuotes(item.type || "");
 
-  const expLabel =
-    expires && expires.trim()
-      ? new Date(expires).toLocaleDateString("en-US", {
-          month: "short",
-          day: "numeric",
-          year: "numeric",
-        })
-      : "No expiration";
-
-  const extendHtml =
-    statusClass === "contract-dot--red"
-      ? `<a href="${escAttr(CONTRACT_EXTEND_URL)}" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-top:8px;display:inline-flex;">Extend Contract</a>`
-      : "";
-
-  const cancelHtml =
-    statusClass === "contract-dot--green"
-      ? `<a href="${escAttr(CONTRACT_CANCEL_URL)}" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-left:auto;flex-shrink:0;">Cancel</a>`
-      : "";
+  const label =
+    product && period
+      ? `${product} \u2013 ${period}`
+      : product || period || type || "—";
 
   body.innerHTML = `
     <div class="contract-row">
       <div class="contract-info">
-        <span class="contract-type">${escHtml(type)}</span>
-        <span class="contract-expires">${escHtml(expLabel)}</span>
-        ${extendHtml}
+        <span class="contract-type">${escHtml(label)}</span>
       </div>
-      ${cancelHtml}
     </div>`;
 }
 

styles.css

@@ -727,16 +727,16 @@ body::after {
 .agent-tab-add {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    border: 1px dashed var(--border);
+    gap: 7px;
+    padding: 6px 14px;
+    border-radius: 20px;
+    border: 1px solid var(--border);
     background: transparent;
     color: var(--text-muted);
-    font-size: 18px;
-    line-height: 1;
+    font-size: 13px;
+    font-weight: 500;
     text-decoration: none;
+    white-space: nowrap;
     flex-shrink: 0;
     transition:
         border-color 0.15s,
@@ -744,9 +744,9 @@ body::after {
         background 0.15s;
 }
 .agent-tab-add:hover {
-    border-color: var(--accent);
-    color: var(--accent);
-    background: var(--accent-dim);
+    border-color: rgba(79, 142, 247, 0.4);
+    color: var(--text);
+    background: var(--bg-hover);
 }
 
 .tabs-loading,