diff --git a/app.js b/app.js
index 7dedaf6..08935f8 100644
--- a/app.js
+++ b/app.js
@@ -451,6 +451,12 @@ function populateDemoShell() {
hermes
EU
+
+ Add Agent`;
// 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
+ ? `expires ${escHtml(expires)}`
+ : "";
return `
`;
diff --git a/styles.css b/styles.css
index 1e4b10e..15740be 100644
--- a/styles.css
+++ b/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;