averecion-lite 1.7.0 → 1.8.0

package/dashboard/dash.css

@@ -1390,6 +1390,59 @@ body {
   color: var(--text-primary);
 }
 
+/* Activity Filters */
+.activity-filters {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.filter-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  padding: 0.4rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.filter-btn:hover {
+  border-color: var(--text-secondary);
+  color: var(--text-primary);
+}
+
+.filter-btn.active {
+  background: rgba(139, 92, 246, 0.15);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.filter-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.filter-dot.safe { background: var(--success); }
+.filter-dot.flagged { background: var(--warning); }
+.filter-dot.attack { background: var(--danger); }
+.filter-dot.reviewed { background: var(--accent); }
+
+.activity-filter-empty {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  text-align: center;
+  padding: 1.5rem 1rem;
+  font-style: italic;
+}
+
 @keyframes slideInLeft {
   from { opacity: 0; transform: translateX(-20px); }
   to { opacity: 1; transform: translateX(0); }

package/dashboard/dash.js

@@ -245,6 +245,7 @@
         const eventId = event.id || `${event.ts}-${index}`;
         const showFeedback = event.decision === "blocked" || friendly.isAttack;
         const alreadyFeedback = feedback[eventId];
+        const category = friendly.isAttack ? "attack" : friendly.class === "blocked" ? "flagged" : friendly.class === "manual" ? "reviewed" : "safe";
         
         const feedbackHtml = showFeedback ? (alreadyFeedback ? 
           `<div class="activity-feedback"><span class="feedback-thanks">Thanks for your feedback!</span></div>` :
@@ -257,7 +258,7 @@
         
         if (hasContext) {
           return `
-            <div class="activity-item has-context" data-event-id="${eventId}">
+            <div class="activity-item has-context" data-category="${category}" data-event-id="${eventId}">
               <div class="activity-header">
                 <div class="activity-icon ${friendly.class}">${friendly.icon}</div>
                 <div class="activity-content">
@@ -274,7 +275,7 @@
           `;
         }
         return `
-          <div class="activity-item" data-event-id="${eventId}">
+          <div class="activity-item" data-category="${category}" data-event-id="${eventId}">
             <div class="activity-icon ${friendly.class}">${friendly.icon}</div>
             <div class="activity-content">
               <div class="activity-text">${friendly.text}</div>
@@ -283,6 +284,7 @@
           </div>
         `;
       }).join("");
+      applyActivityFilter();
       
       // Attach feedback handlers for initial load
       activityList.querySelectorAll(".feedback-btn").forEach(btn => {
@@ -756,11 +758,13 @@
     let className = "approved";
     let text = `Tool executed: ${data.tool}`;
     let context = null;
+    let category = "safe";
     
     if (isBlocked || isDanger) {
       icon = "⚠️";
       className = "blocked";
       text = `Dangerous action: ${data.tool}`;
+      category = "flagged";
       context = {
         title: isDanger ? data.analysis.danger.reason : "Dangerous Action Detected",
         desc: "This action was flagged as potentially dangerous."
@@ -771,13 +775,13 @@
       icon = "🛡️";
       className = "blocked attack";
       text = `Caught attack in ${data.tool}`;
+      category = "attack";
       context = {
         title: "Prompt Injection Detected!",
         desc: data.analysis.injection.reason
       };
     }
     
-    // Send browser notification for critical events
     if (isInjection) {
       showNotification("🛡️ Prompt Injection Detected!", `Attack attempt caught in ${data.tool}`, true);
     } else if (isDanger) {
@@ -795,7 +799,7 @@
     ` : "";
     
     const itemHtml = context ? `
-      <div class="activity-item has-context" data-new="true" data-event-id="${eventId}">
+      <div class="activity-item has-context" data-new="true" data-category="${category}" data-event-id="${eventId}">
         <div class="activity-header">
           <div class="activity-icon ${className}">${icon}</div>
           <div class="activity-content">
@@ -810,7 +814,7 @@
         ${feedbackHtml}
       </div>
     ` : `
-      <div class="activity-item" data-new="true" data-event-id="${eventId}">
+      <div class="activity-item" data-new="true" data-category="${category}" data-event-id="${eventId}">
         <div class="activity-icon ${className}">${icon}</div>
         <div class="activity-content">
           <div class="activity-text">${text}</div>
@@ -820,6 +824,7 @@
     `;
     
     activityList.insertAdjacentHTML("afterbegin", itemHtml);
+    applyActivityFilter();
     
     // Attach feedback button handlers
     const newItemEl = activityList.querySelector(`[data-event-id="${eventId}"]`);
@@ -1269,4 +1274,54 @@
       console.error("Failed to load archives:", err);
     }
   }
+
+  let activeFilter = "all";
+
+  function initActivityFilters() {
+    const filterBar = document.getElementById("activity-filters");
+    if (!filterBar) return;
+
+    filterBar.querySelectorAll(".filter-btn").forEach(btn => {
+      btn.addEventListener("click", () => {
+        filterBar.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active"));
+        btn.classList.add("active");
+        activeFilter = btn.dataset.filter;
+        applyActivityFilter();
+      });
+    });
+  }
+
+  function applyActivityFilter() {
+    const activityList = document.getElementById("activity-list");
+    if (!activityList) return;
+
+    const items = activityList.querySelectorAll(".activity-item");
+    let visibleCount = 0;
+
+    items.forEach(item => {
+      const cat = item.dataset.category;
+      if (activeFilter === "all" || cat === activeFilter) {
+        item.style.display = "";
+        visibleCount++;
+      } else {
+        item.style.display = "none";
+      }
+    });
+
+    let emptyMsg = activityList.querySelector(".activity-filter-empty");
+    if (visibleCount === 0 && items.length > 0) {
+      if (!emptyMsg) {
+        emptyMsg = document.createElement("div");
+        emptyMsg.className = "activity-filter-empty";
+        activityList.appendChild(emptyMsg);
+      }
+      const labels = { safe: "safe", flagged: "flagged", attack: "attack", reviewed: "reviewed" };
+      emptyMsg.textContent = `No ${labels[activeFilter] || ""} activity to show`;
+      emptyMsg.style.display = "";
+    } else if (emptyMsg) {
+      emptyMsg.style.display = "none";
+    }
+  }
+
+  initActivityFilters();
 })();

package/dashboard/index.html

@@ -212,6 +212,21 @@
 
             <section class="activity-section">
               <h2>Recent Activity</h2>
+              <div class="activity-filters" id="activity-filters" data-testid="activity-filters">
+                <button class="filter-btn active" data-filter="all" data-testid="filter-all">All</button>
+                <button class="filter-btn" data-filter="safe" data-testid="filter-safe">
+                  <span class="filter-dot safe"></span> Safe
+                </button>
+                <button class="filter-btn" data-filter="flagged" data-testid="filter-flagged">
+                  <span class="filter-dot flagged"></span> Flagged
+                </button>
+                <button class="filter-btn" data-filter="attack" data-testid="filter-attack">
+                  <span class="filter-dot attack"></span> Attacks
+                </button>
+                <button class="filter-btn" data-filter="reviewed" data-testid="filter-reviewed">
+                  <span class="filter-dot reviewed"></span> Reviewed
+                </button>
+              </div>
               <div class="activity-list" id="activity-list" data-testid="list-activity">
                 <div class="activity-empty">
                   <p>🦞 Your bot hasn't done anything yet. When it does, you'll see it here!</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "averecion-lite",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Real-time AI agent monitoring - watches logs, detects dangerous commands and prompt injection attempts",
   "author": "Averecion <hello@averecion.com>",
   "homepage": "https://github.com/averecion/clawguard#readme",