Merge pull request #5 from RootThePlanet/copilot/improve-toolbar-popup-info

Improve popup alert usefulness: re-evaluate severities, add recommendations, group by site

Author: RootThePlanet

background.js

@@ -193,7 +193,7 @@ async function processTokenObservation({
       alertsToAdd.push(
         buildAlert(
           "unexpected_token_change",
-          sensitivity === "high" ? "high" : "medium",
+          sensitivity === "high" ? "medium" : "low",
           {
             site,
             source,

popup.html

@@ -219,6 +219,21 @@
       .dismiss-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
       .dismiss-btn svg { width: 14px; height: 14px; }
 
+      /* =================== SITE GROUP HEADER =================== */
+      .site-group-header {
+        display: flex; align-items: center; gap: 6px;
+        padding: 6px 4px 4px; margin-top: 4px;
+        font-size: 11px; font-weight: 600; color: var(--fg-muted);
+        text-transform: uppercase; letter-spacing: 0.04em;
+      }
+      .site-group-header:first-child { margin-top: 0; }
+      .site-group-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .site-group-count {
+        font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
+        display: inline-flex; align-items: center; justify-content: center;
+        border-radius: var(--radius-full); background: var(--border); color: var(--fg-secondary);
+      }
+
       /* =================== EMPTY STATE =================== */
       .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; text-align: center; }
       .empty-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }

popup.js

@@ -148,46 +148,56 @@ function getAlertInsights(alert, severity) {
 
   if (alert.type === "unexpected_token_change") {
     return {
-      reason: `SessionSentinel observed ${token} changing repeatedly within a short time window on ${site}.`,
+      reason: `The ${source} token "${token}" on ${site} changed multiple times within a short window.`,
       severityReason:
-        severity === "high"
-          ? "Marked high because rapid token churn strongly suggests active session instability or tampering."
-          : "Marked medium because repeated token changes can indicate unusual authentication behavior.",
+        severity === "medium"
+          ? "Rated medium because this was detected at high sensitivity. Frequent changes may still be normal for this site."
+          : "Rated low because many websites routinely rotate session tokens as a security measure to prevent theft. This is usually expected behavior.",
       plainMeaning:
-        "Your signed-in state may be getting replaced repeatedly. This can happen during risky account activity or aggressive re-authentication."
+        "Your session token was refreshed several times in quick succession. Most sites do this intentionally to protect your account — it's a standard security practice called token rotation.",
+      recommendation:
+        "No action needed. This is almost always normal. Only investigate if you also see unexpected account activity (e.g. password change emails, unfamiliar logins) or if you were not actively using the site at the time."
     };
   }
 
   if (alert.type === "possible_replay") {
     return {
-      reason: `A previously seen ${token} value for ${site} appeared again in ${source}.`,
+      reason: `A previously used value for "${token}" on ${site} has reappeared in ${source}. This means a token that was already replaced is now active again.`,
       severityReason:
-        "Marked high because replayed session values are a strong indicator of token reuse risk.",
+        "Rated high because a replayed token can indicate that someone captured an old session value and is attempting to reuse it to gain access to your account.",
       plainMeaning:
-        "An old sign-in token seems to be active again. That can mean someone reused a prior session."
+        "An old login token that should have been expired or replaced is being used again. This is a potential sign of session hijacking — someone may have stolen a previous token and is replaying it.",
+      recommendation:
+        "Take action: Log out of the affected site and log back in to force a new session. If available, revoke all active sessions from the site's security settings. Change your password if you suspect unauthorized access."
     };
   }
 
   if (alert.type === "concurrent_session_usage") {
     return {
-      reason: `${token} was detected in multiple browser stores/profiles for ${site}.`,
+      reason: `The token "${token}" for ${site} was found active in multiple browser cookie stores simultaneously. This means the same session credential exists in more than one browser profile or container.`,
       severityReason:
-        "Marked high because simultaneous reuse across stores can indicate session sharing or hijacking.",
+        "Rated high because a legitimate session token should only exist in one browser context. Duplication across stores can indicate the token was copied or exported.",
       plainMeaning:
-        "The same login session appears in more than one browser profile at once, which can be suspicious."
+        "Your login session for this site is active in multiple browser profiles at the same time. This could mean someone copied your session cookie to another browser to impersonate you.",
+      recommendation:
+        "Take action: Log out of the affected site across all profiles. Revoke active sessions from the site's security settings if available. If you intentionally use multiple profiles on the same site, you can dismiss this alert."
     };
   }
 
   return {
     reason: alert.message || `SessionSentinel flagged ${prettifyType(alert.type)} on ${site}.`,
     severityReason:
       severity === "high"
-        ? "Marked high because this event matches a high-risk session behavior pattern."
+        ? "Rated high because this event matches a pattern strongly associated with session compromise."
         : severity === "medium"
-          ? "Marked medium because this event is suspicious but less conclusive."
-          : "Marked low because this is informational or lower-confidence suspicious behavior.",
+          ? "Rated medium because this event is suspicious but not conclusive on its own."
+          : "Rated low — this is informational. The detected behavior is likely normal but was logged for your awareness.",
     plainMeaning:
-      "Something unusual was detected in your session activity. Review where and when this happened."
+      "Something unusual was detected in your session activity. Review the details to determine if this aligns with your recent actions on the site.",
+    recommendation:
+      severity === "high"
+        ? "Take action: Review your account activity on the affected site and consider logging out and back in."
+        : "No action needed unless you notice other suspicious activity on the affected site."
   };
 }
 
@@ -293,9 +303,10 @@ function renderAlert(alert) {
   details.className = "alert-details";
   details.hidden = !isExpanded;
   details.append(
-    createDetailsRow("Reason", insights.reason),
-    createDetailsRow("Severity", insights.severityReason),
-    createDetailsRow("Meaning", insights.plainMeaning)
+    createDetailsRow("Why this was flagged", insights.reason),
+    createDetailsRow("Severity rationale", insights.severityReason),
+    createDetailsRow("What this means", insights.plainMeaning),
+    createDetailsRow("Recommended action", insights.recommendation)
   );
 
   content.append(header, msg, meta, details);
@@ -413,7 +424,34 @@ async function render() {
     return;
   }
 
-  alertsEl.replaceChildren(...filtered.map(renderAlert));
+  // Group alerts by site
+  const groups = new Map();
+  for (const a of filtered) {
+    const site = a.site || "Unknown site";
+    if (!groups.has(site)) groups.set(site, []);
+    groups.get(site).push(a);
+  }
+
+  const fragment = document.createDocumentFragment();
+  for (const [site, siteAlerts] of groups) {
+    // Site group header
+    const header = document.createElement("div");
+    header.className = "site-group-header";
+    const siteLabel = document.createElement("span");
+    siteLabel.className = "site-group-name";
+    siteLabel.textContent = site;
+    const countBadge = document.createElement("span");
+    countBadge.className = "site-group-count";
+    countBadge.textContent = siteAlerts.length;
+    header.append(siteLabel, countBadge);
+    fragment.appendChild(header);
+
+    // Alerts for this site
+    for (const a of siteAlerts) {
+      fragment.appendChild(renderAlert(a));
+    }
+  }
+  alertsEl.replaceChildren(fragment);
 }
 
 // ---------------------------------------------------------------------------