averecion-lite 1.3.0

package/dashboard/dash.js

@@ -0,0 +1,898 @@
+(function() {
+  let SECRET = localStorage.getItem("lite_secret");
+  let timelineChart = null;
+  let ws = null;
+  let reconnectAttempts = 0;
+  const tooltip = document.getElementById("tooltip");
+  let notificationsEnabled = localStorage.getItem("notifications_enabled") === "true";
+  const feedback = JSON.parse(localStorage.getItem("clawguard_feedback") || "{}");
+
+  // Notification system
+  async function requestNotificationPermission() {
+    if (!("Notification" in window)) {
+      console.log("Browser does not support notifications");
+      return false;
+    }
+    
+    if (Notification.permission === "granted") {
+      return true;
+    }
+    
+    if (Notification.permission !== "denied") {
+      const permission = await Notification.requestPermission();
+      return permission === "granted";
+    }
+    
+    return false;
+  }
+
+  function showNotification(title, body, isCritical = false) {
+    if (!notificationsEnabled || Notification.permission !== "granted") return;
+    
+    const notification = new Notification(title, {
+      body,
+      icon: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦞</text></svg>",
+      tag: isCritical ? "critical" : "info",
+      requireInteraction: isCritical
+    });
+    
+    notification.onclick = () => {
+      window.focus();
+      notification.close();
+    };
+    
+    if (!isCritical) {
+      setTimeout(() => notification.close(), 5000);
+    }
+  }
+
+  function saveFeedback(eventId, helpful) {
+    feedback[eventId] = { helpful, ts: new Date().toISOString() };
+    localStorage.setItem("clawguard_feedback", JSON.stringify(feedback));
+  }
+
+  function getFeedbackStats() {
+    const entries = Object.values(feedback);
+    const helpful = entries.filter(e => e.helpful).length;
+    const notHelpful = entries.filter(e => !e.helpful).length;
+    return { helpful, notHelpful, total: entries.length };
+  }
+
+  const screens = {
+    onboarding: document.getElementById("onboarding"),
+    dashboard: document.getElementById("dashboard")
+  };
+
+  const THREAT_CONTEXT = {
+    "shell.exec": {
+      title: "Terminal Command Blocked",
+      desc: "Attackers sometimes trick AI into running dangerous commands like deleting files or stealing data."
+    },
+    "fs.write": {
+      title: "File Write Blocked", 
+      desc: "Writing files can be risky if an attacker tricks the AI into overwriting important files or creating malware."
+    },
+    "fs.delete": {
+      title: "File Delete Blocked",
+      desc: "Deleting files could cause data loss. This was stopped to protect your system."
+    },
+    "http.request": {
+      title: "Network Request Reviewed",
+      desc: "Outgoing requests can leak your data to attackers. This request was checked for safety."
+    },
+    "env.read": {
+      title: "Secrets Access Blocked",
+      desc: "Someone tried to access your API keys or passwords. This could lead to credential theft."
+    },
+    "promptInjection": {
+      title: "Prompt Injection Detected!",
+      desc: "An attacker tried to manipulate your AI by hiding instructions in data. This is a known attack vector."
+    }
+  };
+
+  function showScreen(name) {
+    Object.values(screens).forEach(s => s.classList.add("hidden"));
+    screens[name].classList.remove("hidden");
+  }
+
+  function setWizardStep(step) {
+    document.querySelectorAll(".step").forEach((el, i) => {
+      const stepNum = i + 1;
+      el.classList.remove("active", "done");
+      if (stepNum < step) el.classList.add("done");
+      if (stepNum === step) el.classList.add("active");
+    });
+
+    document.querySelectorAll(".wizard-panel").forEach(panel => {
+      panel.classList.remove("active");
+      if (panel.dataset.panel === String(step)) panel.classList.add("active");
+    });
+  }
+
+  document.getElementById("btn-connect")?.addEventListener("click", () => {
+    const input = document.getElementById("secret-input");
+    const secret = input.value.trim();
+    if (secret.length < 10) {
+      input.style.borderColor = "#ef4444";
+      return;
+    }
+    SECRET = secret;
+    localStorage.setItem("lite_secret", SECRET);
+    setWizardStep(2);
+  });
+
+  document.querySelectorAll(".level-card").forEach(card => {
+    card.addEventListener("click", () => {
+      document.querySelectorAll(".level-card").forEach(c => c.classList.remove("selected"));
+      card.classList.add("selected");
+    });
+  });
+
+  document.getElementById("btn-configure")?.addEventListener("click", () => {
+    const level = document.querySelector('input[name="protection"]:checked')?.value || "balanced";
+    localStorage.setItem("protection_level", level);
+    setWizardStep(3);
+  });
+
+  document.getElementById("btn-go")?.addEventListener("click", () => {
+    showScreen("dashboard");
+    loadDashboard();
+  });
+
+  async function fetchMetrics() {
+    try {
+      const headers = {};
+      if (SECRET) headers["X-Lite-Secret"] = SECRET;
+      const response = await fetch("/lite-metrics", { headers });
+      if (!response.ok) throw new Error("Fetch failed");
+      return await response.json();
+    } catch (err) {
+      console.error("Failed to fetch metrics:", err);
+      return null;
+    }
+  }
+
+  function friendlyAction(event) {
+    const tool = event.tool || "action";
+    const reason = event.reason || "";
+    
+    if (event.decision === "approved") {
+      return { icon: "✓", class: "approved", text: `Your bot used ${tool}`, context: null };
+    }
+    if (event.decision === "blocked") {
+      let context = THREAT_CONTEXT[tool] || null;
+      if (reason.includes("promptInjection")) {
+        context = THREAT_CONTEXT.promptInjection;
+        return { icon: "🛡️", class: "blocked attack", text: `Caught attack: Prompt injection attempt`, context, isAttack: true };
+      }
+      if (reason.includes("highRisk")) {
+        return { icon: "⚠️", class: "blocked", text: `Blocked risky action: ${tool}`, context };
+      }
+      return { icon: "✗", class: "blocked", text: `Blocked: ${tool}`, context };
+    }
+    if (event.decision === "manual") {
+      return { icon: "👆", class: "manual", text: `You approved ${tool}`, context: null };
+    }
+    return { icon: "•", class: "approved", text: tool, context: null };
+  }
+
+  function formatTime(ts) {
+    const date = new Date(ts);
+    const now = new Date();
+    const diff = (now - date) / 1000;
+    
+    if (diff < 60) return "Just now";
+    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+    return date.toLocaleDateString();
+  }
+
+  function updateDashboard(metrics) {
+    document.getElementById("stat-approved").textContent = metrics.kpis.approved || 0;
+    document.getElementById("stat-blocked").textContent = metrics.kpis.blocked || 0;
+    document.getElementById("stat-manual").textContent = metrics.kpis.manualApproved || 0;
+
+    const globalStatus = document.getElementById("global-status");
+    if (metrics.kpis.blocked > 5 || metrics.kpis.promptInjectionDetected > 0) {
+      globalStatus.textContent = "⚠️ Needs Attention";
+      globalStatus.className = "status-badge warning";
+    } else {
+      globalStatus.textContent = "✓ Protected";
+      globalStatus.className = "status-badge protected";
+    }
+
+    const checkLocal = document.getElementById("check-local");
+    const checkSecret = document.getElementById("check-secret");
+    const checkInjection = document.getElementById("check-injection");
+
+    if (checkLocal) checkLocal.className = "safety-item " + (metrics.instance.dashboardLocalOnly ? "pass" : "fail");
+    if (checkSecret) checkSecret.className = "safety-item " + (metrics.instance.secretsEnvOnly ? "pass" : "fail");
+    if (checkInjection) checkInjection.className = "safety-item pass";
+
+    const activityList = document.getElementById("activity-list");
+    if (metrics.lastActions && metrics.lastActions.length > 0) {
+      activityList.innerHTML = metrics.lastActions.slice(0, 5).map((event, index) => {
+        const friendly = friendlyAction(event);
+        const hasContext = friendly.context !== null;
+        const contextClass = friendly.isAttack ? "attack" : "";
+        const eventId = event.id || `${event.ts}-${index}`;
+        const showFeedback = event.decision === "blocked" || friendly.isAttack;
+        const alreadyFeedback = feedback[eventId];
+        
+        const feedbackHtml = showFeedback ? (alreadyFeedback ? 
+          `<div class="activity-feedback"><span class="feedback-thanks">Thanks for your feedback!</span></div>` :
+          `<div class="activity-feedback" data-event-id="${eventId}">
+            <span class="feedback-label">Was this flag helpful?</span>
+            <button class="feedback-btn helpful" data-helpful="true" data-testid="feedback-helpful-${eventId}">👍</button>
+            <button class="feedback-btn not-helpful" data-helpful="false" data-testid="feedback-not-helpful-${eventId}">👎</button>
+          </div>`
+        ) : "";
+        
+        if (hasContext) {
+          return `
+            <div class="activity-item has-context" data-event-id="${eventId}">
+              <div class="activity-header">
+                <div class="activity-icon ${friendly.class}">${friendly.icon}</div>
+                <div class="activity-content">
+                  <div class="activity-text">${friendly.text}</div>
+                  <div class="activity-time">${formatTime(event.ts)}</div>
+                </div>
+              </div>
+              <div class="activity-context ${contextClass}">
+                <div class="activity-context-title">${friendly.context.title}</div>
+                <div class="activity-context-desc">${friendly.context.desc}</div>
+              </div>
+              ${feedbackHtml}
+            </div>
+          `;
+        }
+        return `
+          <div class="activity-item" data-event-id="${eventId}">
+            <div class="activity-icon ${friendly.class}">${friendly.icon}</div>
+            <div class="activity-content">
+              <div class="activity-text">${friendly.text}</div>
+              <div class="activity-time">${formatTime(event.ts)}</div>
+            </div>
+          </div>
+        `;
+      }).join("");
+      
+      // Attach feedback handlers for initial load
+      activityList.querySelectorAll(".feedback-btn").forEach(btn => {
+        btn.addEventListener("click", () => {
+          const eventId = btn.closest(".activity-feedback").dataset.eventId;
+          const helpful = btn.dataset.helpful === "true";
+          saveFeedback(eventId, helpful);
+          const feedbackDiv = btn.closest(".activity-feedback");
+          if (feedbackDiv) {
+            feedbackDiv.innerHTML = `<span class="feedback-thanks">Thanks for your feedback!</span>`;
+          }
+        });
+      });
+    }
+
+    updateProtectionScore(metrics);
+    updatePendingApprovals(metrics);
+
+    updateChart(metrics.timeline);
+  }
+
+  function updateChart(timeline) {
+    const ctx = document.getElementById("chart-timeline").getContext("2d");
+
+    if (timelineChart) {
+      timelineChart.destroy();
+    }
+
+    timelineChart = new Chart(ctx, {
+      type: "line",
+      data: {
+        labels: timeline.hours,
+        datasets: [
+          {
+            label: "Approved",
+            data: timeline.approved,
+            borderColor: "#22c55e",
+            backgroundColor: "rgba(34, 197, 94, 0.1)",
+            fill: true,
+            tension: 0.4,
+            pointRadius: 0
+          },
+          {
+            label: "Blocked",
+            data: timeline.blocked,
+            borderColor: "#ef4444",
+            backgroundColor: "rgba(239, 68, 68, 0.1)",
+            fill: true,
+            tension: 0.4,
+            pointRadius: 0
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            position: "top",
+            labels: { color: "#a0a0b0", usePointStyle: true }
+          }
+        },
+        scales: {
+          x: {
+            ticks: { color: "#606070", maxTicksLimit: 8 },
+            grid: { color: "rgba(255,255,255,0.05)" }
+          },
+          y: {
+            beginAtZero: true,
+            ticks: { color: "#606070" },
+            grid: { color: "rgba(255,255,255,0.05)" }
+          }
+        }
+      }
+    });
+  }
+
+  async function loadDashboard() {
+    const metrics = await fetchMetrics();
+    if (metrics) {
+      updateDashboard(metrics);
+      hideError();
+    } else {
+      showError("Couldn't connect to your bot. Check that Averecion Lite is running.");
+    }
+  }
+
+  function showError(message) {
+    let errorEl = document.getElementById("error-banner");
+    if (!errorEl) {
+      errorEl = document.createElement("div");
+      errorEl.id = "error-banner";
+      errorEl.style.cssText = "background:#ef4444;color:white;padding:1rem;text-align:center;position:fixed;top:0;left:0;right:0;z-index:100;";
+      document.body.prepend(errorEl);
+    }
+    errorEl.textContent = "⚠️ " + message;
+    errorEl.style.display = "block";
+  }
+
+  function hideError() {
+    const errorEl = document.getElementById("error-banner");
+    if (errorEl) errorEl.style.display = "none";
+  }
+
+  function updateProtectionScore(metrics) {
+    let score = 0;
+    const bars = {
+      local: document.getElementById("bar-local"),
+      secret: document.getElementById("bar-secret"),
+      injection: document.getElementById("bar-injection"),
+      approval: document.getElementById("bar-approval")
+    };
+
+    if (metrics.instance.dashboardLocalOnly) {
+      score++;
+      bars.local?.classList.add("active");
+      bars.local?.classList.remove("inactive");
+    } else {
+      bars.local?.classList.remove("active");
+      bars.local?.classList.add("inactive");
+    }
+
+    if (metrics.instance.secretsEnvOnly) {
+      score++;
+      bars.secret?.classList.add("active");
+      bars.secret?.classList.remove("inactive");
+    } else {
+      bars.secret?.classList.remove("active");
+      bars.secret?.classList.add("inactive");
+    }
+
+    score++;
+    bars.injection?.classList.add("active");
+
+    if (localStorage.getItem("protection_level") !== "relaxed") {
+      score++;
+      bars.approval?.classList.add("active");
+      bars.approval?.classList.remove("inactive");
+    } else {
+      bars.approval?.classList.remove("active");
+      bars.approval?.classList.add("inactive");
+    }
+
+    const scoreEl = document.getElementById("score-value");
+    if (scoreEl) {
+      scoreEl.textContent = `${score}/4`;
+      scoreEl.style.color = score === 4 ? "#22c55e" : score >= 2 ? "#f59e0b" : "#ef4444";
+    }
+  }
+
+  function initTooltips() {
+    if (!tooltip) return;
+    
+    document.querySelectorAll("[data-tooltip]").forEach(el => {
+      el.addEventListener("mouseenter", (e) => {
+        const text = el.getAttribute("data-tooltip");
+        tooltip.textContent = text;
+        tooltip.classList.add("visible");
+        
+        const rect = el.getBoundingClientRect();
+        const left = Math.max(10, Math.min(window.innerWidth - 260, rect.left + (rect.width / 2) - 125));
+        tooltip.style.left = left + "px";
+        tooltip.style.top = rect.bottom + 8 + "px";
+      });
+
+      el.addEventListener("mouseleave", () => {
+        tooltip.classList.remove("visible");
+      });
+    });
+  }
+
+  const LEVEL_HINTS = {
+    relaxed: "Just block the really dangerous stuff",
+    balanced: "Ask me before risky actions",
+    strict: "I approve everything important"
+  };
+
+  function initProtectionToggle() {
+    const toggleBtns = document.querySelectorAll(".toggle-btn");
+    const hintEl = document.getElementById("level-hint");
+    const savedLevel = localStorage.getItem("protection_level") || "balanced";
+
+    toggleBtns.forEach(btn => {
+      if (btn.dataset.level === savedLevel) {
+        btn.classList.add("active");
+      } else {
+        btn.classList.remove("active");
+      }
+
+      btn.addEventListener("click", async () => {
+        const level = btn.dataset.level;
+        toggleBtns.forEach(b => b.classList.remove("active"));
+        btn.classList.add("active");
+        localStorage.setItem("protection_level", level);
+        if (hintEl) hintEl.textContent = LEVEL_HINTS[level];
+
+        try {
+          const headers = { "Content-Type": "application/json" };
+          if (SECRET) headers["X-Lite-Secret"] = SECRET;
+          await fetch("/lite-policy", {
+            method: "POST",
+            headers,
+            body: JSON.stringify({ level })
+          });
+        } catch (err) {
+          console.log("Policy update sent (backend may not support yet)");
+        }
+
+        loadDashboard();
+      });
+    });
+
+    if (hintEl) hintEl.textContent = LEVEL_HINTS[savedLevel];
+  }
+
+  function updatePendingApprovals(metrics) {
+    const section = document.getElementById("approvals-section");
+    const list = document.getElementById("approvals-list");
+    const countEl = document.getElementById("approval-count");
+    
+    const pending = metrics.pendingApprovals || [];
+    
+    if (pending.length === 0) {
+      section.style.display = "none";
+      return;
+    }
+
+    section.style.display = "block";
+    countEl.textContent = pending.length;
+
+    list.innerHTML = pending.map(item => `
+      <div class="approval-card" data-id="${item.id}">
+        <div class="approval-header">
+          <span class="approval-icon">⏳</span>
+          <span class="approval-tool">${item.tool}</span>
+          <span class="approval-time">${formatTime(item.ts)}</span>
+        </div>
+        <div class="approval-plan">${item.plan || "No description provided"}</div>
+        <div class="approval-actions">
+          <button class="btn-approve" data-id="${item.id}" data-testid="btn-approve-${item.id}">✓ Approve</button>
+          <button class="btn-deny" data-id="${item.id}" data-testid="btn-deny-${item.id}">✗ Deny</button>
+        </div>
+      </div>
+    `).join("");
+
+    list.querySelectorAll(".btn-approve").forEach(btn => {
+      btn.addEventListener("click", () => handleApproval(btn.dataset.id, true));
+    });
+
+    list.querySelectorAll(".btn-deny").forEach(btn => {
+      btn.addEventListener("click", () => handleApproval(btn.dataset.id, false));
+    });
+  }
+
+  async function handleApproval(id, approved) {
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (SECRET) headers["X-Lite-Secret"] = SECRET;
+      
+      await fetch("/lite-approval", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ id, approved })
+      });
+
+      loadDashboard();
+    } catch (err) {
+      console.error("Approval failed:", err);
+    }
+  }
+
+  async function fetchAgents() {
+    try {
+      const headers = {};
+      if (SECRET) headers["X-Lite-Secret"] = SECRET;
+      const response = await fetch("/api/agents", { headers });
+      if (!response.ok) return [];
+      return await response.json();
+    } catch (err) {
+      return [];
+    }
+  }
+
+  function getRiskColor(score) {
+    if (score >= 70) return "#ef4444";
+    if (score >= 40) return "#f59e0b";
+    return "#22c55e";
+  }
+
+  function getRiskLabel(level) {
+    const labels = {
+      critical: "🔴 Critical",
+      high: "🟠 High",
+      medium: "🟡 Medium",
+      low: "🟢 Low"
+    };
+    return labels[level] || level;
+  }
+
+  async function updateAgentsGrid() {
+    const grid = document.getElementById("agents-grid");
+    const emptyEl = document.getElementById("agents-empty");
+    const countEl = document.getElementById("agent-count");
+    
+    if (!grid) return;
+
+    const agents = await fetchAgents();
+    
+    if (agents.length === 0) {
+      if (emptyEl) emptyEl.style.display = "block";
+      if (countEl) countEl.textContent = "0";
+      return;
+    }
+
+    if (emptyEl) emptyEl.style.display = "none";
+    if (countEl) countEl.textContent = agents.length;
+
+    const agentCards = agents.map(agent => {
+      const risk = agent.risk || { overallScore: 0, riskLevel: "low" };
+      const capCount = agent.capabilities?.length || 0;
+      const framework = agent.framework || "custom";
+      
+      return `
+        <div class="agent-card" data-id="${agent.id}" data-testid="agent-${agent.id}">
+          <div class="agent-header">
+            <span class="agent-icon">${getAgentIcon(framework)}</span>
+            <div class="agent-name-wrap">
+              <span class="agent-name">${agent.name}</span>
+              <span class="agent-framework">${framework}</span>
+            </div>
+            <span class="agent-risk-badge" style="background: ${getRiskColor(risk.overallScore)}">
+              ${risk.overallScore}
+            </span>
+          </div>
+          <div class="agent-risk-bar">
+            <div class="agent-risk-fill" style="width: ${risk.overallScore}%; background: ${getRiskColor(risk.overallScore)}"></div>
+          </div>
+          <div class="agent-details">
+            <span class="agent-detail">
+              <span class="detail-label">Capabilities:</span>
+              <span class="detail-value">${capCount}</span>
+            </span>
+            <span class="agent-detail">
+              <span class="detail-label">Risk:</span>
+              <span class="detail-value">${getRiskLabel(risk.riskLevel)}</span>
+            </span>
+          </div>
+          ${renderCapabilities(agent.capabilities)}
+        </div>
+      `;
+    }).join("");
+
+    grid.innerHTML = agentCards;
+  }
+
+  function getAgentIcon(framework) {
+    const icons = {
+      "clawdbot": "🦞",
+      "claude-desktop": "🤖",
+      "langchain": "🔗",
+      "autogpt": "⚡",
+      "custom": "🔧"
+    };
+    return icons[framework] || "🤖";
+  }
+
+  function renderCapabilities(capabilities) {
+    if (!capabilities || capabilities.length === 0) return "";
+    
+    const caps = capabilities.slice(0, 4).map(cap => {
+      const riskWeight = cap.riskWeight || 0;
+      const dotColor = riskWeight >= 70 ? "#ef4444" : riskWeight >= 40 ? "#f59e0b" : "#22c55e";
+      return `<span class="cap-tag" style="border-color: ${dotColor}"><span class="cap-dot" style="background: ${dotColor}"></span>${cap.name}</span>`;
+    }).join("");
+    
+    const more = capabilities.length > 4 ? `<span class="cap-more">+${capabilities.length - 4} more</span>` : "";
+    
+    return `<div class="agent-caps">${caps}${more}</div>`;
+  }
+
+  // WebSocket connection for real-time updates
+  function connectWebSocket() {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    let wsUrl = `${protocol}//${window.location.host}`;
+    
+    if (SECRET) {
+      wsUrl += `?secret=${encodeURIComponent(SECRET)}`;
+    }
+    
+    try {
+      ws = new WebSocket(wsUrl);
+      
+      ws.onopen = () => {
+        console.log("[Clawguard] Real-time connection established");
+        reconnectAttempts = 0;
+        updateConnectionStatus(true);
+      };
+      
+      ws.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data);
+          handleWebSocketMessage(message);
+        } catch (err) {
+          console.error("[Clawguard] Failed to parse message:", err);
+        }
+      };
+      
+      ws.onclose = () => {
+        console.log("[Clawguard] Connection closed, will reconnect...");
+        updateConnectionStatus(false);
+        scheduleReconnect();
+      };
+      
+      ws.onerror = (err) => {
+        console.error("[Clawguard] WebSocket error:", err);
+        updateConnectionStatus(false);
+      };
+    } catch (err) {
+      console.error("[Clawguard] Failed to connect:", err);
+      scheduleReconnect();
+    }
+  }
+  
+  function scheduleReconnect() {
+    reconnectAttempts++;
+    const delay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempts));
+    setTimeout(connectWebSocket, delay);
+  }
+  
+  function updateConnectionStatus(connected) {
+    const statusEl = document.getElementById("clawguard-status");
+    if (statusEl) {
+      if (connected) {
+        statusEl.textContent = "● Live";
+        statusEl.className = "bot-status online";
+      } else {
+        statusEl.textContent = "○ Connecting...";
+        statusEl.className = "bot-status offline";
+      }
+    }
+  }
+  
+  function handleWebSocketMessage(message) {
+    switch (message.type) {
+      case "connected":
+        console.log("[Clawguard] Server says:", message.message);
+        break;
+        
+      case "metrics":
+        updateDashboard(message.data);
+        break;
+        
+      case "toolEvent":
+        handleToolEvent(message.data);
+        break;
+        
+      case "toolComplete":
+        handleToolComplete(message.data);
+        break;
+    }
+  }
+  
+  function handleToolEvent(data) {
+    const activityList = document.getElementById("activity-list");
+    if (!activityList) return;
+    
+    // Clear "empty" message if present
+    const emptyMsg = activityList.querySelector(".activity-empty");
+    if (emptyMsg) emptyMsg.remove();
+    
+    const actionEvent = data.actionEvent;
+    const isBlocked = actionEvent && actionEvent.decision === "blocked";
+    const isDanger = data.analysis && data.analysis.danger && data.analysis.danger.dangerous;
+    const isInjection = data.analysis && data.analysis.injection && data.analysis.injection.detected;
+    
+    let icon = "✓";
+    let className = "approved";
+    let text = `Tool executed: ${data.tool}`;
+    let context = null;
+    
+    if (isBlocked || isDanger) {
+      icon = "⚠️";
+      className = "blocked";
+      text = `Dangerous action: ${data.tool}`;
+      context = {
+        title: isDanger ? data.analysis.danger.reason : "Dangerous Action Detected",
+        desc: "This action was flagged as potentially dangerous."
+      };
+    }
+    
+    if (isInjection) {
+      icon = "🛡️";
+      className = "blocked attack";
+      text = `Caught attack in ${data.tool}`;
+      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) {
+      showNotification("⚠️ Dangerous Command Detected", `${data.tool}: ${data.analysis.danger.reason}`, true);
+    }
+    
+    const eventId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    const showFeedback = isBlocked || isDanger || isInjection;
+    const feedbackHtml = showFeedback ? `
+      <div class="activity-feedback" data-event-id="${eventId}">
+        <span class="feedback-label">Was this flag helpful?</span>
+        <button class="feedback-btn helpful" data-helpful="true" data-testid="feedback-helpful-${eventId}">👍</button>
+        <button class="feedback-btn not-helpful" data-helpful="false" data-testid="feedback-not-helpful-${eventId}">👎</button>
+      </div>
+    ` : "";
+    
+    const itemHtml = context ? `
+      <div class="activity-item has-context" data-new="true" data-event-id="${eventId}">
+        <div class="activity-header">
+          <div class="activity-icon ${className}">${icon}</div>
+          <div class="activity-content">
+            <div class="activity-text">${text}</div>
+            <div class="activity-time">Just now</div>
+          </div>
+        </div>
+        <div class="activity-context ${isInjection ? 'attack' : ''}">
+          <div class="activity-context-title">${context.title}</div>
+          <div class="activity-context-desc">${context.desc}</div>
+        </div>
+        ${feedbackHtml}
+      </div>
+    ` : `
+      <div class="activity-item" data-new="true" data-event-id="${eventId}">
+        <div class="activity-icon ${className}">${icon}</div>
+        <div class="activity-content">
+          <div class="activity-text">${text}</div>
+          <div class="activity-time">Just now</div>
+        </div>
+      </div>
+    `;
+    
+    activityList.insertAdjacentHTML("afterbegin", itemHtml);
+    
+    // Attach feedback button handlers
+    const newItemEl = activityList.querySelector(`[data-event-id="${eventId}"]`);
+    if (newItemEl) {
+      newItemEl.querySelectorAll(".feedback-btn").forEach(btn => {
+        btn.addEventListener("click", () => {
+          const helpful = btn.dataset.helpful === "true";
+          saveFeedback(eventId, helpful);
+          const feedbackDiv = btn.closest(".activity-feedback");
+          if (feedbackDiv) {
+            feedbackDiv.innerHTML = `<span class="feedback-thanks">Thanks for your feedback!</span>`;
+          }
+        });
+      });
+    }
+    
+    // Update stats
+    const statApproved = document.getElementById("stat-approved");
+    const statBlocked = document.getElementById("stat-blocked");
+    
+    if (isBlocked && statBlocked) {
+      statBlocked.textContent = parseInt(statBlocked.textContent || 0) + 1;
+    } else if (statApproved) {
+      statApproved.textContent = parseInt(statApproved.textContent || 0) + 1;
+    }
+    
+    // Keep only last 10 items
+    const items = activityList.querySelectorAll(".activity-item");
+    if (items.length > 10) {
+      items[items.length - 1].remove();
+    }
+    
+    // Flash new item
+    const newItem = activityList.querySelector('[data-new="true"]');
+    if (newItem) {
+      newItem.style.animation = "fadeIn 0.3s ease-out";
+      newItem.removeAttribute("data-new");
+    }
+  }
+  
+  function handleToolComplete(data) {
+    console.log(`[Clawguard] Tool ${data.tool} completed in ${data.duration}ms`);
+  }
+
+  // Show onboarding unless user already has a saved secret
+  if (SECRET) {
+    showScreen("dashboard");
+    loadDashboard();
+    updateAgentsGrid();
+    connectWebSocket();
+    setInterval(() => {
+      loadDashboard();
+      updateAgentsGrid();
+    }, 30000);
+  } else {
+    showScreen("onboarding");
+  }
+
+  initTooltips();
+  initProtectionToggle();
+  initNotificationToggle();
+
+  function initNotificationToggle() {
+    const btn = document.getElementById("btn-notifications");
+    if (!btn) return;
+    
+    // Update button state
+    function updateButtonState() {
+      if (notificationsEnabled && Notification.permission === "granted") {
+        btn.classList.add("enabled");
+        btn.textContent = "🔔 Notifications On";
+      } else {
+        btn.classList.remove("enabled");
+        btn.textContent = "🔔 Notifications";
+      }
+    }
+    
+    updateButtonState();
+    
+    btn.addEventListener("click", async () => {
+      if (notificationsEnabled) {
+        // Disable notifications
+        notificationsEnabled = false;
+        localStorage.setItem("notifications_enabled", "false");
+        updateButtonState();
+      } else {
+        // Request permission and enable
+        const granted = await requestNotificationPermission();
+        if (granted) {
+          notificationsEnabled = true;
+          localStorage.setItem("notifications_enabled", "true");
+          showNotification("🦞 Clawguard", "Notifications enabled! You'll be alerted about critical events.", false);
+        }
+        updateButtonState();
+      }
+    });
+  }
+})();