@contextfort-ai/openclaw-secure 0.1.8 → 0.1.11

package/monitor/dashboard/public/index.html

@@ -48,7 +48,7 @@
     .card-sub { font-size: 12px; color: #a1a1aa; margin-top: 4px; }
 
     /* Guard summary cards on home */
-    .guard-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+    .guard-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
     .guard-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 16px; background: rgba(255,255,255,0.02); cursor: pointer; transition: all 0.15s; }
     .guard-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
     .guard-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
@@ -59,6 +59,7 @@
     .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
     .dot-green { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); }
     .dot-red { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); }
+    .dot-yellow { background: #eab308; box-shadow: 0 0 6px rgba(234,179,8,0.4); }
     .dot-gray { background: #52525b; }
 
     /* Page header */
@@ -74,7 +75,7 @@
     th { text-align: left; padding: 10px 16px; color: #a1a1aa; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
     td { padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
     tr:hover td { background: rgba(255,255,255,0.02); }
-    .cmd { font-family: ui-monospace, monospace; font-size: 12px; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .cmd { font-family: ui-monospace, monospace; font-size: 12px; max-width: 400px; white-space: pre-wrap; word-break: break-all; }
 
     /* Badges */
     .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 500; }
@@ -107,7 +108,8 @@
 
     /* Responsive */
     @media (max-width: 900px) {
-      .cards, .guard-cards { grid-template-columns: repeat(2, 1fr); }
+      .cards { grid-template-columns: repeat(2, 1fr); }
+      .guard-cards { grid-template-columns: repeat(3, 1fr); }
       .sidebar { width: 170px; }
     }
   </style>
@@ -146,6 +148,10 @@
           <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
           Home
         </button>
+        <button class="sidebar-btn" data-page="scan" onclick="switchPage('scan')">
+          <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          Secret Scanner
+        </button>
 
         <div class="sidebar-label">Guards</div>
 
@@ -169,6 +175,11 @@
           Secrets Guard
           <span class="dot dot-green" id="sb-sec-dot" style="margin-left:auto"></span>
         </button>
+        <button class="sidebar-btn" data-page="exfil" onclick="switchPage('exfil')">
+          <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
+          Secrets Exfil Monitor
+          <span class="dot dot-green" id="sb-exfil-dot" style="margin-left:auto"></span>
+        </button>
       </div>
     </aside>
 
@@ -189,6 +200,37 @@
           <div class="card"><div class="card-label">Active Since</div><div class="card-value" id="ov-since" style="font-size:16px">-</div><div class="card-sub">first hook loaded</div></div>
         </div>
 
+        <!-- Active Block Banner (shown when agent is blocked) -->
+        <div id="home-block-banner" style="display:none;margin-bottom:24px;border:1px solid rgba(239,68,68,0.3);border-radius:8px;padding:16px 20px;background:rgba(239,68,68,0.08)">
+          <div style="display:flex;align-items:flex-start;gap:12px">
+            <svg style="width:20px;height:20px;flex-shrink:0;margin-top:2px" fill="none" stroke="#f87171" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+            <div style="flex:1">
+              <div style="font-size:15px;font-weight:600;color:#f87171;margin-bottom:4px" id="home-block-title">Agent Blocked</div>
+              <div style="font-size:13px;color:#a1a1aa;margin-bottom:12px" id="home-block-reason"></div>
+              <div style="display:flex;gap:8px">
+                <button class="btn btn-sm" id="home-block-view-btn" style="color:#f87171;border-color:rgba(239,68,68,0.3)" onclick="">View Details</button>
+                <button class="btn btn-sm" id="home-block-remove-btn" style="color:#4ade80;border-color:rgba(34,197,94,0.3)" onclick="removeBlock()">Remove Block &amp; Allow OpenClaw</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Anthropic API Key box (shown when not set) -->
+        <div id="anthropic-key-box" style="display:none;margin-bottom:24px;border:1px solid rgba(250,204,21,0.3);border-radius:8px;padding:16px 20px;background:rgba(250,204,21,0.06)">
+          <div style="display:flex;align-items:flex-start;gap:12px">
+            <svg style="width:20px;height:20px;flex-shrink:0;margin-top:2px" fill="none" stroke="#facc15" stroke-width="2" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+            <div style="flex:1">
+              <div style="font-size:15px;font-weight:600;color:#facc15;margin-bottom:4px">Prompt Injection Detection Inactive</div>
+              <div style="font-size:13px;color:#a1a1aa;margin-bottom:12px">An Anthropic API key is required for Haiku to scan command output for prompt injection. Enter your key below or set <code style="background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:4px;font-size:12px">ANTHROPIC_API_KEY</code> in your shell.</div>
+              <div style="display:flex;gap:8px;align-items:center">
+                <input type="password" id="anthropic-key-input" placeholder="sk-ant-..." style="flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:8px 12px;color:#e4e4e7;font-size:13px;font-family:ui-monospace,monospace;outline:none" />
+                <button class="btn btn-sm" id="anthropic-key-save-btn" style="color:#facc15;border-color:rgba(250,204,21,0.3);white-space:nowrap" onclick="saveAnthropicKey()">Save Key</button>
+              </div>
+              <div id="anthropic-key-msg" style="font-size:12px;margin-top:8px;display:none"></div>
+            </div>
+          </div>
+        </div>
+
         <div class="guard-cards">
           <div class="guard-card" onclick="switchPage('skill')">
             <div class="guard-card-header">
@@ -222,6 +264,84 @@
             </div>
             <div class="guard-stat"><b id="g-sec-blocks">0</b> blocks &middot; <b id="g-sec-redactions">0</b> redactions</div>
           </div>
+          <div class="guard-card" onclick="switchPage('exfil')">
+            <div class="guard-card-header">
+              <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
+              <span>Secrets Exfil Monitor</span>
+              <span class="dot dot-green" id="g-exfil-dot" style="margin-left:auto"></span>
+            </div>
+            <div class="guard-stat"><b id="g-exfil-detections">0</b> detections</div>
+          </div>
+        </div>
+
+        <!-- Secret Scanner Summary -->
+        <div style="margin-top:24px">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
+            <h2 style="font-size:16px;font-weight:600">Secret Scanner</h2>
+            <button class="btn btn-sm" onclick="switchPage('scan')">View Details</button>
+          </div>
+          <div class="card" id="home-scan-card">
+            <div style="display:flex;align-items:center;gap:12px">
+              <svg style="width:20px;height:20px;flex-shrink:0" fill="none" stroke="#a1a1aa" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+              <div>
+                <div style="font-size:14px" id="home-scan-status">Loading...</div>
+                <div style="font-size:12px;color:#a1a1aa;margin-top:2px" id="home-scan-detail"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- SECRET SCANNER PAGE -->
+      <div id="page-scan" style="display:none">
+        <div class="page-header">
+          <h1>Secret Scanner</h1>
+          <p>Scan directories accessible to OpenClaw for hardcoded secrets using TruffleHog.</p>
+        </div>
+
+        <div class="cards" style="margin-bottom:24px">
+          <div class="card"><div class="card-label">TruffleHog</div><div class="card-value" id="scan-thog-status" style="font-size:16px">Checking...</div></div>
+          <div class="card"><div class="card-label">Last Scan</div><div class="card-value" id="scan-last-time" style="font-size:16px">Never</div></div>
+          <div class="card"><div class="card-label">LIVE Keys</div><div class="card-value" id="scan-verified" style="color:#f87171">-</div></div>
+          <div class="card"><div class="card-label">Total Findings</div><div class="card-value" id="scan-total">-</div></div>
+        </div>
+
+        <div style="display:flex;gap:12px;align-items:center;margin-bottom:24px">
+          <button class="btn" id="scan-run-btn" onclick="runScan()">
+            <svg style="width:14px;height:14px" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+            Run Scan
+          </button>
+<button class="btn" id="scan-solve-btn" onclick="runSolve()" style="display:none">
+            <svg style="width:14px;height:14px" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+            Scrub Selected
+          </button>
+        </div>
+
+        <!-- Scan targets -->
+        <div id="scan-targets-section" style="display:none;margin-bottom:24px">
+          <h3 style="font-size:14px;font-weight:600;margin-bottom:8px">Scanned Directories</h3>
+          <div id="scan-targets-list"></div>
+        </div>
+
+        <!-- Findings table -->
+        <div class="table-wrap">
+          <div class="table-header">
+            <h3>Findings</h3>
+            <div class="filter-row">
+              <label class="check-label" id="scan-select-all-wrap" style="display:none"><input type="checkbox" id="scan-select-all" onchange="toggleScanSelectAll()"> Select all</label>
+            </div>
+          </div>
+          <div class="table-body" id="scan-findings-body">
+            <div class="empty">No scan results yet. Click "Run Scan" to start.</div>
+          </div>
+        </div>
+
+        <!-- Solve results -->
+        <div id="scan-solve-results" style="display:none;margin-top:24px">
+          <div class="table-wrap">
+            <div class="table-header"><h3>Scrub Results</h3></div>
+            <div class="table-body" id="scan-solve-body"></div>
+          </div>
         </div>
       </div>
 
@@ -231,11 +351,35 @@
           <h1>Skill Scanner</h1>
           <p>Skills cross-indexed and scanned for prompt injection patterns via Haiku.</p>
         </div>
+
+        <!-- Skills Status (top section) -->
+        <div class="table-wrap" style="margin-bottom:24px">
+          <div class="table-header">
+            <h3>Skills Overview</h3>
+          </div>
+          <div class="table-body" id="skill-status-body">
+            <div class="empty">Loading skills...</div>
+          </div>
+        </div>
+
+        <!-- File Viewer Modal -->
+        <div id="skill-file-modal" style="display:none;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;padding:24px">
+          <div style="background:#18181b;border:1px solid rgba(255,255,255,0.1);border-radius:8px;width:100%;max-width:720px;max-height:80vh;display:flex;flex-direction:column">
+            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.1)">
+              <span style="font-size:14px;font-weight:600" id="skill-modal-title">Files</span>
+              <button class="btn btn-sm" onclick="closeSkillModal()">&times;</button>
+            </div>
+            <div id="skill-modal-content" style="overflow:auto;padding:16px;flex:1"></div>
+          </div>
+        </div>
+
+        <!-- Activity Log (bottom section) -->
         <div class="table-wrap">
           <div class="table-header">
-            <h3>Events</h3>
+            <h3>Activity Log</h3>
             <div class="filter-row">
-              <label class="check-label"><input type="checkbox" id="skill-server-only" onchange="renderGuardPage('skill')"> View only server sent events</label>
+              <label class="check-label"><input type="checkbox" id="skill-blocked-only" onchange="renderSkillPage()"> Only flagged/blocked</label>
+              <label class="check-label"><input type="checkbox" id="skill-server-only" onchange="renderSkillPage()"> Server sent events</label>
             </div>
           </div>
           <div class="table-body" id="skill-table-body"></div>
@@ -252,7 +396,9 @@
           <div class="table-header">
             <h3>Events</h3>
             <div class="filter-row">
-              <label class="check-label"><input type="checkbox" id="bash-server-only" onchange="renderGuardPage('bash')"> View only server sent events</label>
+              <label class="check-label"><input type="checkbox" id="bash-blocked-only" onchange="renderGuardPage('bash')"> Show only blocked</label>
+              <label class="check-label"><input type="checkbox" id="bash-show-system" onchange="renderGuardPage('bash')"> Show system commands</label>
+              <label class="check-label"><input type="checkbox" id="bash-server-only" onchange="renderGuardPage('bash')"> Server sent events</label>
             </div>
           </div>
           <div class="table-body" id="bash-table-body"></div>
@@ -267,9 +413,10 @@
         </div>
         <div class="table-wrap">
           <div class="table-header">
-            <h3>Events</h3>
+            <h3>Scan Events</h3>
             <div class="filter-row">
-              <label class="check-label"><input type="checkbox" id="pi-server-only" onchange="renderGuardPage('pi')"> View only server sent events</label>
+              <label class="check-label"><input type="checkbox" id="pi-blocked-only" onchange="renderPiPage()"> Only flagged</label>
+              <label class="check-label"><input type="checkbox" id="pi-server-only" onchange="renderPiPage()"> Server sent events</label>
             </div>
           </div>
           <div class="table-body" id="pi-table-body"></div>
@@ -286,13 +433,53 @@
           <div class="table-header">
             <h3>Events</h3>
             <div class="filter-row">
-              <label class="check-label"><input type="checkbox" id="secrets-server-only" onchange="renderGuardPage('secrets')"> View only server sent events</label>
+              <label class="check-label"><input type="checkbox" id="secrets-blocked-only" onchange="renderSecretsPage()"> Only show blocked</label>
+              <label class="check-label"><input type="checkbox" id="secrets-server-only" onchange="renderSecretsPage()"> Server sent events</label>
             </div>
           </div>
           <div class="table-body" id="secrets-table-body"></div>
         </div>
       </div>
 
+      <!-- EXFIL MONITOR PAGE -->
+      <div id="page-exfil" style="display:none">
+        <div class="page-header">
+          <h1>Secrets Exfil Monitor</h1>
+          <p>Detects when sensitive environment variables are transmitted to external servers via curl, wget, or nc.</p>
+        </div>
+
+        <!-- Destination Allowlist -->
+        <div class="card" style="margin-bottom:24px;padding:20px">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
+            <div>
+              <h3 style="font-size:15px;font-weight:600;margin-bottom:4px">Destination Allowlist</h3>
+              <div style="font-size:12px;color:#a1a1aa">When enabled, commands sending secrets to domains NOT in this list will be blocked.</div>
+            </div>
+            <div style="display:flex;gap:8px;align-items:center">
+              <span id="exfil-al-status-badge"></span>
+              <button class="btn btn-sm" id="exfil-al-toggle-btn" onclick="toggleExfilAllowlist()">Enable</button>
+            </div>
+          </div>
+          <div id="exfil-al-domains" style="margin-bottom:12px"></div>
+          <div style="display:flex;gap:8px;align-items:center">
+            <input type="text" id="exfil-al-input" placeholder="e.g. api.notion.com or *.supabase.co" style="flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:8px 12px;color:#e4e4e7;font-size:13px;font-family:ui-monospace,monospace;outline:none" />
+            <button class="btn btn-sm" onclick="addExfilDomain()">Add</button>
+          </div>
+        </div>
+
+        <div class="table-wrap">
+          <div class="table-header">
+            <h3>Events</h3>
+            <div class="filter-row">
+              <label class="check-label"><input type="checkbox" id="exfil-blocked-only" onchange="renderGuardPage('exfil')"> Only show blocked</label>
+              <label class="check-label"><input type="checkbox" id="exfil-show-passed" onchange="renderGuardPage('exfil')"> Show passed</label>
+              <label class="check-label"><input type="checkbox" id="exfil-server-only" onchange="renderGuardPage('exfil')"> Server sent events</label>
+            </div>
+          </div>
+          <div class="table-body" id="exfil-table-body"></div>
+        </div>
+      </div>
+
     </main>
   </div>
 
@@ -303,19 +490,30 @@ let localEvents = [];
 let serverEvents = [];
 let overviewData = {};
 
-// Guard blocker name mapping
-const GUARD_BLOCKER = { skill: 'skill', bash: 'tirith', pi: 'prompt_injection', secrets: 'env_var' };
+// Map tab name → guard field value in log events
+const GUARD_KEY = { skill: 'skill', bash: 'tirith', pi: 'prompt_injection', secrets: 'env_var', exfil: 'exfil' };
+// All events for this guard (passed + blocked + special)
 const GUARD_EVENTS = {
-  skill: e => e.blocker === 'skill',
-  bash: e => e.blocker === 'tirith',
-  pi: e => e.blocker === 'prompt_injection',
-  secrets: e => e.blocker === 'env_var' || e.event === 'output_redacted',
+  skill: e => e.guard === 'skill',
+  bash: e => e.guard === 'tirith',
+  pi: e => e.guard === 'prompt_injection',
+  secrets: e => e.guard === 'env_var' || e.event === 'output_redacted',
+  exfil: e => e.guard === 'exfil',
+};
+// Only blocked/flagged/detected events for this guard
+const GUARD_BLOCKED = {
+  skill: e => e.guard === 'skill' && (e.decision === 'block' || e.decision === 'scan_flagged' || e.decision === 'binary_detected'),
+  bash: e => e.guard === 'tirith' && e.decision === 'block',
+  pi: e => e.guard === 'prompt_injection' && (e.decision === 'block' || e.decision === 'scan_flagged'),
+  secrets: e => (e.guard === 'env_var' && e.decision === 'block') || e.event === 'output_redacted',
+  exfil: e => e.guard === 'exfil',
 };
 const SERVER_GUARD = {
   skill: e => e.destination === 'supabase' || (e.destination === 'posthog' && e.event && e.event.includes('skill')),
   bash: e => e.destination === 'posthog' && e.properties?.blocker === 'tirith',
   pi: e => e.destination === 'posthog' && (e.event === 'output_scan_started' || e.event === 'output_scan_result' || e.properties?.blocker === 'prompt_injection'),
   secrets: e => e.destination === 'posthog' && (e.properties?.blocker === 'env_var_leak' || e.event === 'output_secrets_redacted'),
+  exfil: e => e.destination === 'posthog' && e.event === 'exfil_attempt',
 };
 
 function setDays(d) {
@@ -327,10 +525,15 @@ function setDays(d) {
 function switchPage(page) {
   currentPage = page;
   document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.toggle('active', b.dataset.page === page));
-  ['home','skill','bash','pi','secrets'].forEach(p => {
+  ['home','scan','skill','bash','pi','secrets','exfil'].forEach(p => {
     document.getElementById('page-' + p).style.display = p === page ? '' : 'none';
   });
-  if (page !== 'home') renderGuardPage(page);
+  if (page === 'scan') loadScanStatus();
+  else if (page === 'skill') renderSkillPage();
+  else if (page === 'pi') renderPiPage();
+  else if (page === 'secrets') renderSecretsPage();
+  else if (page === 'exfil') { loadExfilAllowlist(); renderGuardPage('exfil'); }
+  else if (page !== 'home') renderGuardPage(page);
 }
 
 async function refresh() {
@@ -345,7 +548,15 @@ async function refresh() {
     overviewData = ov;
     renderOverview(ov);
     renderSidebarDots(ov);
-    if (currentPage !== 'home') renderGuardPage(currentPage);
+    renderBlockBanner();
+    checkAnthropicKey();
+    if (currentPage === 'scan') loadScanStatus();
+    else if (currentPage === 'skill') renderSkillPage();
+    else if (currentPage === 'pi') renderPiPage();
+    else if (currentPage === 'secrets') renderSecretsPage();
+    else if (currentPage === 'exfil') { loadExfilAllowlist(); renderGuardPage('exfil'); }
+    else if (currentPage !== 'home') renderGuardPage(currentPage);
+    loadScanStatus(); // always update home scan summary
     document.getElementById('lastUpdated').textContent = 'Updated ' + new Date().toLocaleTimeString();
   } catch (e) {
     console.error('Refresh failed:', e);
@@ -365,12 +576,14 @@ function renderOverview(ov) {
   document.getElementById('g-pi-blocks').textContent = gs.prompt_injection?.blocks || 0;
   document.getElementById('g-sec-blocks').textContent = gs.secrets_guard?.blocks || 0;
   document.getElementById('g-sec-redactions').textContent = gs.secrets_guard?.redactions || 0;
+  document.getElementById('g-exfil-detections').textContent = gs.exfil_monitor?.detections || 0;
 
   const hasData = ov.total > 0;
   setDot('g-skill-dot', hasData, gs.skill_scanner?.blocks > 0);
   setDot('g-bash-dot', hasData, gs.bash_guard?.blocks > 0);
   setDot('g-pi-dot', hasData, gs.prompt_injection?.blocks > 0);
   setDot('g-sec-dot', hasData, (gs.secrets_guard?.blocks > 0) || (gs.secrets_guard?.redactions > 0));
+  setDot('g-exfil-dot', hasData, gs.exfil_monitor?.detections > 0, 'dot-yellow');
 }
 
 function renderSidebarDots(ov) {
@@ -380,20 +593,576 @@ function renderSidebarDots(ov) {
   setDot('sb-bash-dot', hasData, gs.bash_guard?.blocks > 0);
   setDot('sb-pi-dot', hasData, gs.prompt_injection?.blocks > 0);
   setDot('sb-sec-dot', hasData, (gs.secrets_guard?.blocks > 0) || (gs.secrets_guard?.redactions > 0));
+  setDot('sb-exfil-dot', hasData, gs.exfil_monitor?.detections > 0, 'dot-yellow');
 }
 
-function setDot(id, hasData, hasBlocks) {
+function setDot(id, hasData, hasBlocks, activeClass) {
   const el = document.getElementById(id);
   if (!el) return;
-  el.className = 'dot ' + (hasData ? (hasBlocks ? 'dot-red' : 'dot-green') : 'dot-gray');
+  el.className = 'dot ' + (hasData ? (hasBlocks ? (activeClass || 'dot-red') : 'dot-green') : 'dot-gray');
+}
+
+// =============================================
+// Home — Active Block Banner
+// =============================================
+function renderBlockBanner() {
+  const banner = document.getElementById('home-block-banner');
+  if (!banner) return;
+
+  // Find the most recent block event (scan_flagged from skill or prompt_injection, or binary_detected)
+  const blockEvent = localEvents.find(e =>
+    e.event === 'guard_check' &&
+    ((e.guard === 'skill' && (e.decision === 'scan_flagged' || e.decision === 'binary_detected')) ||
+     (e.guard === 'prompt_injection' && e.decision === 'scan_flagged'))
+  );
+
+  // Check if block was already removed
+  const unblockEvent = localEvents.find(e => e.event === 'block_removed');
+  if (unblockEvent && blockEvent && new Date(unblockEvent.ts) > new Date(blockEvent.ts)) {
+    banner.style.display = 'none';
+    return;
+  }
+
+  if (!blockEvent) {
+    banner.style.display = 'none';
+    return;
+  }
+
+  banner.style.display = '';
+  const guard = blockEvent.guard === 'skill' ? 'Skill Scanner' : 'Prompt Injection';
+  const guardPage = blockEvent.guard === 'skill' ? 'skill' : 'pi';
+  document.getElementById('home-block-title').textContent = `Agent Blocked — ${guard}`;
+  document.getElementById('home-block-reason').textContent = blockEvent.reason || 'A security threat was detected. All commands are blocked.';
+  document.getElementById('home-block-view-btn').setAttribute('onclick', `switchPage('${guardPage}')`);
+}
+
+async function removeBlock() {
+  if (!confirm('Remove the active block and allow OpenClaw to proceed?\n\nOnly do this if you have reviewed and resolved the security issue.')) return;
+  try {
+    const res = await fetch('/api/unblock', { method: 'POST' });
+    const data = await res.json();
+    if (data.error) { alert('Error: ' + data.error); return; }
+    document.getElementById('home-block-banner').style.display = 'none';
+    refresh();
+  } catch (e) {
+    alert('Failed to remove block: ' + e.message);
+  }
+}
+
+// =============================================
+// Anthropic API Key Box
+// =============================================
+async function checkAnthropicKey() {
+  try {
+    const res = await fetch('/api/anthropic-key');
+    const data = await res.json();
+    const box = document.getElementById('anthropic-key-box');
+    if (!data.hasKey) {
+      box.style.display = '';
+    } else {
+      box.style.display = 'none';
+    }
+  } catch {}
+}
+
+async function saveAnthropicKey() {
+  const input = document.getElementById('anthropic-key-input');
+  const msg = document.getElementById('anthropic-key-msg');
+  const key = input.value.trim();
+  if (!key) return;
+  try {
+    const res = await fetch('/api/anthropic-key', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+    const data = await res.json();
+    msg.style.display = '';
+    if (data.error) {
+      msg.style.color = '#f87171';
+      msg.textContent = data.error;
+    } else {
+      msg.style.color = '#4ade80';
+      msg.textContent = 'Key saved. Restart openclaw for prompt injection detection to activate.';
+      input.value = '';
+      setTimeout(() => { document.getElementById('anthropic-key-box').style.display = 'none'; }, 3000);
+    }
+  } catch (e) {
+    msg.style.display = '';
+    msg.style.color = '#f87171';
+    msg.textContent = 'Failed: ' + e.message;
+  }
+}
+
+// =============================================
+// Skill Scanner Page
+// =============================================
+function renderSkillPage() {
+  renderSkillStatus();
+  renderSkillActivityLog();
+}
+
+function renderSkillStatus() {
+  const container = document.getElementById('skill-status-body');
+  // Get skill events that tell us about skills (init_skill, scanning, scan_clean, scan_flagged, binary_detected, removed, modified, deleted)
+  const skillEvents = localEvents.filter(e => e.guard === 'skill' && e.decision !== 'allow' && e.decision !== 'init');
+
+  // Build latest status per skill by path
+  const skillMap = new Map();
+  // Process in chronological order (events are newest-first, so reverse)
+  const chronological = [...skillEvents].reverse();
+  for (const e of chronological) {
+    const sp = e.detail?.skill_path;
+    if (!sp) continue;
+    const name = e.detail?.skill_name || sp.split('/').pop();
+    if (!skillMap.has(sp)) {
+      skillMap.set(sp, { name, path: sp, dir: e.detail?.skill_dir || '', status: 'clean', reason: '', fileCount: 0, fileNames: [], binaryFiles: [], fileContents: [], ts: e.ts, decision: e.decision });
+    }
+    const skill = skillMap.get(sp);
+    skill.ts = e.ts; // update to latest timestamp
+    skill.decision = e.decision;
+    if (e.detail?.file_count !== undefined) skill.fileCount = e.detail.file_count;
+    if (e.detail?.file_names) skill.fileNames = e.detail.file_names;
+    if (e.detail?.binary_files) skill.binaryFiles = e.detail.binary_files;
+    if (e.detail?.file_contents) skill.fileContents = e.detail.file_contents;
+    // Determine status
+    if (e.decision === 'scan_flagged') { skill.status = 'malicious'; skill.reason = e.reason || ''; }
+    else if (e.decision === 'binary_detected') { skill.status = 'binary'; skill.reason = e.reason || ''; }
+    else if (e.decision === 'scan_clean') { skill.status = 'clean'; skill.reason = ''; }
+    else if (e.decision === 'removed' || e.decision === 'deleted') { skill.status = 'removed'; skill.reason = ''; }
+    else if (e.decision === 'modified') { skill.status = 'scanning'; }
+    else if (e.decision === 'scanning') { skill.status = 'scanning'; }
+    else if (e.decision === 'init_skill') {
+      skill.status = e.detail?.status || 'clean';
+      skill.reason = e.detail?.flagged_reason || '';
+    }
+  }
+
+  const skills = Array.from(skillMap.values()).filter(s => s.status !== 'removed');
+
+  if (skills.length === 0) {
+    container.innerHTML = '<div class="empty">No skills discovered yet. Skills appear when openclaw-secure is active.</div>';
+    return;
+  }
+
+  container.innerHTML = `<table><thead><tr>
+    <th style="width:40px"></th>
+    <th>Skill</th>
+    <th>Path</th>
+    <th>Status</th>
+    <th>Reason</th>
+    <th style="text-align:center">Files</th>
+    <th>Last Scanned</th>
+  </tr></thead><tbody>` +
+    skills.map((s, i) => {
+      const statusBadge = s.status === 'malicious'
+        ? '<span class="badge badge-red">Malicious</span>'
+        : s.status === 'binary'
+        ? '<span class="badge badge-red">Binary</span>'
+        : s.status === 'scanning'
+        ? '<span class="badge badge-blue">Scanning</span>'
+        : '<span class="badge badge-green">Clean</span>';
+      const deleteBtn = (s.status === 'malicious' || s.status === 'binary')
+        ? `<button class="btn btn-sm" style="color:#f87171;border-color:rgba(239,68,68,0.3)" onclick="deleteSkill('${esc(s.path.replace(/'/g, "\\'"))}')">Delete</button>`
+        : '';
+      const viewFiles = s.fileNames.length > 0 || s.fileContents.length > 0
+        ? `<span class="payload-toggle" onclick="openSkillFiles(${i})">${s.fileCount || s.fileNames.length}</span>`
+        : `<span style="color:#a1a1aa">${s.fileCount || 0}</span>`;
+      return `<tr>
+        <td>${deleteBtn}</td>
+        <td style="font-weight:500;font-family:ui-monospace,monospace;font-size:13px">${esc(s.name)}</td>
+        <td style="font-size:12px;color:#a1a1aa;max-width:250px;word-break:break-all">${esc(s.path)}</td>
+        <td>${statusBadge}</td>
+        <td style="font-size:12px;color:#a1a1aa;max-width:300px">${esc(s.reason)}</td>
+        <td style="text-align:center">${viewFiles}</td>
+        <td style="white-space:nowrap;color:#a1a1aa;font-size:12px">${formatTime(s.ts)}</td>
+      </tr>`;
+    }).join('') + '</tbody></table>';
+
+  // Store skills data for file modal
+  window._skillStatusData = skills;
+}
+
+function openSkillFiles(idx) {
+  const skill = window._skillStatusData?.[idx];
+  if (!skill) return;
+  const modal = document.getElementById('skill-file-modal');
+  const title = document.getElementById('skill-modal-title');
+  const content = document.getElementById('skill-modal-content');
+  title.textContent = 'Files in ' + skill.name;
+
+  if (skill.fileContents && skill.fileContents.length > 0) {
+    content.innerHTML = skill.fileContents.map(f =>
+      `<div style="border:1px solid rgba(255,255,255,0.1);border-radius:6px;overflow:hidden;margin-bottom:12px">
+        <div style="background:rgba(255,255,255,0.05);padding:6px 12px;font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa;border-bottom:1px solid rgba(255,255,255,0.1)">${esc(f.path)}</div>
+        <pre style="padding:8px 12px;font-size:12px;font-family:ui-monospace,monospace;white-space:pre-wrap;word-break:break-all;max-height:256px;overflow:auto;margin:0">${esc(f.content)}</pre>
+      </div>`
+    ).join('');
+  } else if (skill.fileNames && skill.fileNames.length > 0) {
+    content.innerHTML = '<div style="padding:8px 0">' + skill.fileNames.map(f =>
+      `<div style="padding:4px 0;font-family:ui-monospace,monospace;font-size:13px;color:#a1a1aa">${esc(f)}</div>`
+    ).join('') + '</div>';
+  } else {
+    content.innerHTML = '<div class="empty">No file data available for this skill.</div>';
+  }
+
+  modal.style.display = 'flex';
+}
+
+function closeSkillModal() {
+  document.getElementById('skill-file-modal').style.display = 'none';
+}
+
+async function deleteSkill(skillPath) {
+  if (!confirm('Delete this skill directory permanently?\n\n' + skillPath + '\n\nThis cannot be undone.')) return;
+  try {
+    const res = await fetch('/api/skill/delete', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ skillPath }),
+    });
+    const data = await res.json();
+    if (data.error) { alert('Error: ' + data.error); return; }
+    // Refresh
+    refresh();
+  } catch (e) {
+    alert('Failed to delete skill: ' + e.message);
+  }
+}
+
+function renderSkillActivityLog() {
+  const serverOnly = document.getElementById('skill-server-only')?.checked;
+  const blockedOnly = document.getElementById('skill-blocked-only')?.checked;
+  const container = document.getElementById('skill-table-body');
+
+  if (serverOnly) {
+    const filtered = serverEvents.filter(SERVER_GUARD.skill || (() => false));
+    if (filtered.length === 0) {
+      container.innerHTML = '<div class="empty">No server send events for skill scanner.</div>';
+      return;
+    }
+    container.innerHTML = `<table><thead><tr><th>Time</th><th>Destination</th><th>Event</th><th>Payload</th></tr></thead><tbody>` +
+      filtered.map((e, i) => {
+        const dest = e.destination === 'posthog' ? '<span class="badge badge-blue">PostHog</span>' : '<span class="badge badge-yellow">Supabase</span>';
+        const payloadStr = JSON.stringify(e.properties || e.payload || {}, null, 2);
+        const uid = 'skill-sv-' + i;
+        return `<tr>
+          <td style="white-space:nowrap;color:#a1a1aa">${formatTime(e.ts)}</td>
+          <td>${dest}</td>
+          <td>${esc(e.event || '-')}</td>
+          <td><span class="payload-toggle" onclick="document.getElementById('${uid}').classList.toggle('open')">View payload</span><div class="payload-content" id="${uid}">${esc(payloadStr)}</div></td>
+        </tr>`;
+      }).join('') + '</tbody></table>';
+  } else {
+    // Show all skill-specific events (not "allow" per-command checks)
+    const skillDecisions = new Set(['init', 'init_skill', 'scanning', 'scan_clean', 'scan_flagged', 'binary_detected', 'removed', 'modified', 'deleted']);
+    let filtered = localEvents.filter(e => e.guard === 'skill' && skillDecisions.has(e.decision));
+    if (blockedOnly) {
+      filtered = filtered.filter(e => e.decision === 'scan_flagged' || e.decision === 'binary_detected');
+    }
+    if (filtered.length === 0) {
+      container.innerHTML = '<div class="empty">' + (blockedOnly ? 'No flagged skill events.' : 'No skill activity yet.') + '</div>';
+      return;
+    }
+    container.innerHTML = `<table><thead><tr>
+      <th>Time</th>
+      <th>Event</th>
+      <th>Skill</th>
+      <th>Path</th>
+      <th>Files</th>
+      <th>Detail</th>
+    </tr></thead><tbody>` +
+      filtered.map((e, i) => {
+        const badgeMap = { init: 'badge-gray', init_skill: 'badge-gray', scanning: 'badge-blue', scan_clean: 'badge-green', scan_flagged: 'badge-red', binary_detected: 'badge-red', removed: 'badge-yellow', modified: 'badge-blue', deleted: 'badge-yellow' };
+        const labelMap = { init: 'Init', init_skill: 'Discovered', scanning: 'Scanning', scan_clean: 'Clean', scan_flagged: 'Flagged', binary_detected: 'Binary', removed: 'Removed', modified: 'Modified', deleted: 'Deleted' };
+        const badge = badgeMap[e.decision] || 'badge-gray';
+        const label = labelMap[e.decision] || e.decision;
+        const skillName = e.detail?.skill_name || '-';
+        const skillPath = e.detail?.skill_path || '';
+        const fileCount = e.detail?.file_count ?? e.detail?.file_names?.length ?? '';
+        const fileNames = e.detail?.file_names || [];
+        const binaryFiles = e.detail?.binary_files || [];
+        const uid = 'skill-log-' + i;
+        // Build detail string
+        let detailParts = [];
+        if (e.reason && e.decision !== 'init') detailParts.push(esc(e.reason));
+        let detailExtra = '';
+        if (fileNames.length > 0 || binaryFiles.length > 0 || e.detail) {
+          const detailObj = {};
+          if (fileNames.length > 0) detailObj.files = fileNames;
+          if (binaryFiles.length > 0) detailObj.binary_files = binaryFiles;
+          if (e.detail?.directories) detailObj.directories = e.detail.directories;
+          if (e.detail?.cached !== undefined) detailObj.cached = e.detail.cached;
+          if (Object.keys(detailObj).length > 0) {
+            detailExtra = ` <span class="payload-toggle" onclick="document.getElementById('${uid}').classList.toggle('open')">[detail]</span><div class="payload-content" id="${uid}">${esc(JSON.stringify(detailObj, null, 2))}</div>`;
+          }
+        }
+        return `<tr>
+          <td style="white-space:nowrap;color:#a1a1aa">${formatTime(e.ts)}</td>
+          <td><span class="badge ${badge}">${label}</span></td>
+          <td style="font-family:ui-monospace,monospace;font-size:13px">${esc(skillName)}</td>
+          <td style="font-size:12px;color:#a1a1aa;max-width:200px;word-break:break-all">${esc(skillPath)}</td>
+          <td style="text-align:center;color:#a1a1aa">${fileCount}</td>
+          <td style="font-size:12px;color:#a1a1aa;max-width:350px">${detailParts.join('') + detailExtra}</td>
+        </tr>`;
+      }).join('') + '</tbody></table>';
+  }
 }
 
+// =============================================
+// Prompt Injection Page
+// =============================================
+function renderPiPage() {
+  const serverOnly = document.getElementById('pi-server-only')?.checked;
+  const blockedOnly = document.getElementById('pi-blocked-only')?.checked;
+  const container = document.getElementById('pi-table-body');
+
+  if (serverOnly) {
+    const filtered = serverEvents.filter(SERVER_GUARD.pi || (() => false));
+    if (filtered.length === 0) {
+      container.innerHTML = '<div class="empty">No server send events for prompt injection guard.</div>';
+      return;
+    }
+    container.innerHTML = `<table><thead><tr><th>Time</th><th>Destination</th><th>Event</th><th>Payload</th></tr></thead><tbody>` +
+      filtered.map((e, i) => {
+        const dest = e.destination === 'posthog' ? '<span class="badge badge-blue">PostHog</span>' : '<span class="badge badge-yellow">Supabase</span>';
+        const payloadStr = JSON.stringify(e.properties || e.payload || {}, null, 2);
+        const uid = 'pi-sv-' + i;
+        return `<tr>
+          <td style="white-space:nowrap;color:#a1a1aa">${formatTime(e.ts)}</td>
+          <td>${dest}</td>
+          <td>${esc(e.event || '-')}</td>
+          <td><span class="payload-toggle" onclick="document.getElementById('${uid}').classList.toggle('open')">View payload</span><div class="payload-content" id="${uid}">${esc(payloadStr)}</div></td>
+        </tr>`;
+      }).join('') + '</tbody></table>';
+  } else {
+    // Show only PI-specific scan events (not per-command allow checks)
+    const piDecisions = new Set(['scanning', 'scan_clean', 'scan_flagged']);
+    let filtered = localEvents.filter(e => e.guard === 'prompt_injection' && piDecisions.has(e.decision));
+    if (blockedOnly) {
+      filtered = filtered.filter(e => e.decision === 'scan_flagged');
+    }
+    if (filtered.length === 0) {
+      container.innerHTML = '<div class="empty">' + (blockedOnly ? 'No flagged prompt injection events.' : 'No prompt injection scans yet. Scans trigger when matching command output is detected.') + '</div>';
+      return;
+    }
+    container.innerHTML = `<table><thead><tr>
+      <th>Time</th>
+      <th>Decision</th>
+      <th>Pattern Matched</th>
+      <th>Command</th>
+      <th>Haiku Decision</th>
+      <th>Haiku Reason</th>
+      <th>I/O</th>
+    </tr></thead><tbody>` +
+      filtered.map((e, i) => {
+        const badgeMap = { scanning: 'badge-blue', scan_clean: 'badge-green', scan_flagged: 'badge-red' };
+        const labelMap = { scanning: 'Scanning', scan_clean: 'Clean', scan_flagged: 'Flagged' };
+        const badge = badgeMap[e.decision] || 'badge-gray';
+        const label = labelMap[e.decision] || e.decision;
+        const pattern = e.detail?.matched_pattern || '-';
+        const modelOutput = e.detail?.model_output;
+        const haikuDecision = modelOutput ? (modelOutput.suspicious ? '<span class="badge badge-red">Suspicious</span>' : '<span class="badge badge-green">Clean</span>') : (e.decision === 'scanning' ? '<span class="badge badge-blue">Pending</span>' : '-');
+        const haikuReason = modelOutput?.reason || '-';
+        // I/O toggle
+        const uid = 'pi-io-' + i;
+        const modelInput = e.detail?.model_input || '';
+        const modelOutputStr = modelOutput ? JSON.stringify(modelOutput, null, 2) : '';
+        const hasIO = modelInput || modelOutputStr;
+        const ioHtml = hasIO
+          ? `<span class="payload-toggle" onclick="document.getElementById('${uid}').classList.toggle('open')">View</span><div class="payload-content" id="${uid}"><b>Input (command output):</b>\n${esc(typeof modelInput === 'string' ? modelInput.slice(0, 3000) : JSON.stringify(modelInput).slice(0, 3000))}\n\n<b>Haiku response:</b>\n${esc(modelOutputStr)}</div>`
+          : '-';
+        return `<tr>
+          <td style="white-space:nowrap;color:#a1a1aa">${formatTime(e.ts)}</td>
+          <td><span class="badge ${badge}">${label}</span></td>
+          <td style="font-family:ui-monospace,monospace;font-size:12px;max-width:200px;word-break:break-all">${esc(pattern)}</td>
+          <td class="cmd" style="max-width:250px" title="${esc(e.command || '')}">${esc(e.command || '-')}</td>
+          <td>${haikuDecision}</td>
+          <td style="font-size:12px;color:#a1a1aa;max-width:300px">${esc(haikuReason)}</td>
+          <td>${ioHtml}</td>
+        </tr>`;
+      }).join('') + '</tbody></table>';
+  }
+}
+
+// =============================================
+// Secrets Guard Page
+// =============================================
+function renderSecretsPage() {
+  const serverOnly = document.getElementById('secrets-server-only')?.checked;
+  const blockedOnly = document.getElementById('secrets-blocked-only')?.checked;
+  const container = document.getElementById('secrets-table-body');
+
+  if (serverOnly) {
+    const filtered = serverEvents.filter(SERVER_GUARD.secrets || (() => false));
+    if (filtered.length === 0) {
+      container.innerHTML = '<div class="empty">No server send events for secrets guard.</div>';
+      return;
+    }
+    container.innerHTML = `<table><thead><tr><th>Time</th><th>Destination</th><th>Event</th><th>Payload</th></tr></thead><tbody>` +
+      filtered.map((e, i) => {
+        const dest = e.destination === 'posthog' ? '<span class="badge badge-blue">PostHog</span>' : '<span class="badge badge-yellow">Supabase</span>';
+        const payloadStr = JSON.stringify(e.properties || e.payload || {}, null, 2);
+        const uid = 'sec-sv-' + i;
+        return `<tr>
+          <td style="white-space:nowrap;color:#a1a1aa">${formatTime(e.ts)}</td>
+          <td>${dest}</td>
+          <td>${esc(e.event || '-')}</td>
+          <td><span class="payload-toggle" onclick="document.getElementById('${uid}').classList.toggle('open')">View payload</span><div class="payload-content" id="${uid}">${esc(payloadStr)}</div></td>
+        </tr>`;
+      }).join('') + '</tbody></table>';
+  } else {
+    let filtered = localEvents.filter(e => (e.guard === 'env_var' || e.event === 'output_redacted') && e.decision !== 'allow');
+    if (blockedOnly) {
+      filtered = filtered.filter(e => e.decision === 'block' || e.event === 'output_redacted');
+    }
+    // Hide system commands
+    filtered = filtered.filter(e => !e.command || !/^(networksetup|arp|defaults)\b/.test(e.command.trim()));
+    if (filtered.length === 0) {
+      container.innerHTML = '<div class="empty">' + (blockedOnly ? 'No blocked/redacted events.' : 'No secrets guard events yet.') + '</div>';
+      return;
+    }
+    container.innerHTML = `<table><thead><tr>
+      <th>Time</th>
+      <th>Decision</th>
+      <th>Type</th>
+      <th>Pattern Matched</th>
+      <th>Vars / Secrets</th>
+      <th>Command</th>
+      <th>Reason</th>
+    </tr></thead><tbody>` +
+      filtered.map((e, i) => {
+        const badgeMap = { block: 'badge-red', redact: 'badge-yellow', log: 'badge-yellow', allow: 'badge-green' };
+        const labelMap = { block: 'Blocked', redact: 'Redacted', log: 'Logged', allow: 'Allowed' };
+        const badge = badgeMap[e.decision] || 'badge-gray';
+        const label = labelMap[e.decision] || (e.decision || '-');
+
+        // Type column
+        const type = e.detail?.type || (e.event === 'output_redacted' ? 'output_redacted' : '-');
+        const typeLabel = { env_dump: 'Env Dump', value_exposed: 'Value Exposed', lang_env_access: 'Lang API', env_ref_logged: 'Env Ref', output_redacted: 'Output Redacted' }[type] || type;
+
+        // Pattern matched
+        const pattern = e.detail?.matched_pattern || (e.detail?.matched_patterns ? e.detail.matched_patterns.join(', ') : (e.detail?.pattern_category || '-'));
+
+        // Vars / secrets
+        const vars = e.detail?.vars || e.detail?.secrets || [];
+        const varsStr = Array.isArray(vars) ? vars.join(', ') : String(vars);
+
+        const uid = 'sec-lc-' + i;
+        const detailObj = e.detail ? JSON.stringify(e.detail, null, 2) : '';
+        const detailHtml = detailObj ? ` <span class="payload-toggle" onclick="document.getElementById('${uid}').classList.toggle('open')">[detail]</span><div class="payload-content" id="${uid}">${esc(detailObj)}</div>` : '';
+
+        return `<tr>
+          <td style="white-space:nowrap;color:#a1a1aa">${formatTime(e.ts)}</td>
+          <td><span class="badge ${badge}">${label}</span></td>
+          <td style="font-size:12px"><span class="badge badge-gray">${esc(typeLabel)}</span></td>
+          <td style="font-family:ui-monospace,monospace;font-size:11px;max-width:200px;word-break:break-all">${esc(pattern)}</td>
+          <td style="font-family:ui-monospace,monospace;font-size:12px;color:#facc15;max-width:180px;word-break:break-all">${esc(varsStr)}</td>
+          <td class="cmd" style="max-width:250px" title="${esc(e.command || '')}">${esc(e.command || '-')}</td>
+          <td style="font-size:12px;color:#a1a1aa;max-width:300px">${esc(e.reason || '-')}${detailHtml}</td>
+        </tr>`;
+      }).join('') + '</tbody></table>';
+  }
+}
+
+// =============================================
+// Exfil Allowlist
+// =============================================
+let exfilAllowlist = { enabled: false, domains: [] };
+
+async function loadExfilAllowlist() {
+  try {
+    const res = await fetch('/api/exfil-allowlist');
+    exfilAllowlist = await res.json();
+  } catch { exfilAllowlist = { enabled: false, domains: [] }; }
+  renderExfilAllowlist();
+}
+
+function renderExfilAllowlist() {
+  const al = exfilAllowlist || { enabled: false, domains: [] };
+  const statusBadge = document.getElementById('exfil-al-status-badge');
+  const toggleBtn = document.getElementById('exfil-al-toggle-btn');
+  const domainsDiv = document.getElementById('exfil-al-domains');
+  if (!statusBadge) return;
+
+  if (al.enabled) {
+    statusBadge.innerHTML = '<span class="badge badge-green">Enabled</span>';
+    toggleBtn.textContent = 'Disable';
+    toggleBtn.style.color = '#facc15';
+    toggleBtn.style.borderColor = 'rgba(250,204,21,0.3)';
+  } else {
+    statusBadge.innerHTML = '<span class="badge badge-gray">Disabled</span>';
+    toggleBtn.textContent = 'Enable';
+    toggleBtn.style.color = '#4ade80';
+    toggleBtn.style.borderColor = 'rgba(34,197,94,0.3)';
+  }
+
+  if (al.domains.length === 0) {
+    domainsDiv.innerHTML = '<div style="font-size:13px;color:#52525b;padding:8px 0">No domains configured.</div>';
+  } else {
+    domainsDiv.innerHTML = al.domains.map(d =>
+      `<div style="display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:4px 10px;margin:3px 4px 3px 0;font-size:13px;font-family:ui-monospace,monospace">
+        ${esc(d)}
+        <span style="cursor:pointer;color:#a1a1aa;font-size:16px;line-height:1" onclick="removeExfilDomain('${esc(d)}')" title="Remove">&times;</span>
+      </div>`
+    ).join('');
+  }
+}
+
+async function addExfilDomain() {
+  const input = document.getElementById('exfil-al-input');
+  const domain = (input.value || '').trim();
+  if (!domain) return;
+  try {
+    const res = await fetch('/api/exfil-allowlist', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'add', domain }),
+    });
+    const data = await res.json();
+    if (data.allowlist) exfilAllowlist = data.allowlist;
+    input.value = '';
+    renderExfilAllowlist();
+  } catch (e) { alert('Failed: ' + e.message); }
+}
+
+async function removeExfilDomain(domain) {
+  try {
+    const res = await fetch('/api/exfil-allowlist', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'remove', domain }),
+    });
+    const data = await res.json();
+    if (data.allowlist) exfilAllowlist = data.allowlist;
+    renderExfilAllowlist();
+  } catch (e) { alert('Failed: ' + e.message); }
+}
+
+async function toggleExfilAllowlist() {
+  const action = exfilAllowlist.enabled ? 'disable' : 'enable';
+  try {
+    const res = await fetch('/api/exfil-allowlist', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action }),
+    });
+    const data = await res.json();
+    if (data.allowlist) exfilAllowlist = data.allowlist;
+    renderExfilAllowlist();
+  } catch (e) { alert('Failed: ' + e.message); }
+}
+
+const SYSTEM_COMMANDS = /^(networksetup|arp|defaults)\b/;
+
 function renderGuardPage(guard) {
   const serverOnly = document.getElementById(guard + '-server-only')?.checked;
+  const blockedOnly = document.getElementById(guard + '-blocked-only')?.checked;
+  const showPassed = document.getElementById(guard + '-show-passed')?.checked;
+  const showSystem = document.getElementById(guard + '-show-system')?.checked;
   const container = document.getElementById(guard + '-table-body');
 
   if (serverOnly) {
-    // Show server send events filtered to this guard
     const filtered = serverEvents.filter(SERVER_GUARD[guard] || (() => false));
     if (filtered.length === 0) {
       container.innerHTML = '<div class="empty">No server send events for this guard.</div>';
@@ -412,23 +1181,38 @@ function renderGuardPage(guard) {
         </tr>`;
       }).join('') + '</tbody></table>';
   } else {
-    // Show local events filtered to this guard
-    const filterFn = GUARD_EVENTS[guard] || (() => false);
-    const filtered = localEvents.filter(e => filterFn(e));
+    const guardAllFn = GUARD_EVENTS[guard] || (() => false);
+    const guardBlockedFn = GUARD_BLOCKED[guard] || (() => false);
+    let filtered;
+    if (blockedOnly) {
+      filtered = localEvents.filter(e => guardBlockedFn(e));
+    } else {
+      filtered = localEvents.filter(e => guardAllFn(e));
+    }
+    // Hide system commands (networksetup, arp, defaults) unless checkbox is checked
+    if (!showSystem) {
+      filtered = filtered.filter(e => !e.command || !SYSTEM_COMMANDS.test(e.command.trim()));
+    }
     if (filtered.length === 0) {
-      container.innerHTML = '<div class="empty">No events for this guard yet. Events appear when openclaw-secure is active.</div>';
+      container.innerHTML = '<div class="empty">' + (blockedOnly ? 'No blocked events for this guard.' : 'No events yet. Events appear when openclaw-secure is active.') + '</div>';
       return;
     }
-    container.innerHTML = `<table><thead><tr><th>Time</th><th>Decision</th><th>Command</th><th>Detail</th></tr></thead><tbody>` +
-      filtered.map(e => {
-        const badge = e.decision === 'block' ? 'badge-red' : e.decision === 'redact' ? 'badge-yellow' : 'badge-green';
-        const label = e.decision === 'block' ? 'Blocked' : e.decision === 'redact' ? 'Redacted' : 'Allowed';
-        const detail = e.reason ? esc(e.reason) : (e.secrets_count ? `${e.secrets_count} secret(s) redacted` : '');
+    const cmdHeader = guard === 'skill' ? 'Skill File' : 'Command';
+    container.innerHTML = `<table><thead><tr><th>Time</th><th>Decision</th><th>${cmdHeader}</th><th>Detail</th></tr></thead><tbody>` +
+      filtered.map((e, i) => {
+        const badgeMap = { block: 'badge-red', scan_flagged: 'badge-red', binary_detected: 'badge-red', redact: 'badge-yellow', log: 'badge-yellow', scanning: 'badge-blue', scan_clean: 'badge-green', allow: 'badge-green', init: 'badge-gray' };
+        const labelMap = { block: 'Blocked', scan_flagged: 'Flagged', binary_detected: 'Binary', redact: 'Redacted', log: 'Logged', scanning: 'Scanning', scan_clean: 'Clean', allow: 'Allowed', init: 'Init' };
+        const badge = badgeMap[e.decision] || 'badge-gray';
+        const label = labelMap[e.decision] || (e.decision || '-');
+        const reason = e.reason ? esc(e.reason) : (e.secrets_count ? `${e.secrets_count} secret(s) redacted` : '');
+        const detailObj = e.detail ? JSON.stringify(e.detail, null, 2) : '';
+        const uid = guard + '-lc-' + i;
+        const detailHtml = reason + (detailObj ? ` <span class="payload-toggle" onclick="document.getElementById('${uid}').classList.toggle('open')">[detail]</span><div class="payload-content" id="${uid}">${esc(detailObj)}</div>` : '');
         return `<tr>
           <td style="white-space:nowrap;color:#a1a1aa">${formatTime(e.ts)}</td>
           <td><span class="badge ${badge}">${label}</span></td>
           <td class="cmd" title="${esc(e.command || '')}">${esc(e.command || '-')}</td>
-          <td style="font-size:12px;color:#a1a1aa;max-width:300px;overflow:hidden;text-overflow:ellipsis">${detail}</td>
+          <td style="font-size:12px;color:#a1a1aa;max-width:400px">${detailHtml}</td>
         </tr>`;
       }).join('') + '</tbody></table>';
   }
@@ -457,8 +1241,236 @@ function esc(s) {
   return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
 }
 
+// =============================================
+// Secret Scanner
+// =============================================
+let scanData = null; // last scan results from API
+
+async function loadScanStatus() {
+  try {
+    const res = await fetch('/api/scan');
+    const data = await res.json();
+    renderScanStatus(data);
+  } catch (e) {
+    console.error('Failed to load scan status:', e);
+  }
+}
+
+function renderScanStatus(data) {
+  const el = (id) => document.getElementById(id);
+  // TruffleHog status
+  if (el('scan-thog-status')) {
+    el('scan-thog-status').innerHTML = data.installed ? 'Installed' : 'Not installed<div style="font-size:11px;color:#a1a1aa;margin-top:4px">Run: <code style="background:#27272a;padding:2px 6px;border-radius:4px">brew install trufflehog</code></div>';
+    el('scan-thog-status').style.color = data.installed ? '#4ade80' : '#f87171';
+  }
+  // Home page summary + findings from fresh scan data
+  if (data.fresh) {
+    const f = data.fresh;
+    const verified = (f.findings || []).filter(x => x.verified).length;
+    const total = (f.findings || []).length;
+    const ago = f.summary && f.summary.scannedAt ? timeAgo(f.summary.scannedAt) : 'Just now';
+    if (el('scan-last-time')) el('scan-last-time').textContent = ago;
+    if (el('scan-verified')) el('scan-verified').textContent = verified;
+    if (el('scan-total')) el('scan-total').textContent = total;
+    if (el('home-scan-status')) {
+      if (verified > 0) {
+        el('home-scan-status').innerHTML = `<span style="color:#f87171">${verified} live secret${verified > 1 ? 's' : ''} found</span>`;
+      } else if (total > 0) {
+        el('home-scan-status').textContent = `${total} potential finding${total > 1 ? 's' : ''} (none verified)`;
+      } else {
+        el('home-scan-status').innerHTML = '<span style="color:#4ade80">No hardcoded secrets found</span>';
+      }
+    }
+    if (el('home-scan-detail')) {
+      el('home-scan-detail').textContent = `Last scan: ${ago}` + (f.summary ? ` · ${f.summary.targetsScanned || 0} directories scanned` : '');
+    }
+    // Reset Run Scan button
+    if (el('scan-run-btn')) { el('scan-run-btn').disabled = false; el('scan-run-btn').innerHTML = '<svg style="width:14px;height:14px" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Run Scan'; }
+    // Populate findings table if not already set by a manual scan
+    if (!scanData) {
+      scanData = f;
+      renderScanFindings();
+    }
+  } else if (data.scanning) {
+    if (el('scan-last-time')) el('scan-last-time').textContent = 'Scanning...';
+    if (el('scan-verified')) el('scan-verified').textContent = '-';
+    if (el('scan-total')) el('scan-total').textContent = '-';
+    if (el('home-scan-status')) el('home-scan-status').textContent = 'Scanning directories for secrets...';
+    if (el('home-scan-detail')) el('home-scan-detail').textContent = '';
+    // Update scan page too
+    if (el('scan-findings-body')) el('scan-findings-body').innerHTML = '<div class="empty">Scanning... this may take a minute.</div>';
+    if (el('scan-run-btn')) { el('scan-run-btn').disabled = true; el('scan-run-btn').innerHTML = '<svg style="width:14px;height:14px;animation:spin 1s linear infinite" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> Scanning...'; }
+    if (!document.getElementById('spin-style')) { const style = document.createElement('style'); style.id = 'spin-style'; style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }'; document.head.appendChild(style); }
+    if (el('scan-solve-btn')) el('scan-solve-btn').style.display = 'none';
+    if (el('scan-select-all-wrap')) el('scan-select-all-wrap').style.display = 'none';
+  } else {
+    if (el('scan-last-time')) el('scan-last-time').textContent = 'Never';
+    if (el('scan-verified')) el('scan-verified').textContent = '-';
+    if (el('scan-total')) el('scan-total').textContent = '-';
+    if (el('home-scan-status')) el('home-scan-status').textContent = data.installed ? 'No scan data yet. Scan starting...' : 'TruffleHog not installed. Install with: brew install trufflehog';
+    if (el('home-scan-detail')) el('home-scan-detail').textContent = '';
+  }
+}
+
+async function runScan() {
+  const btn = document.getElementById('scan-run-btn');
+  btn.disabled = true;
+  btn.innerHTML = '<svg style="width:14px;height:14px;animation:spin 1s linear infinite" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> Scanning...';
+  if (!document.getElementById('spin-style')) {
+    const style = document.createElement('style');
+    style.id = 'spin-style';
+    style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
+    document.head.appendChild(style);
+  }
+  document.getElementById('scan-findings-body').innerHTML = '<div class="empty">Scanning... this may take a minute.</div>';
+  try {
+    await fetch('/api/scan', { method: 'POST' });
+    // Scan runs in background on server — poll until done
+    await pollScanResults();
+  } catch (e) {
+    document.getElementById('scan-findings-body').innerHTML = '<div class="empty">Scan request sent. Polling for results...</div>';
+    await pollScanResults();
+  }
+}
+
+async function pollScanResults() {
+  const btn = document.getElementById('scan-run-btn');
+  const maxPolls = 120; // 4 minutes max (2s intervals)
+  for (let i = 0; i < maxPolls; i++) {
+    await new Promise(r => setTimeout(r, 2000));
+    try {
+      const res = await fetch('/api/scan');
+      const data = await res.json();
+      if (data.scanning) continue; // still in progress
+      // Scan complete — use fresh results if available
+      if (data.fresh) {
+        scanData = data.fresh;
+      }
+      // Update status cards
+      renderScanStatus(data);
+      if (scanData && scanData.targets) {
+        document.getElementById('scan-targets-section').style.display = '';
+        document.getElementById('scan-targets-list').innerHTML = scanData.targets.map(t =>
+          `<div style="display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;color:#a1a1aa"><span style="color:#4ade80">&#10003;</span> ${esc(t.label)}</div>`
+        ).join('');
+      }
+      renderScanFindings();
+      btn.disabled = false;
+      btn.innerHTML = '<svg style="width:14px;height:14px" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Run Scan';
+      return;
+    } catch {}
+  }
+  btn.disabled = false;
+  btn.innerHTML = '<svg style="width:14px;height:14px" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Run Scan';
+  document.getElementById('scan-findings-body').innerHTML = '<div class="empty">Scan timed out. Check server logs.</div>';
+}
+
+function renderScanFindings() {
+  const container = document.getElementById('scan-findings-body');
+  const solveBtn = document.getElementById('scan-solve-btn');
+  const selectAllWrap = document.getElementById('scan-select-all-wrap');
+  if (!scanData || !scanData.findings || scanData.findings.length === 0) {
+    container.innerHTML = '<div class="empty">No findings. Your codebase is clean!</div>';
+    solveBtn.style.display = 'none';
+    selectAllWrap.style.display = 'none';
+    return;
+  }
+  const findings = scanData.findings;
+  const hasVerified = findings.some(f => f.verified);
+  solveBtn.style.display = hasVerified ? '' : 'none';
+  selectAllWrap.style.display = hasVerified ? '' : 'none';
+  container.innerHTML = `<table><thead><tr>
+    <th style="width:32px"></th>
+    <th>Detector</th>
+    <th>File</th>
+    <th>Line</th>
+    <th>Status</th>
+    <th>Secret (redacted)</th>
+    <th>Scan Target</th>
+  </tr></thead><tbody>` +
+    findings.map((f, i) => {
+      const verified = f.verified ? '<span class="badge badge-red">LIVE</span>' : '<span class="badge badge-gray">Inactive</span>';
+      const checkDisabled = f.verified ? '' : 'disabled';
+      return `<tr>
+        <td><input type="checkbox" class="scan-check" data-index="${f.index}" ${checkDisabled}></td>
+        <td style="font-weight:500">${esc(f.detectorName)}</td>
+        <td class="cmd" title="${esc(f.file || '')}">${esc(f.file ? f.file.replace(/^\/Users\/[^/]+/, '~') : '-')}</td>
+        <td style="color:#a1a1aa">${f.line || '-'}</td>
+        <td>${verified}</td>
+        <td style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa">${esc(f.raw)}</td>
+        <td style="font-size:12px;color:#a1a1aa">${esc(f.scanTarget || '')}</td>
+      </tr>`;
+    }).join('') + '</tbody></table>';
+}
+
+function toggleScanSelectAll() {
+  const checked = document.getElementById('scan-select-all')?.checked;
+  document.querySelectorAll('.scan-check:not(:disabled)').forEach(cb => { cb.checked = checked; });
+}
+
+async function runSolve() {
+  const checks = document.querySelectorAll('.scan-check:checked');
+  const indices = [...checks].map(cb => parseInt(cb.dataset.index));
+  if (indices.length === 0) {
+    alert('No findings selected. Check the boxes next to verified secrets to scrub.');
+    return;
+  }
+  if (!confirm(`Replace ${indices.length} secret(s) in files with dummy values? This cannot be undone.`)) return;
+  const btn = document.getElementById('scan-solve-btn');
+  btn.disabled = true;
+  btn.textContent = 'Scrubbing...';
+  try {
+    const res = await fetch('/api/solve', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ indices }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      alert('Solve error: ' + data.error);
+      return;
+    }
+    // Show results
+    const resultsDiv = document.getElementById('scan-solve-results');
+    const resultsBody = document.getElementById('scan-solve-body');
+    resultsDiv.style.display = '';
+    const succeeded = (data.results || []).filter(r => r.success);
+    const failed = (data.results || []).filter(r => !r.success);
+    resultsBody.innerHTML = `<table><thead><tr><th>Status</th><th>File</th><th>Detector</th><th>Original</th><th>Replaced With</th></tr></thead><tbody>` +
+      (data.results || []).map(r => {
+        const status = r.success ? '<span class="badge badge-green">Replaced</span>' : '<span class="badge badge-red">Failed</span>';
+        return `<tr>
+          <td>${status}</td>
+          <td class="cmd">${esc((r.file || '').replace(/^\/Users\/[^/]+/, '~'))}</td>
+          <td>${esc(r.detectorName || '')}</td>
+          <td style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa">${esc(r.original || r.error || '')}</td>
+          <td style="font-family:ui-monospace,monospace;font-size:12px;color:#4ade80">${esc(r.dummy || '')}</td>
+        </tr>`;
+      }).join('') + '</tbody></table>';
+    if (succeeded.length > 0) {
+      resultsBody.innerHTML += `<div style="padding:16px;font-size:13px;color:#a1a1aa">
+        ${succeeded.length} secret(s) replaced with dummy values. Remember to rotate the REAL secrets in their original services.
+      </div>`;
+    }
+    // Clear scan data since files changed
+    scanData = null;
+    document.getElementById('scan-findings-body').innerHTML = '<div class="empty">Scan data cleared after scrub. Run a new scan to verify.</div>';
+    document.getElementById('scan-solve-btn').style.display = 'none';
+    document.getElementById('scan-select-all-wrap').style.display = 'none';
+    // Refresh home summary
+    loadScanStatus();
+  } catch (e) {
+    alert('Solve failed: ' + e.message);
+  } finally {
+    btn.disabled = false;
+    btn.innerHTML = '<svg style="width:14px;height:14px" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> Scrub Selected';
+  }
+}
+
 refresh();
 setInterval(refresh, 10000);
 </script>
 </body>
 </html>
+
+