@panguard-ai/panguard-guard 1.4.5 → 2.0.0

package/dist/dashboard/index.js

@@ -15,7 +15,7 @@
  */
 import { createServer } from 'node:http';
 import { randomBytes, timingSafeEqual } from 'node:crypto';
-import { existsSync, readFileSync } from 'node:fs';
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
 import { join } from 'node:path';
 import { homedir } from 'node:os';
 import { WebSocketServer } from 'ws';
@@ -26,6 +26,7 @@ const logger = createLogger('panguard-guard:dashboard');
 const RATE_LIMIT_MAX = 120;
 const RATE_LIMIT_WINDOW_MS = 60_000;
 const MAX_WS_CLIENTS = 20;
+const MAX_WS_PER_IP = 5;
 /**
  * Dashboard Server manages the HTTP + WebSocket real-time dashboard
  */
@@ -73,12 +74,34 @@ export class DashboardServer {
                     return;
                 }
                 const origin = req.headers.origin ?? '';
-                if (origin && !origin.includes('127.0.0.1') && !origin.includes('localhost')) {
-                    logger.warn(`Rejected WebSocket from origin: ${origin}`);
+                // Strict origin check: must be exactly loopback or absent (native clients)
+                if (origin) {
+                    try {
+                        const parsed = new URL(origin);
+                        const isLoopback = parsed.hostname === '127.0.0.1' ||
+                            parsed.hostname === 'localhost' ||
+                            parsed.hostname === '::1';
+                        if (!isLoopback) {
+                            logger.warn(`Rejected WebSocket from non-loopback origin: ${origin}`);
+                            ws.close();
+                            return;
+                        }
+                    }
+                    catch {
+                        logger.warn(`Rejected WebSocket with malformed origin: ${origin}`);
+                        ws.close();
+                        return;
+                    }
+                }
+                // Per-IP connection limit
+                const clientIP = req.socket.remoteAddress ?? 'unknown';
+                const ipCount = [...this.wsClients].filter((c) => c.ip === clientIP).length;
+                if (ipCount >= MAX_WS_PER_IP) {
+                    logger.warn(`Max WS connections per IP reached for ${clientIP}`);
                     ws.close();
                     return;
                 }
-                const client = { ws, alive: true, connectedAt: Date.now() };
+                const client = { ws, alive: true, connectedAt: Date.now(), ip: clientIP };
                 this.wsClients.add(client);
                 this.sendToClient(client, {
                     type: 'status_update',
@@ -97,7 +120,7 @@ export class DashboardServer {
             });
             this.server.listen(this.port, '127.0.0.1', () => {
                 logger.info(`Dashboard started on http://127.0.0.1:${this.port}`);
-                logger.debug(`Dashboard auth token: ${this.authToken.slice(0, 8)}...`);
+                // Token never logged — auth via HttpOnly cookie only
                 if (this.relayConfig) {
                     this.startRelayClient(this.relayConfig);
                 }
@@ -174,6 +197,8 @@ export class DashboardServer {
         return this.authToken;
     }
     handleRequest(req, res) {
+        // Generate per-request nonce for CSP — eliminates unsafe-inline for scripts
+        const nonce = randomBytes(16).toString('base64');
         res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:' + this.port);
         res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
         res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
@@ -181,7 +206,7 @@ export class DashboardServer {
         res.setHeader('X-Content-Type-Options', 'nosniff');
         res.setHeader('X-XSS-Protection', '1; mode=block');
         res.setHeader('Referrer-Policy', 'no-referrer');
-        res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; connect-src 'self' ws://127.0.0.1:* ws://localhost:*");
+        res.setHeader('Content-Security-Policy', `default-src 'self'; script-src 'nonce-${nonce}'; style-src 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; connect-src 'self' ws://127.0.0.1:* ws://localhost:*`);
         if (req.method === 'OPTIONS') {
             res.writeHead(204);
             res.end();
@@ -195,13 +220,19 @@ export class DashboardServer {
         }
         const url = req.url ?? '/';
         if (url === '/') {
-            this.serveIndex(res);
+            this.serveIndex(res, nonce);
             return;
         }
         if (url.startsWith('/api/')) {
             const authHeader = req.headers.authorization ?? '';
+            // Parse auth token from: 1) Authorization header, 2) HttpOnly cookie, 3) query param (deprecated)
+            const cookieToken = (req.headers.cookie ?? '')
+                .split(';')
+                .map((c) => c.trim())
+                .find((c) => c.startsWith('panguard_auth='))
+                ?.split('=')[1] ?? '';
             const queryToken = new URL(url, `http://127.0.0.1:${this.port}`).searchParams.get('token');
-            const providedToken = authHeader.replace('Bearer ', '') || queryToken;
+            const providedToken = authHeader.replace('Bearer ', '') || cookieToken || queryToken;
             if (!providedToken ||
                 providedToken.length !== this.authToken.length ||
                 !timingSafeEqual(Buffer.from(providedToken), Buffer.from(this.authToken))) {
@@ -254,6 +285,12 @@ export class DashboardServer {
                     this.handleThreatCloudGet(res);
                 }
                 break;
+            case '/api/loaded-rules':
+                this.handleLoadedRulesApi(res);
+                break;
+            case '/api/proxy-verdicts':
+                this.handleProxyVerdictsApi(res);
+                break;
             case '/api/installed-skills':
                 this.handleInstalledSkillsApi(res).catch((err) => {
                     logger.error(`handleInstalledSkillsApi error: ${err instanceof Error ? err.message : String(err)}`);
@@ -268,6 +305,13 @@ export class DashboardServer {
     }
     checkRateLimit(ip) {
         const now = Date.now();
+        // Periodic cleanup of expired entries to prevent unbounded growth
+        if (this.rateLimits.size > 100) {
+            for (const [key, val] of this.rateLimits) {
+                if (now > val.resetAt)
+                    this.rateLimits.delete(key);
+            }
+        }
         const entry = this.rateLimits.get(ip);
         if (!entry || now > entry.resetAt) {
             this.rateLimits.set(ip, { count: 1, resetAt: now + RATE_LIMIT_WINDOW_MS });
@@ -276,10 +320,14 @@ export class DashboardServer {
         entry.count++;
         return entry.count <= RATE_LIMIT_MAX;
     }
-    serveIndex(res) {
-        // Embed auth token in HTML so dashboard always authenticates, even without #token= in URL
-        const html = DASHBOARD_HTML.replace('var lang=', `var __tk='${this.authToken}';var lang=`);
-        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+    serveIndex(res, nonce) {
+        // Set auth token as HttpOnly cookie — never exposed in HTML source or JS
+        // Inject nonce into <script> tag for CSP compliance
+        const html = DASHBOARD_HTML.replace('<script>', `<script nonce="${nonce}">`);
+        res.writeHead(200, {
+            'Content-Type': 'text/html; charset=utf-8',
+            'Set-Cookie': `panguard_auth=${this.authToken}; HttpOnly; SameSite=Strict; Path=/`,
+        });
         res.end(html);
     }
     jsonResponse(res, data, statusCode = 200) {
@@ -387,7 +435,28 @@ export class DashboardServer {
     static isValidEndpointUrl(url) {
         try {
             const parsed = new URL(url);
-            return ((parsed.protocol === 'https:' || parsed.protocol === 'http:') && parsed.hostname.length > 0);
+            if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:')
+                return false;
+            if (parsed.hostname.length === 0)
+                return false;
+            // Block private/internal IPs to prevent SSRF
+            const h = parsed.hostname.toLowerCase();
+            if (h === 'localhost' ||
+                h.startsWith('127.') ||
+                h.startsWith('10.') ||
+                h.startsWith('192.168.') ||
+                h === '169.254.169.254' ||
+                h.startsWith('169.254.') ||
+                h === '[::1]' ||
+                h === '0.0.0.0')
+                return false;
+            // Block 172.16.0.0/12
+            if (h.startsWith('172.')) {
+                const second = parseInt(h.split('.')[1] ?? '0', 10);
+                if (second >= 16 && second <= 31)
+                    return false;
+            }
+            return true;
         }
         catch {
             return false;
@@ -441,7 +510,8 @@ export class DashboardServer {
             }
         }
         let clientId = '';
-        const clientIdPath = join(dataDir, 'client-id');
+        // Client ID lives in ~/.panguard/client-id (not dataDir which is ~/.panguard-guard)
+        const clientIdPath = join(homedir(), '.panguard', 'client-id');
         if (existsSync(clientIdPath)) {
             try {
                 const fullId = readFileSync(clientIdPath, 'utf-8').trim();
@@ -501,6 +571,83 @@ export class DashboardServer {
             }
         });
     }
+    handleLoadedRulesApi(res) {
+        try {
+            const rulesDir = join(this.getConfig?.()?.dataDir ?? join(homedir(), '.panguard-guard'), '..', 'agent-threat-rules', 'rules');
+            // Try multiple rule locations
+            const candidates = [rulesDir, join(homedir(), '.panguard-guard', 'rules')];
+            // Also try monorepo atr package
+            candidates.push(join(homedir(), '.panguard-guard', 'atr', 'rules'));
+            const rules = [];
+            for (const dir of candidates) {
+                if (!existsSync(dir))
+                    continue;
+                try {
+                    const files = readdirSync(dir).filter((f) => f.endsWith('.yaml') || f.endsWith('.yml'));
+                    for (const file of files) {
+                        try {
+                            const content = readFileSync(join(dir, file), 'utf-8');
+                            // Quick YAML parse for id, title, severity, category, description
+                            const id = content.match(/^id:\s*["']?([^"'\n]+)/m)?.[1]?.trim() ?? file;
+                            const title = content.match(/^title:\s*["']?([^"'\n]+)/m)?.[1]?.trim() ?? '';
+                            const severity = content.match(/^severity:\s*["']?([^"'\n]+)/m)?.[1]?.trim() ?? 'medium';
+                            const category = content.match(/category:\s*["']?([^"'\n]+)/m)?.[1]?.trim() ?? 'unknown';
+                            const description = content.match(/^description:\s*["']?([^"'\n]+)/m)?.[1]?.trim() ?? '';
+                            if (id && title) {
+                                rules.push({
+                                    id,
+                                    title,
+                                    severity,
+                                    category,
+                                    description: description.slice(0, 200),
+                                });
+                            }
+                        }
+                        catch {
+                            /* skip unparseable files */
+                        }
+                    }
+                    if (rules.length > 0)
+                        break; // Found rules in this dir
+                }
+                catch {
+                    /* skip unreadable dirs */
+                }
+            }
+            this.jsonResponse(res, { rules, total: rules.length });
+        }
+        catch {
+            this.jsonResponse(res, { rules: [], total: 0 });
+        }
+    }
+    handleProxyVerdictsApi(res) {
+        const verdictLog = join(homedir(), '.panguard-guard', 'proxy-verdicts.jsonl');
+        if (!existsSync(verdictLog)) {
+            this.jsonResponse(res, { verdicts: [], total: 0 });
+            return;
+        }
+        try {
+            const raw = readFileSync(verdictLog, 'utf-8');
+            const lines = raw.trim().split('\n').filter(Boolean);
+            // Return last 50 verdicts, newest first
+            const verdicts = lines
+                .slice(-50)
+                .reverse()
+                .map((line) => {
+                try {
+                    return JSON.parse(line);
+                }
+                catch {
+                    return null;
+                }
+            })
+                .filter(Boolean);
+            this.jsonResponse(res, { verdicts, total: lines.length });
+        }
+        catch {
+            this.jsonResponse(res, { verdicts: [], total: 0 });
+        }
+    }
     async handleInstalledSkillsApi(res) {
         const dataDir = this.getConfig?.()?.dataDir ?? join(homedir(), '.panguard-guard');
         const whitelistPath = join(dataDir, 'skill-whitelist.json');
@@ -626,14 +773,17 @@ const DASHBOARD_HTML = `<!DOCTYPE html>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Panguard Guard Dashboard</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
 <style>
 :root{--sage:#8B9A8E;--s0:#1A1614;--s1:#242220;--s2:#2E2C2A;--bd:#3A3836;--t1:#F5F1E8;--tm:#A09A94;--ok:#2ED573;--warn:#FBBF24;--bad:#EF4444;--glow:0 0 20px rgba(139,154,142,.15);--r:12px}
 *{margin:0;padding:0;box-sizing:border-box}
-body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--s0);color:var(--t1);display:flex;height:100vh;overflow:hidden}
+body{font-family:'Inter','Noto Sans TC',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--s0);color:var(--t1);display:flex;height:100vh;overflow:hidden}
 .sb{width:220px;background:var(--s1);border-right:1px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0}
 .sb-brand{padding:20px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px}
 .sb-brand svg{width:28px;height:28px;flex-shrink:0}
-.sb-brand span{font-size:14px;font-weight:700;color:var(--t1);letter-spacing:.5px}
+.sb-brand span{font-family:'Space Grotesk','Noto Sans TC',sans-serif;font-size:14px;font-weight:700;color:var(--t1);letter-spacing:.5px}
 .sb-nav{flex:1;padding:12px 0;overflow-y:auto}
 .ni{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;color:var(--tm);font-size:13px;font-weight:500;transition:all .15s;border-left:3px solid transparent}
 .ni:hover{background:var(--s2);color:var(--t1)}
@@ -646,19 +796,19 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 .lb{margin-top:8px;background:var(--s2);color:var(--tm);border:1px solid var(--bd);padding:4px 10px;border-radius:20px;cursor:pointer;font-size:11px}
 .mn{flex:1;overflow-y:auto;padding:24px 28px}
 .pg{display:none}.pg.on{display:block}
-.pt{font-size:20px;font-weight:700;margin-bottom:6px}
+.pt{font-family:'Space Grotesk','Noto Sans TC',sans-serif;font-size:20px;font-weight:700;margin-bottom:6px}
 .pt em{color:var(--sage);font-style:normal}
 .pd{font-size:13px;color:var(--tm);margin-bottom:20px;line-height:1.5}
 .cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
 .cd{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px;box-shadow:var(--glow);transition:border-color .2s}
 .cd:hover{border-color:var(--sage)}
-.cl{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--tm);margin-bottom:6px}
-.cv{font-size:26px;font-weight:700}
+.cl{font-family:'Inter','Noto Sans TC',sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;color:var(--tm);margin-bottom:6px}
+.cv{font-family:'Space Grotesk','Noto Sans TC',sans-serif;font-size:28px;font-weight:700}
 .cv.ok{color:var(--ok)}.cv.w{color:var(--warn)}.cv.sg{color:var(--sage)}
-.cv-sm{font-size:20px;font-weight:700}
-.st{font-size:14px;font-weight:600;color:var(--tm);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
+.cv-sm{font-family:'Space Grotesk','Noto Sans TC',sans-serif;font-size:20px;font-weight:700}
+.st{font-family:'Space Grotesk','Noto Sans TC',sans-serif;font-size:14px;font-weight:600;color:var(--tm);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
 .tl{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);max-height:420px;overflow-y:auto}
-.ei{padding:10px 16px;border-bottom:1px solid var(--bd);font-size:12px;font-family:'SF Mono','Fira Code',monospace;display:flex;gap:10px;align-items:flex-start}
+.ei{padding:10px 16px;border-bottom:1px solid var(--bd);font-size:12px;font-family:'JetBrains Mono','SF Mono',monospace;display:flex;gap:10px;align-items:flex-start}
 .ei:last-child{border-bottom:none}
 .ei-t{color:var(--tm);white-space:nowrap;min-width:75px}
 .ei-y{font-weight:600;min-width:90px}
@@ -692,7 +842,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 .sb-body{flex:1}
 .sb-title{font-size:14px;font-weight:600;margin-bottom:4px}
 .sb-desc{font-size:12px;color:var(--tm);margin-bottom:6px;line-height:1.5}
-.sb-cmd{font-family:'SF Mono','Fira Code',monospace;font-size:12px;background:var(--s2);padding:6px 10px;border-radius:6px;color:var(--sage);display:inline-block}
+.sb-cmd{font-family:'JetBrains Mono','SF Mono',monospace;font-size:12px;background:var(--s2);padding:6px 10px;border-radius:6px;color:var(--sage);display:inline-block}
 .sb-link{font-size:12px;color:var(--sage);margin-top:4px;display:block}
 .flt{display:flex;gap:8px;margin-bottom:14px}
 .fb{padding:5px 14px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--tm);font-size:12px;cursor:pointer}
@@ -720,7 +870,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 .welcome-box{text-align:center;max-width:520px;padding:40px;animation:fadeUp .8s ease}
 @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
 .welcome-box svg{width:80px;height:80px;margin-bottom:24px}
-.welcome-box h1{font-size:28px;font-weight:700;margin-bottom:8px;color:var(--t1)}
+.welcome-box h1{font-family:'Space Grotesk','Noto Sans TC',sans-serif;font-size:28px;font-weight:700;margin-bottom:8px;color:var(--t1)}
 .welcome-box h1 span{color:var(--sage)}
 .welcome-box p{font-size:14px;color:var(--tm);line-height:1.7;margin-bottom:28px}
 .welcome-box .wc-steps{text-align:left;margin-bottom:32px}
@@ -747,6 +897,32 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 .pbar .pb-dot.bad{background:var(--bad);box-shadow:0 0 6px rgba(239,68,68,0.4)}
 .pbar .pb-txt{font-weight:600;color:var(--t1)}
 .reassure{text-align:center;padding:24px 20px;color:var(--tm);font-size:13px;line-height:1.7;font-style:italic}
+/* Pulse animation for live indicator */
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
+.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px rgba(46,213,115,0.5);animation:pulse 2s ease-in-out infinite;display:inline-block;flex-shrink:0}
+/* KPI highlight on update */
+@keyframes kpi-flash{0%{text-shadow:0 0 12px rgba(139,154,142,0.6)}100%{text-shadow:none}}
+.cv.flash{animation:kpi-flash 0.4s ease-out}
+/* Layer bar */
+.layer-row{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px}
+.layer-label{min-width:140px;color:var(--tm);font-weight:500}
+.layer-bar{flex:1;height:6px;background:var(--s2);border-radius:3px;overflow:hidden}
+.layer-fill{height:100%;border-radius:3px;transition:width 0.5s}
+.layer-fill.on{background:var(--ok);width:100%}
+.layer-fill.off{background:var(--bd);width:0%}
+.layer-status{font-size:12px;font-weight:600;min-width:90px;text-align:right}
+.layer-status.on{color:var(--ok)}
+.layer-status.off{color:var(--tm)}
+.layer-btn{font-size:11px;padding:3px 10px;border-radius:12px;border:1px solid var(--sage);color:var(--sage);background:transparent;cursor:pointer;transition:all 0.15s}
+.layer-btn:hover{background:rgba(139,154,142,0.1)}
+/* Activity slide-in */
+@keyframes slide-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
+.ei.new{animation:slide-in 0.3s ease-out}
+/* Empty state positive */
+.empty-ok{background:rgba(46,213,115,0.06);border:1px solid rgba(46,213,115,0.15);border-radius:var(--r);padding:20px;text-align:center;color:var(--ok);font-size:13px;line-height:1.7}
+.empty-ok .sub{color:var(--tm);font-size:12px;margin-top:4px}
+/* Rug pull alert */
+.rug-alert{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3);border-radius:var(--r);padding:12px 16px;margin-bottom:16px;font-size:13px;color:var(--bad);display:none}
 </style>
 </head>
 <body>
@@ -776,6 +952,8 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 <div class="ni on" data-tab="dashboard"><svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg><span data-i18n="n_db">Dashboard</span></div>
 <div class="ni" data-tab="threats"><svg viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg><span data-i18n="n_th">Threats</span></div>
 <div class="ni" data-tab="rules"><svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 9H8v-2h5v2zm3 4H8v-2h8v2zm-3-8V3.5L18.5 9H13z"/></svg><span data-i18n="n_ru">Rules</span></div>
+<div class="ni" data-tab="skills"><svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 14l-3-3 1.41-1.41L11 13.17l4.59-4.58L17 10l-6 6z"/></svg><span data-i18n="n_sk">Skills</span></div>
+<div class="ni" data-tab="tcloud"><svg viewBox="0 0 24 24"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/></svg><span data-i18n="n_tc">Threat Cloud</span></div>
 <div class="ni" data-tab="settings"><svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z"/></svg><span data-i18n="n_st">Settings</span></div>
 </div>
 <div class="sb-ft">
@@ -794,43 +972,67 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 <div class="pg on" id="p-dashboard">
 <div class="pt" data-i18n="t_db"><em>Dashboard</em></div>
 
-<!-- Security Score -->
-<div id="sec-score" style="background:linear-gradient(135deg,rgba(139,154,142,0.15),rgba(139,154,142,0.05));border:1px solid var(--bd);border-radius:12px;padding:24px;margin-bottom:20px">
-<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
-<div style="font-size:14px;font-weight:600;color:var(--fg)" data-i18n="sec_score">Security Score</div>
-<div style="font-size:13px;font-weight:600" id="sec-tier">Tier 1-2 (Regex + Heuristic)</div>
+<!-- Protection Status -->
+<div id="protection-hero" style="background:linear-gradient(135deg,rgba(139,154,142,0.12),rgba(139,154,142,0.03));border:1px solid var(--bd);border-radius:12px;padding:24px;margin-bottom:20px">
+<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
+<div class="live-dot" id="hero-dot"></div>
+<div style="font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:var(--ok)" id="hero-status">PROTECTED</div>
+</div>
+<div class="cg" style="margin-bottom:16px">
+<div class="cd"><div class="cl">Rules Active</div><div class="cv sg" id="v-atr">--</div></div>
+<div class="cd"><div class="cl">Events Scanned</div><div class="cv ok" id="v-ev">0</div></div>
+<div class="cd"><div class="cl">Threats Blocked</div><div class="cv" id="v-th" style="color:var(--sage)">0</div></div>
+<div class="cd"><div class="cl">Uptime</div><div class="cv sg" id="v-up">0s</div></div>
 </div>
-<div style="display:flex;align-items:baseline;gap:8px;margin-bottom:8px">
-<div style="font-size:48px;font-weight:700;color:var(--ok)" id="sec-num">--</div>
-<div style="font-size:16px;color:var(--tm)">/100</div>
+<div style="border-top:1px solid var(--bd);padding-top:14px">
+<div class="layer-row">
+<span class="layer-label">Layer 1: ATR Rules</span>
+<div class="layer-bar"><div class="layer-fill on" id="l1-bar"></div></div>
+<span class="layer-status on" id="l1-st">Active</span>
 </div>
-<div style="background:var(--bg);border-radius:6px;height:8px;overflow:hidden;margin-bottom:12px">
-<div id="sec-bar" style="height:100%;background:var(--ok);border-radius:6px;width:0%;transition:width 0.5s"></div>
+<div class="layer-row">
+<span class="layer-label">Layer 2: Heuristic</span>
+<div class="layer-bar"><div class="layer-fill on" id="l2-bar"></div></div>
+<span class="layer-status on" id="l2-st">Active</span>
+</div>
+<div class="layer-row">
+<span class="layer-label">Layer 3: AI Analysis</span>
+<div class="layer-bar"><div class="layer-fill off" id="l3-bar"></div></div>
+<span class="layer-status off" id="l3-st">Not configured</span>
+<button class="layer-btn" onclick="nav('settings')" id="l3-btn">Setup</button>
 </div>
-<div style="display:flex;gap:20px;font-size:12px;color:var(--tm)">
-<span><span id="v-ev" style="color:var(--ok);font-weight:600">0</span> events scanned</span>
-<span><span id="v-th" style="font-weight:600">0</span> threats blocked</span>
-<span><span id="v-atr" style="color:var(--sage);font-weight:600">--</span> rules active</span>
-<span data-i18n="uptime">Uptime</span>: <span id="v-up" style="font-weight:600">0s</span>
 </div>
 </div>
 
-<!-- LLM Upgrade CTA (shown when no Layer 3) -->
-<div id="llm-cta" style="background:linear-gradient(135deg,rgba(223,179,23,0.1),rgba(223,179,23,0.03));border:1px solid rgba(223,179,23,0.3);border-radius:12px;padding:20px;margin-bottom:20px;display:none">
-<div style="display:flex;justify-content:space-between;align-items:flex-start">
-<div>
-<div style="font-size:14px;font-weight:600;color:var(--fg);margin-bottom:6px" data-i18n="upgrade_title">Upgrade Your Protection</div>
-<div style="font-size:12px;color:var(--tm);margin-bottom:10px;line-height:1.5" data-i18n="upgrade_desc">Your Guard runs Tier 1-2 (regex only, 62.7% detection). Connect an LLM to unlock Tier 3:</div>
-<div style="font-size:12px;color:var(--tm);line-height:1.8">
-<span style="color:var(--ok)">+</span> <span data-i18n="up1">Catch attacks in ANY language</span><br>
-<span style="color:var(--ok)">+</span> <span data-i18n="up2">Detect paraphrased injection</span><br>
-<span style="color:var(--ok)">+</span> <span data-i18n="up3">Context-aware: know if "delete all" is real or attack</span><br>
-<span style="color:var(--ok)">+</span> <span data-i18n="up4">New attack types detected automatically</span>
+<!-- Runtime Protection Live Feed -->
+<div style="display:flex;align-items:center;gap:8px;margin-top:4px;margin-bottom:10px">
+<div class="st" style="margin-bottom:0">Runtime Protection</div>
+<div class="live-dot" style="width:6px;height:6px"></div>
+<span style="font-size:11px;color:var(--tm);font-weight:500">LIVE</span>
 </div>
+<div id="rt-feed" class="tl" style="max-height:220px;margin-bottom:20px;border:1px solid var(--bd);border-radius:var(--r);background:var(--s1)">
+<div class="empty-ok" id="rt-empty" style="border:none;border-radius:0">All tool calls are flowing safely through the proxy.<div class="sub">Blocked calls will appear here instantly.</div></div>
 </div>
-<button class="btn btn-s" onclick="nav('settings')" style="white-space:nowrap" data-i18n="connect_llm">Connect LLM</button>
+
+<!-- Recommended Actions -->
+<div id="rec-actions" style="background:linear-gradient(135deg,rgba(251,191,36,0.04),transparent);border:1px solid var(--bd);border-radius:var(--r);padding:16px 20px;margin-bottom:20px;display:none">
+<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
+<svg viewBox="0 0 24 24" width="16" height="16" fill="var(--warn)"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
+<span style="font-size:13px;font-weight:600;color:var(--t1)">Recommended Actions</span>
 </div>
-<div style="font-size:11px;color:var(--tm);margin-top:8px" data-i18n="free_options">Free options: Gemini (free tier) / Ollama (local)</div>
+<div id="rec-list" style="font-size:12px;line-height:2.4"></div>
+</div>
+
+<!-- Rug Pull Alert (hidden by default, shown via JS when detected) -->
+<div class="rug-alert" id="rug-alert"></div>
+
+<!-- Setup Progress (shown until all steps complete) -->
+<div id="setup-progress" style="background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);padding:16px 20px;margin-bottom:20px;display:none">
+<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
+<div style="font-size:13px;font-weight:600;color:var(--t1)">Setup Progress</div>
+<div style="font-size:12px;color:var(--tm)" id="setup-count">0/5</div>
+</div>
+<div id="setup-steps" style="font-size:12px;line-height:2;color:var(--tm)"></div>
 </div>
 
 <!-- Skills -->
@@ -840,7 +1042,8 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 
 <!-- Event Timeline -->
 <div class="st" style="margin-top:20px" data-i18n="timeline">Recent Activity</div>
-<div class="tl" id="evl"><div class="reassure" id="evl-empty" data-i18n="no_threats">No threats detected. Your agents are running safely.</div></div>
+<div id="evl-ok" class="empty-ok">All clear. Guard is monitoring your skills in real-time.<div class="sub" id="evl-ok-sub">Last scan: just started</div></div>
+<div class="tl" id="evl" style="display:none"></div>
 </div>
 
 <!-- Settings (merged AI Setup + Guide) -->
@@ -862,7 +1065,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 <strong>How it works:</strong><br>
 &bull; <strong>Skill Fingerprinting</strong> &mdash; tracks each skill's behavior baseline and detects drift<br>
 &bull; <strong>Heuristic Analysis</strong> &mdash; flags suspicious patterns (e.g., reading ~/.ssh, injecting prompts, excessive permissions)<br>
-&bull; <strong>ATR Pattern Matching</strong> &mdash; 52 Agent Threat Rules detect known AI agent attack vectors<br><br>
+&bull; <strong>ATR Pattern Matching</strong> &mdash; 108 Agent Threat Rules detect known AI agent attack vectors<br><br>
 <span style="color:var(--ok)">No external dependencies. No API keys. No data leaves your machine.</span>
 </div>
 </div>
@@ -893,13 +1096,22 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 <!-- Rules -->
 <div class="pg" id="p-rules">
 <div class="pt" data-i18n="t_ru"><em>Detection Rules</em></div>
-<div class="pd" data-i18n="d_ru">Panguard uses a 3-layer rule system to detect threats. Rules sync automatically from Threat Cloud every hour. ATR (Agent Threat Rules) are community-driven rules auto-drafted by AI from real threat patterns.</div>
+<div class="pd" data-i18n="d_ru">Panguard uses a 3-layer rule system to detect threats. Rules sync automatically from Threat Cloud every 5 minutes. ATR (Agent Threat Rules) are community-driven rules auto-drafted by AI from real threat patterns.</div>
 <div id="ru-loading" class="empty"><span class="spin"></span> Loading rule data...</div>
 <div id="ru-content" style="display:none">
 <div class="cg">
 <div class="cd"><div class="cl">ATR</div><div class="cv sg" id="ru-atr">0</div><div style="font-size:11px;color:var(--tm);margin-top:4px" data-i18n="ru_atr_d">Agent Threat Rules (AI-drafted)</div></div>
 </div>
-<div style="font-size:12px;color:var(--tm);margin-bottom:20px"><span id="ru-sync"></span> <span data-i18n="ru_auto">Rules sync automatically every hour from Threat Cloud.</span></div>
+<div style="font-size:12px;color:var(--tm);margin-bottom:20px"><span id="ru-sync"></span> <span data-i18n="ru_auto">Rules sync automatically every 5 minutes from Threat Cloud.</span></div>
+<div class="st">All Loaded Rules</div>
+<div style="display:flex;gap:10px;align-items:center;margin-bottom:10px">
+<input id="ru-search" type="text" placeholder="Search rules by ID, title, or category..." style="flex:1;background:var(--s2);border:1px solid var(--bd);color:var(--t1);padding:8px 14px;border-radius:8px;font-size:13px;outline:none" oninput="filterRules()" onfocus="this.style.borderColor='var(--sage)'" onblur="this.style.borderColor='var(--bd)'">
+<span id="ru-search-count" style="font-size:12px;color:var(--tm);white-space:nowrap"></span>
+</div>
+<div id="ru-table-wrap" style="max-height:400px;overflow-y:auto">
+<table class="tb" id="ru-table" style="display:none"><thead><tr><th>ID</th><th>Title</th><th>Severity</th><th>Category</th></tr></thead><tbody id="ru-tb"></tbody></table>
+<div id="ru-table-loading" class="empty"><span class="spin"></span> Loading rules...</div>
+</div>
 <hr class="divider">
 <div class="st" data-i18n="what_atr">What is ATR?</div>
 <div class="info-box">
@@ -942,8 +1154,26 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 </div>
 </div>
 
-<!-- Threat Cloud (merged into Rules page as section) -->
-<div class="pg" id="p-tcloud" style="display:none">
+<!-- Skills -->
+<div class="pg" id="p-skills">
+<div class="pt" data-i18n="t_sk"><em>Installed Skills</em></div>
+<div class="pd" data-i18n="d_sk2">All MCP skills detected across your platforms. Safe skills are auto-whitelisted; risky ones are flagged for review. Run <code style="font-family:'JetBrains Mono',monospace;background:var(--s2);padding:2px 6px;border-radius:4px;font-size:12px">pga audit skill &lt;name&gt;</code> for detailed analysis.</div>
+<div class="cg">
+<div class="cd"><div class="cl" data-i18n="total">Total Installed</div><div class="cv sg" id="sk-total">--</div></div>
+<div class="cd"><div class="cl" data-i18n="wl_count">Whitelisted</div><div class="cv ok" id="sk-wl">--</div></div>
+<div class="cd"><div class="cl" data-i18n="tr_count">Unknown / Tracked</div><div class="cv w" id="sk-unk">--</div></div>
+<div class="cd"><div class="cl">Blocked</div><div class="cv" style="color:var(--bad)" id="sk-blk">0</div></div>
+</div>
+<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+<div class="st" data-i18n="all_skills" style="margin-bottom:0">All Installed Skills</div>
+<button class="btn btn-s" onclick="ldSk2();toast('Refreshing skills...')" style="font-size:12px;padding:6px 16px">Scan Now</button>
+</div>
+<div id="sk2-loading" class="empty"><span class="spin"></span> Loading skills...</div>
+<table class="tb" id="sk2-table" style="display:none"><thead><tr><th>#</th><th data-i18n="name">Name</th><th data-i18n="platform">Platform</th><th>Risk</th><th data-i18n="trust">Status</th><th>Last Audit</th></tr></thead><tbody id="sk2-tb"></tbody></table>
+</div>
+
+<!-- Threat Cloud -->
+<div class="pg" id="p-tcloud">
 <div class="pt" data-i18n="t_tc"><em>Threat Cloud</em></div>
 <div class="pd" data-i18n="d_tc">Threat Cloud is Panguard's anonymous threat intelligence sharing network. Your device can optionally upload anonymized threat data to help the community, and receives updated detection rules in return.</div>
 <div id="tc-loading" class="empty"><span class="spin"></span> Loading Threat Cloud status...</div>
@@ -1028,14 +1258,14 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
 
 <script>
 var T={
-en:{n_db:'Dashboard',n_th:'Threats',n_ru:'Rules',n_st:'Settings',
+en:{n_db:'Dashboard',n_th:'Threats',n_ru:'Rules',n_sk:'Skills',n_tc:'Threat Cloud',n_st:'Settings',t_sk:'<em>Installed Skills</em>',d_sk2:'All MCP skills detected across your platforms. Safe skills are auto-whitelisted; risky ones are flagged for review.',
 t_db:'<em>Dashboard</em>',t_st:'<em>Settings</em>',t_ru:'<em>Detection Rules</em>',t_th:'<em>Threat Intelligence</em>',
 sec_score:'Security Score',upgrade_title:'Upgrade Your Protection',upgrade_desc:'Your Guard runs Tier 1-2 (regex only, 62.7% detection). Connect an LLM to unlock Tier 3:',
 up1:'Catch attacks in ANY language',up2:'Detect paraphrased injection',up3:'Context-aware: know if "delete all" is real or attack',up4:'New attack types detected automatically',
 connect_llm:'Connect LLM',free_options:'Free options: Gemini (free tier) / Ollama (local)',no_threats:'No threats detected. Your agents are running safely.',
 d_sk:'Panguard audits every MCP skill installed on your system. Safe skills are auto-whitelisted; risky ones are flagged for your review.',
 d_ai:'Panguard uses a 3-layer detection system. Layer 1 (rules) and Layer 2 (fingerprint & heuristic) are always active with zero config. Layer 3 uses cloud AI for the deepest analysis -- configure your API key below.',
-d_ru:'Panguard uses a 3-layer rule system to detect threats. Rules sync automatically from Threat Cloud every hour. ATR rules are community-driven, auto-drafted by AI from real threat patterns.',
+d_ru:'Panguard uses a 3-layer rule system to detect threats. Rules sync automatically from Threat Cloud every 5 minutes. ATR rules are community-driven, auto-drafted by AI from real threat patterns.',
 d_tc:'Threat Cloud is Panguard\\'s anonymous threat intelligence sharing network. Your device can optionally upload anonymized threat data to help the community, and receives updated detection rules in return.',
 d_th:'All detected threats are logged here. Malicious events are auto-blocked. Suspicious events may require your attention.',
 d_gd:'Follow these steps to activate full protection. Once all steps are complete, Panguard Guard will continuously monitor and protect your system.',
@@ -1047,7 +1277,7 @@ l2:'Layer 2: Fingerprint & Heuristic (Local, zero-config)',l2desc:'Behavioral fi
 l3:'Layer 3: Cloud AI (Most powerful analysis)',l3desc:'Cloud models for the deepest analysis of complex threats. Only used when Layer 1+2 are inconclusive. Requires your own API key.',
 provider:'Provider',endpoint:'Endpoint',model:'Model',api_key:'API Key',custom_ep:'Custom Endpoint',ep_note:'Use custom endpoint for self-hosted models, API proxies, or enterprise gateways. Leave empty for default.',key_note:'Keys are stored locally in ~/.panguard-guard/config.json and never sent to Panguard servers.',
 save:'Save Configuration',reload:'Reload',
-ru_atr_d:'Agent Threat Rules (AI-drafted)',ru_auto:'Rules sync automatically every hour from Threat Cloud.',
+ru_atr_d:'Agent Threat Rules (AI-drafted)',ru_auto:'Rules sync automatically every 5 minutes from Threat Cloud.',
 what_atr:'What is ATR?',atr_title:'Agent Threat Rules (ATR)',atr_desc:'ATR rules are automatically drafted by AI when your guard engine detects recurring threat patterns (5+ events from 2+ sources within 6 hours). These draft rules are submitted to Threat Cloud for community review, then distributed to all Panguard users after validation.',
 atr_stats:'ATR Activity',atr_matches:'ATR Matches',atr_drafted:'Patterns Drafted',atr_submitted:'Proposals Submitted',
 contrib_title:'Your Community Contribution',contrib_desc:'Every ATR proposal your device submits helps protect the entire Panguard community. Proposals are reviewed and validated before distribution. Contributing is automatic and anonymous.',
@@ -1071,7 +1301,7 @@ wc_s2t:'Connecting Dashboard',wc_s2d:'Establishing real-time data channels...',
 wc_s3t:'Loading System Status',wc_s3d:'Reading current protection state and metrics...',
 wc_s4t:'Ready',wc_s4d:'All systems initialized. Welcome aboard.',
 wc_btn:'Enter Dashboard'},
-zh:{n_db:'\u5100\u8868\u677f',n_th:'\u5a01\u8105\u60c5\u5831',n_ru:'\u5075\u6e2c\u898f\u5247',n_st:'\u8a2d\u5b9a',
+zh:{n_db:'\u5100\u8868\u677f',n_th:'\u5a01\u8105\u60c5\u5831',n_ru:'\u5075\u6e2c\u898f\u5247',n_sk:'\u6280\u80fd',n_tc:'\u5a01\u8105\u96f2',n_st:'\u8a2d\u5b9a',t_sk:'<em>\u5df2\u5b89\u88dd\u6280\u80fd</em>',d_sk2:'\u6240\u6709\u5e73\u53f0\u5075\u6e2c\u5230\u7684 MCP skills\u3002\u5b89\u5168\u7684\u81ea\u52d5 whitelist\uff0c\u6709\u98a8\u96aa\u7684\u6a19\u8a18\u5be9\u67e5\u3002',
 t_db:'<em>\u5100\u8868\u677f</em>',t_st:'<em>\u8a2d\u5b9a</em>',t_ru:'<em>\u5075\u6e2c\u898f\u5247</em>',t_th:'<em>\u5a01\u8105\u60c5\u5831</em>',
 sec_score:'\u5b89\u5168\u5206\u6578',upgrade_title:'\u5347\u7d1a\u4fdd\u8b77',upgrade_desc:'\u60a8\u7684 Guard \u76ee\u524d\u904b\u884c Tier 1-2\uff08\u50c5 regex\uff0c62.7% \u5075\u6e2c\u7387\uff09\u3002\u9023\u63a5 LLM \u89e3\u9396 Tier 3\uff1a',
 up1:'\u652f\u63f4\u4efb\u4f55\u8a9e\u8a00\u7684\u653b\u64ca\u5075\u6e2c',up2:'\u5075\u6e2c\u91cd\u65b0\u6392\u5217\u7684\u6ce8\u5165\u653b\u64ca',up3:'\u8a9e\u5883\u611f\u77e5\uff1a\u5224\u65b7\u300c\u522a\u9664\u5168\u90e8\u300d\u662f\u6b63\u5e38\u6307\u4ee4\u9084\u662f\u653b\u64ca',up4:'\u81ea\u52d5\u5075\u6e2c\u65b0\u578b\u653b\u64ca\uff0c\u7121\u9700\u7b49\u5f85\u898f\u5247\u66f4\u65b0',
@@ -1120,25 +1350,39 @@ var lang=(function(){try{var s=localStorage.getItem('panguard_lang');if(s==='zh'
 
 function TL(){lang=lang==='en'?'zh':'en';try{localStorage.setItem('panguard_lang',lang)}catch(e){}document.querySelectorAll('[data-i18n]').forEach(function(e){var k=e.getAttribute('data-i18n');if(T[lang][k]){if(e.tagName==='INPUT')e.placeholder=T[lang][k];else if(k.indexOf('t_')===0||k.indexOf('d_')===0||k==='go_ai')e.innerHTML=T[lang][k];else e.textContent=T[lang][k]}});document.querySelectorAll('[data-i18n-wc]').forEach(function(e){var k=e.getAttribute('data-i18n-wc');if(T[lang][k]){if(k==='wc_title')e.innerHTML=T[lang][k];else e.textContent=T[lang][k]}});updateG6();}
 
-function nav(t){document.querySelectorAll('.ni').forEach(function(n){n.classList.remove('on')});var tab=document.querySelector('[data-tab="'+t+'"]');if(tab)tab.classList.add('on');document.querySelectorAll('.pg').forEach(function(p){p.classList.remove('on')});var pg=document.getElementById('p-'+t);if(pg){pg.style.display='';pg.classList.add('on')}if(t==='dashboard'){ldSk();ldISk();ldSecScore()}if(t==='settings'){loadAI();updG()}if(t==='rules'){ldRules();ldTCloud()}if(t==='threats')ldTh()}
+function nav(t){document.querySelectorAll('.ni').forEach(function(n){n.classList.remove('on')});var tab=document.querySelector('[data-tab="'+t+'"]');if(tab)tab.classList.add('on');document.querySelectorAll('.pg').forEach(function(p){p.classList.remove('on')});var pg=document.getElementById('p-'+t);if(pg){pg.style.display='';pg.classList.add('on')}if(t==='dashboard'){ldSk();ldISk();ldProxyVerdicts();ldRecActions()}if(t==='settings'){loadAI();updG()}if(t==='rules'){ldRules();ldTCloud();ldLoadedRules()}if(t==='threats')ldTh();if(t==='skills')ldSk2();if(t==='tcloud')ldTCloud2()}
 document.querySelectorAll('.ni').forEach(function(n){n.addEventListener('click',function(){nav(this.getAttribute('data-tab'))})});
 
 function toast(m){var t=document.getElementById('toast');t.textContent=m;t.classList.add('show');setTimeout(function(){t.classList.remove('show')},2500)}
 function fUp(ms){var s=Math.floor(ms/1000);if(s<60)return s+'s';var m=Math.floor(s/60);s%=60;if(m<60)return m+'m '+s+'s';var h=Math.floor(m/60);m%=60;return h+'h '+m+'m'}
 function esc(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#039;')}
 
-function gTk(){if(typeof __tk!=='undefined'&&__tk){tk=__tk;try{localStorage.setItem('panguard_token',tk)}catch(e){}}if(!tk){var h=location.hash;if(h.indexOf('token=')!==-1){tk=h.split('token=')[1].split('&')[0];try{localStorage.setItem('panguard_token',tk)}catch(e){}try{history.replaceState(null,'',location.pathname+location.search)}catch(e){}}}if(!tk){try{tk=localStorage.getItem('panguard_token')||''}catch(e){}}}
-function af(p,o){o=o||{};o.headers=o.headers||{};if(tk)o.headers['Authorization']='Bearer '+tk;return fetch(p,o).then(function(r){if(r.status===401){document.getElementById('wl').textContent=lang==='zh'?'Token 無效':'Invalid token';document.getElementById('wd').classList.remove('on')}return r})}
+function gTk(){/* Auth handled via HttpOnly cookie — no JS token needed */}
+function af(p,o){o=o||{};o.credentials='same-origin';return fetch(p,o).then(function(r){if(r.status===401){document.getElementById('wl').textContent=lang==='zh'?'Token 無效':'Invalid token';document.getElementById('wd').classList.remove('on')}return r})}
 
 /* WS */
-function cWS(){var ws=new WebSocket('ws://'+location.host+'/ws');ws.onopen=function(){document.getElementById('wd').classList.add('on');document.getElementById('wl').textContent=lang==='zh'?'\u5df2\u9023\u7dda':'Connected'};ws.onclose=function(){document.getElementById('wd').classList.remove('on');document.getElementById('wl').textContent=lang==='zh'?'\u5df2\u65b7\u7dda':'Disconnected';setTimeout(cWS,3000)};ws.onmessage=function(e){try{var m=JSON.parse(e.data);if(m.type==='status_update')uS(m.data);if(m.type==='new_verdict'||m.type==='new_event'){aE(m);var ee=document.getElementById('evl-empty');if(ee)ee.style.display='none'}}catch(x){}}}
+function cWS(){var ws=new WebSocket('ws://'+location.host+'/ws');ws.onopen=function(){document.getElementById('wd').classList.add('on');document.getElementById('wl').textContent=lang==='zh'?'\u5df2\u9023\u7dda':'Connected'};ws.onclose=function(){document.getElementById('wd').classList.remove('on');document.getElementById('wl').textContent=lang==='zh'?'\u5df2\u65b7\u7dda':'Disconnected';setTimeout(cWS,3000)};ws.onmessage=function(e){try{var m=JSON.parse(e.data);if(m.type==='status_update')uS(m.data);if(m.type==='new_verdict'||m.type==='new_event'){aE(m);var ee=document.getElementById('evl-empty');if(ee)ee.style.display='none'}if(m.type==='proxy_verdict'){var feed=document.getElementById('rt-feed');var emp=document.getElementById('rt-empty');if(emp)emp.style.display='none';var pv=m.data||{};var cls=pv.outcome==='deny'?'malicious':'benign';var el=document.createElement('div');el.className='ei new '+cls;var t=pv.ts?pv.ts.split('T')[1].split('.')[0]:'--:--';el.innerHTML='<span class="ei-t">'+t+'</span><span class="ei-y" style="color:'+(pv.outcome==='deny'?'var(--bad)':'var(--ok)')+'">'+esc(pv.outcome||'allow').toUpperCase()+'</span><span class="ei-d">'+esc(pv.tool||'')+(pv.reason?' — '+esc(pv.reason):'')+'</span>';feed.prepend(el);setTimeout(function(){el.classList.remove('new')},400);while(feed.children.length>20)feed.removeChild(feed.lastChild)}}catch(x){}}}
 
-function uS(s){var me=document.getElementById('v-mode');me.textContent=s.mode;me.className='cv '+(s.mode==='protection'?'ok':'w');document.getElementById('v-ev').textContent=(s.eventsProcessed||0).toLocaleString();var te=document.getElementById('v-th');te.textContent=s.threatsDetected||0;te.style.color=s.threatsDetected>0?'var(--bad)':'var(--sage)';document.getElementById('v-up').textContent=fUp(s.uptime||0);document.getElementById('v-lr').textContent=(s.learningProgress||0)+'%';document.getElementById('v-lr').className='cv '+(s.learningProgress>=100?'ok':'w');document.getElementById('v-cf').textContent=((s.baselineConfidence||0)*100).toFixed(1)+'%';document.getElementById('v-mem').textContent=(s.memoryUsageMB||0).toFixed(1)+' MB';document.getElementById('v-act').textContent=s.actionsExecuted||0;if(s.atrRuleCount!==undefined)document.getElementById('v-atr').textContent=s.atrRuleCount;if(s.whitelistedSkills!==undefined)document.getElementById('v-wsk').textContent=s.whitelistedSkills;if(s.trackedSkills!==undefined)document.getElementById('v-tsk').textContent=s.trackedSkills;if(s.stableFingerprints!==undefined)document.getElementById('v-sfp').textContent=s.stableFingerprints;updPBar(s);updateG6();
-/* Hide empty reassurance when events exist */
-var ee=document.getElementById('evl-empty');if(ee&&s.eventsProcessed>0)ee.style.display='none';
+function uS(s){
+/* Update KPI cards with flash animation */
+function setKPI(id,val){var el=document.getElementById(id);if(!el)return;var old=el.textContent;var nv=String(val);if(old!==nv){el.textContent=nv;el.classList.remove('flash');void el.offsetWidth;el.classList.add('flash')}}
+setKPI('v-ev',(s.eventsProcessed||0).toLocaleString());
+var th=s.threatsDetected||0;setKPI('v-th',th);var te=document.getElementById('v-th');if(te)te.style.color=th>0?'var(--bad)':'var(--sage)';
+setKPI('v-up',fUp(s.uptime||0));
+if(s.atrRuleCount!==undefined)setKPI('v-atr',s.atrRuleCount);
+/* Hero status */
+var hs=document.getElementById('hero-status');var hd=document.getElementById('hero-dot');
+if(hs){hs.textContent=s.mode==='protection'?'PROTECTED':'LEARNING';hs.style.color=s.mode==='protection'?'var(--ok)':'var(--warn)'}
+if(hd){hd.style.background=s.mode==='protection'?'var(--ok)':'var(--warn)'}
+/* Layer 3 status (check if AI is configured) */
+if(s.hasAI!==undefined){var l3b=document.getElementById('l3-bar');var l3s=document.getElementById('l3-st');var l3btn=document.getElementById('l3-btn');if(s.hasAI){if(l3b)l3b.className='layer-fill on';if(l3s){l3s.textContent='Active';l3s.className='layer-status on'}if(l3btn)l3btn.style.display='none'}else{if(l3b)l3b.className='layer-fill off';if(l3s){l3s.textContent=lang==='zh'?'\u672a\u914d\u7f6e':'Not configured';l3s.className='layer-status off'}if(l3btn)l3btn.style.display=''}}
+updPBar(s);
+/* Show event log when events arrive, hide empty-ok */
+var eok=document.getElementById('evl-ok');var evl=document.getElementById('evl');
+if(s.eventsProcessed>0){if(eok)eok.style.display='none';if(evl)evl.style.display=''};
 }
 
-function aE(m){var l=document.getElementById('evl');var d=document.createElement('div');var c=(m.data&&m.data.conclusion)||'benign';d.className='ei '+c;var t=m.timestamp?m.timestamp.split('T')[1].split('.')[0]:'--:--:--';d.innerHTML='<span class="ei-t">'+t+'</span><span class="ei-y">'+esc(m.type||'')+'</span><span class="ei-d">'+esc(JSON.stringify(m.data||{}).slice(0,200))+'</span>';l.prepend(d);while(l.children.length>50)l.removeChild(l.lastChild)}
+function aE(m){var l=document.getElementById('evl');if(l)l.style.display='';var eok=document.getElementById('evl-ok');if(eok)eok.style.display='none';var d=document.createElement('div');var c=(m.data&&m.data.conclusion)||'benign';d.className='ei new '+c;var t=m.timestamp?m.timestamp.split('T')[1].split('.')[0]:'--:--:--';d.innerHTML='<span class="ei-t">'+t+'</span><span class="ei-y">'+esc(m.type||'')+'</span><span class="ei-d">'+esc(JSON.stringify(m.data||{}).slice(0,200))+'</span>';l.prepend(d);setTimeout(function(){d.classList.remove('new')},400);while(l.children.length>50)l.removeChild(l.lastChild)}
 
 /* Skills */
 function ldSk(){af('/api/skills').then(function(r){return r.json()}).then(function(d){var tb=document.getElementById('sk-tb');tb.innerHTML='';if(!d.skills||d.skills.length===0){tb.innerHTML='<tr><td colspan="5" class="empty">'+(lang==='zh'?'\u5c1a\u7121\u6280\u80fd\u8cc7\u6599':'No skills data')+'</td></tr>';return}d.skills.forEach(function(s,i){var tr=document.createElement('tr');tr.innerHTML='<td>'+(i+1)+'</td><td>'+esc(s.name||'')+'</td><td>'+esc(s.source||'--')+'</td><td style="color:var(--tm);font-size:12px">'+esc(s.reason||'--')+'</td><td style="color:var(--tm);font-size:12px">'+(s.addedAt?new Date(s.addedAt).toLocaleDateString():'--')+'</td>';tb.appendChild(tr)})}).catch(function(){})}
@@ -1148,8 +1392,14 @@ function loadAI(){af('/api/ai-config').then(function(r){return r.json()}).then(f
 
 function saveAI(){var l3=document.getElementById('ai3p').value;var b={};if(l3){b.provider=l3;b.model=document.getElementById('ai3m').value||undefined;var k=document.getElementById('ai3k').value;if(k&&k.indexOf('*')===-1)b.apiKey=k;var ce=document.getElementById('ai3e').value;if(ce)b.endpoint=ce}af('/api/ai-config',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(b)}).then(function(r){return r.json()}).then(function(d){if(d.success)toast(lang==='zh'?'\u5132\u5b58\u6210\u529f':'Configuration saved');else toast(d.error||'Error');loadAI()}).catch(function(){toast('Network error')})}
 
+/* Skills page */
+function ldSk2(){af('/api/skills').then(function(r){return r.json()}).then(function(d){var tb=document.getElementById('sk2-tb');var tbl=document.getElementById('sk2-table');var ld=document.getElementById('sk2-loading');if(!d.skills||d.skills.length===0){if(ld)ld.innerHTML='<span style="color:var(--tm)">'+(lang==='zh'?'尚無技能資料':'No skills detected. Install MCP skills and run pga up.')+'</span>';return}if(ld)ld.style.display='none';if(tbl)tbl.style.display='';tb.innerHTML='';var wl=0,unk=0,blk=0;d.skills.forEach(function(s,i){var st=s.status||'unknown';if(st==='whitelisted')wl++;else if(st==='blocked')blk++;else unk++;var stColor=st==='whitelisted'?'var(--ok)':st==='blocked'?'var(--bad)':'var(--warn)';var tr=document.createElement('tr');tr.innerHTML='<td>'+(i+1)+'</td><td>'+esc(s.name||'')+'</td><td>'+esc(s.platform||s.source||'--')+'</td><td>'+(s.riskScore!=null?'<span style="color:'+(s.riskScore>60?'var(--bad)':s.riskScore>30?'var(--warn)':'var(--ok)')+'">'+s.riskScore+'/100</span>':'--')+'</td><td><span style="color:'+stColor+'">'+esc(st)+'</span></td><td style="color:var(--tm);font-size:12px">'+(s.lastAudit?new Date(s.lastAudit).toLocaleDateString():(s.addedAt?new Date(s.addedAt).toLocaleDateString():'--'))+'</td>';tb.appendChild(tr)});document.getElementById('sk-total').textContent=d.skills.length;document.getElementById('sk-wl').textContent=wl;document.getElementById('sk-unk').textContent=unk;document.getElementById('sk-blk').textContent=blk}).catch(function(){})}
+
+/* Threat Cloud page loader */
+function ldTCloud2(){af('/api/threat-cloud').then(function(r){return r.json()}).then(function(d){var ld=document.getElementById('tc-loading');var ct=document.getElementById('tc-content');if(ld)ld.style.display='none';if(ct)ct.style.display='';document.getElementById('tc-enabled').textContent=d.enabled?'Connected':'Disconnected';document.getElementById('tc-enabled').style.color=d.enabled?'var(--ok)':'var(--bad)';document.getElementById('tc-up').textContent=d.totalUploaded||0;document.getElementById('tc-recv').textContent=d.totalRulesReceived||0;document.getElementById('tc-q').textContent=d.queueSize||0;var tg=document.getElementById('tc-toggle');var tl=document.getElementById('tc-toggle-label');if(d.uploadEnabled){if(tg)tg.classList.add('on');if(tl){tl.textContent=lang==='zh'?'\u5df2\u555f\u7528':'Enabled';tl.style.color='var(--ok)'}}else{if(tg)tg.classList.remove('on');if(tl){tl.textContent=lang==='zh'?'\u5df2\u505c\u7528':'Disabled';tl.style.color='var(--tm)'}}}).catch(function(){document.getElementById('tc-loading').innerHTML='<span style="color:var(--bad)">Failed to load Threat Cloud status</span>'})}
+
 /* Threats */
-function ldTh(){af('/api/threat-map').then(function(r){return r.json()}).then(function(t){var tb=document.getElementById('th-tb');tb.innerHTML='';if(!t||t.length===0){tb.innerHTML='<tr><td colspan="4" class="empty">'+(lang==='zh'?'\u7121\u5a01\u8105\u8cc7\u6599':'No threat data')+'</td></tr>';return}t.forEach(function(x){var tr=document.createElement('tr');tr.innerHTML='<td>'+esc(x.sourceIP||'')+'</td><td>'+esc(x.attackType||'')+'</td><td>'+esc(String(x.count||0))+'</td><td style="color:var(--tm);font-size:12px">'+esc(x.lastSeen||'--')+'</td>';tb.appendChild(tr)})}).catch(function(){});
+function ldTh(){af('/api/threat-map').then(function(r){return r.json()}).then(function(t){var tb=document.getElementById('th-tb');tb.innerHTML='';if(!t||t.length===0){tb.innerHTML='<tr><td colspan="4" style="text-align:center;padding:24px;color:var(--ok);font-size:13px">'+(lang==='zh'?'<strong>All clear.</strong> \u672a\u5075\u6e2c\u5230\u5a01\u8105\u3002\u9019\u662f\u597d\u4e8b\u3002':'<strong>All clear.</strong> No threats detected yet. This is good.')+'</td></tr>';return}t.forEach(function(x){var tr=document.createElement('tr');tr.innerHTML='<td>'+esc(x.sourceIP||'')+'</td><td>'+esc(x.attackType||'')+'</td><td>'+esc(String(x.count||0))+'</td><td style="color:var(--tm);font-size:12px">'+esc(x.lastSeen||'--')+'</td>';tb.appendChild(tr)})}).catch(function(){});
 af('/api/verdicts').then(function(r){return r.json()}).then(function(v){var l=document.getElementById('vl');l.innerHTML='';if(!v||v.length===0){l.innerHTML='<div class="empty">'+(lang==='zh'?'\u7121\u5224\u6c7a\u8cc7\u6599':'No verdict data')+'</div>';return}v.slice().reverse().forEach(function(x){if(cf!=='all'&&x.conclusion!==cf)return;var d=document.createElement('div');d.className='ei '+(x.conclusion||'benign');d.innerHTML='<span class="ei-y" style="color:'+(x.conclusion==='malicious'?'var(--bad)':x.conclusion==='suspicious'?'var(--warn)':'var(--ok)')+'">'+esc(x.conclusion||'')+'</span><span class="ei-d">'+esc(x.category||'')+' - '+esc((x.details||'').slice(0,150))+'</span>';l.appendChild(d)})}).catch(function(){})}
 
 function flt(f){cf=f;document.querySelectorAll('.fb').forEach(function(b){b.classList.remove('on')});event.target.classList.add('on');ldTh()}
@@ -1157,7 +1407,7 @@ function flt(f){cf=f;document.querySelectorAll('.fb').forEach(function(b){b.clas
 /* Guide */
 function updG(){af('/api/status').then(function(r){return r.json()}).then(function(s){document.getElementById('g4n').classList.add('done');if(s.mode==='protection'){document.getElementById('g2n').classList.add('done');document.getElementById('g3n').classList.add('done')}updateG6()}).catch(function(){});af('/api/ai-config').then(function(r){return r.json()}).then(function(d){if(d.ai&&d.ai.provider)document.getElementById('g5n').classList.add('done')}).catch(function(){})}
 
-function updateG6(){var el=document.getElementById('g6-status');var gn=document.getElementById('g6n');var mode=document.getElementById('v-mode').textContent;if(mode==='protection'||mode==='learning'){gn.classList.add('done');el.style.background='rgba(46,213,115,.1)';el.style.color='var(--ok)';el.textContent=lang==='zh'?'\u9632\u8b77\u5df2\u555f\u52d5 - Guard \u904b\u884c\u4e2d':'Protection Active - Guard is running'}else{el.style.background='rgba(239,68,68,.1)';el.style.color='var(--bad)';el.textContent=lang==='zh'?'\u5c1a\u672a\u555f\u52d5 - \u8acb\u57f7\u884c\u6b65\u9a5f 4':'Not started - complete step 4'}}
+function updateG6(){var el=document.getElementById('g6-status');var gn=document.getElementById('g6n');var hs=document.getElementById('hero-status');var mode=hs?hs.textContent.toLowerCase():'';if(mode.indexOf('protected')!==-1||mode.indexOf('learning')!==-1){gn.classList.add('done');el.style.background='rgba(46,213,115,.1)';el.style.color='var(--ok)';el.textContent=lang==='zh'?'\u9632\u8b77\u5df2\u555f\u52d5 - Guard \u904b\u884c\u4e2d':'Protection Active - Guard is running'}else{el.style.background='rgba(239,68,68,.1)';el.style.color='var(--bad)';el.textContent=lang==='zh'?'\u5c1a\u672a\u555f\u52d5 - \u8acb\u57f7\u884c\u6b65\u9a5f 4':'Not started - complete step 4'}}
 
 /* Installed Skills */
 function ldISk(){af('/api/installed-skills').then(function(r){return r.json()}).then(function(d){document.getElementById('isk-loading').style.display='none';document.getElementById('isk-table').style.display='';var tb=document.getElementById('isk-tb');tb.innerHTML='';if(!d.skills||d.skills.length===0){tb.innerHTML='<tr><td colspan="4" class="empty">'+(lang==='zh'?'\u672a\u627e\u5230\u6280\u80fd':'No skills found')+'</td></tr>';return}d.skills.sort(function(a,b){return a.whitelisted===b.whitelisted?0:a.whitelisted?1:-1});d.skills.forEach(function(s,i){var tr=document.createElement('tr');var st=s.whitelisted?'<span class="badge badge-ok">'+(lang==='zh'?'\u5b89\u5168':'Safe')+'</span>':'<span class="badge badge-w">'+(lang==='zh'?'\u8ffd\u8e64\u4e2d':'Tracked')+'</span>';tr.innerHTML='<td>'+(i+1)+'</td><td>'+esc(s.name||'')+'</td><td style="color:var(--tm);font-size:12px">'+esc(s.platform||'--')+'</td><td>'+st+'</td>';tb.appendChild(tr)})}).catch(function(){document.getElementById('isk-loading').innerHTML='<span style="color:var(--bad)">Failed to load skills</span>'})}
@@ -1169,6 +1419,20 @@ function ldRules(){af('/api/rules').then(function(r){return r.json()}).then(func
 /* Threat Cloud */
 function ldTCloud(){af('/api/threat-cloud').then(function(r){return r.json()}).then(function(d){document.getElementById('tc-loading').style.display='none';document.getElementById('tc-content').style.display='';var en=document.getElementById('tc-enabled');en.textContent=d.enabled?(lang==='zh'?'\u5df2\u555f\u7528':'Enabled'):(lang==='zh'?'\u672a\u555f\u7528':'Disabled');en.className='cv-sm '+(d.enabled?'ok':'w');document.getElementById('tc-up').textContent=d.totalUploaded||0;document.getElementById('tc-recv').textContent=d.totalRulesReceived||0;document.getElementById('tc-q').textContent=d.queueSize||0;var tog=document.getElementById('tc-toggle');var tl=document.getElementById('tc-toggle-label');if(d.uploadEnabled){tog.classList.add('on');tl.textContent=lang==='zh'?'\u5df2\u555f\u7528':'Enabled';tl.style.color='var(--ok)'}else{tog.classList.remove('on');tl.textContent=lang==='zh'?'\u5df2\u505c\u7528':'Disabled';tl.style.color='var(--tm)'}}).catch(function(){document.getElementById('tc-loading').innerHTML='<span style="color:var(--bad)">Failed to load Threat Cloud status</span>'})}
 
+/* Loaded Rules table */
+var allRules=[];
+function ldLoadedRules(){af('/api/loaded-rules').then(function(r){return r.json()}).then(function(d){allRules=d.rules||[];document.getElementById('ru-table-loading').style.display='none';if(allRules.length>0){document.getElementById('ru-table').style.display='';renderRules(allRules);var ct=document.getElementById('ru-search-count');if(ct)ct.textContent=allRules.length+' rules'}else{document.getElementById('ru-table-loading').innerHTML='<span style="color:var(--tm)">No rule files found locally.</span>'}}).catch(function(){document.getElementById('ru-table-loading').innerHTML='<span style="color:var(--bad)">Failed to load rules</span>'})}
+function renderRules(rules){var tb=document.getElementById('ru-tb');tb.innerHTML='';rules.forEach(function(r){var sevColor=r.severity==='critical'?'var(--bad)':r.severity==='high'?'var(--warn)':r.severity==='medium'?'var(--sage)':'var(--tm)';var tr=document.createElement('tr');tr.innerHTML='<td style="font-family:JetBrains Mono,monospace;font-size:11px;white-space:nowrap">'+esc(r.id)+'</td><td>'+esc(r.title)+'</td><td><span style="color:'+sevColor+';font-weight:600;font-size:12px">'+esc(r.severity)+'</span></td><td style="color:var(--tm);font-size:12px">'+esc(r.category)+'</td>';tb.appendChild(tr)})}
+function filterRules(){var q=(document.getElementById('ru-search').value||'').toLowerCase();var ct=document.getElementById('ru-search-count');if(!q){renderRules(allRules);if(ct)ct.textContent=allRules.length+' rules';return}var f=allRules.filter(function(r){return(r.id+' '+r.title+' '+r.category+' '+r.severity).toLowerCase().indexOf(q)!==-1});renderRules(f);if(ct)ct.textContent=f.length+'/'+allRules.length}
+
+/* Runtime Protection feed */
+function ldProxyVerdicts(){af('/api/proxy-verdicts').then(function(r){return r.json()}).then(function(d){if(!d.verdicts||d.verdicts.length===0)return;document.getElementById('rt-empty').style.display='none';var feed=document.getElementById('rt-feed');feed.innerHTML='';d.verdicts.slice(0,20).forEach(function(v){var cls=v.outcome==='deny'?'malicious':v.outcome==='ask'?'suspicious':'benign';var el=document.createElement('div');el.className='ei '+cls;var t=v.ts?v.ts.split('T')[1].split('.')[0]:'--:--';el.innerHTML='<span class="ei-t">'+t+'</span><span class="ei-y" style="color:'+(v.outcome==='deny'?'var(--bad)':'var(--ok)')+'">'+esc(v.outcome||'allow').toUpperCase()+'</span><span class="ei-d">'+esc(v.tool||'')+(v.reason?' — '+esc(v.reason):'')+'</span>';feed.appendChild(el)})}).catch(function(){})}
+
+/* Recommended Actions */
+function ldRecActions(){
+var acts=[];
+af('/api/proxy-verdicts').then(function(r){return r.json()}).then(function(d){var denies=(d.verdicts||[]).filter(function(v){return v.outcome==='deny'});if(denies.length>0)acts.push('<span style="color:var(--bad);font-weight:600">[!!]</span> '+denies.length+' tool call(s) blocked by proxy <span style="color:var(--sage);cursor:pointer" onclick="nav(\\'threats\\')">[View]</span>');return af('/api/installed-skills')}).then(function(r){return r.json()}).then(function(d){var unk=(d.skills||[]).filter(function(s){return!s.whitelisted});if(unk.length>0)acts.push('<span style="color:var(--warn);font-weight:600">[!]</span> '+unk.length+' unscanned skill(s) <span style="color:var(--sage);cursor:pointer" onclick="nav(\\'skills\\')">[Scan Now]</span>');return af('/api/ai-config')}).then(function(r){return r.json()}).then(function(d){if(!d.ai||!d.ai.provider)acts.push('<span style="color:var(--tm)">[i]</span> Layer 3 AI unlocks deeper detection <span style="color:var(--sage);cursor:pointer" onclick="nav(\\'settings\\')">[Setup]</span>');return af('/api/threat-cloud')}).then(function(r){return r.json()}).then(function(d){if(!d.enabled||!d.uploadEnabled)acts.push('<span style="color:var(--tm)">[i]</span> Threat Cloud strengthens community defense <span style="color:var(--sage);cursor:pointer" onclick="nav(\\'tcloud\\')">[Enable]</span>');var box=document.getElementById('rec-actions');var list=document.getElementById('rec-list');if(acts.length>0){box.style.display='';list.innerHTML=acts.join('<br>')}else{box.style.display='none'}}).catch(function(){})}
+
 function toggleUpload(){var tog=document.getElementById('tc-toggle');var isOn=tog.classList.contains('on');af('/api/threat-cloud',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({uploadEnabled:!isOn})}).then(function(r){return r.json()}).then(function(d){if(d.success){toast(lang==='zh'?'\u5132\u5b58\u6210\u529f':'Configuration saved');ldTCloud()}else toast(d.error||'Error')}).catch(function(){toast('Network error')})}
 
 
@@ -1196,7 +1460,7 @@ var t=document.getElementById('toast');
 t.innerHTML='<span style="color:var(--ok);font-weight:700">Your AI agents are now protected</span>';
 t.classList.add('show');setTimeout(function(){t.classList.remove('show')},4000);
 }
-function loadInitData(){af('/api/status').then(function(r){return r.json()}).then(uS).catch(function(){});af('/api/rules').then(function(r){return r.json()}).then(function(d){if(d.atr!==undefined)document.getElementById('v-atr').textContent=d.atr}).catch(function(){});updateG6()}
+function loadInitData(){af('/api/status').then(function(r){return r.json()}).then(uS).catch(function(){});af('/api/rules').then(function(r){return r.json()}).then(function(d){if(d.atr!==undefined)document.getElementById('v-atr').textContent=d.atr}).catch(function(){});ldProxyVerdicts();ldRecActions()}
 (function(){
 var bar=document.getElementById('init-bar');
 // Always connect WebSocket immediately, regardless of welcome state
@@ -1204,12 +1468,17 @@ cWS();loadInitData();
 // Apply persisted/detected language on load (TL toggles, so apply directly)
 if(lang==='zh'){document.querySelectorAll('[data-i18n]').forEach(function(e){var k=e.getAttribute('data-i18n');if(T.zh[k]){if(e.tagName==='INPUT')e.placeholder=T.zh[k];else if(k.indexOf('t_')===0||k.indexOf('d_')===0||k==='go_ai')e.innerHTML=T.zh[k];else e.textContent=T.zh[k]}});document.querySelectorAll('[data-i18n-wc]').forEach(function(e){var k=e.getAttribute('data-i18n-wc');if(T.zh[k]){if(k==='wc_title')e.innerHTML=T.zh[k];else e.textContent=T.zh[k]}});}
 var welcomed=localStorage.getItem('panguard_welcomed');
-if(welcomed){document.getElementById('welcome').style.display='none';return}
-bar.style.width='15%';
-setTimeout(function(){bar.style.width='40%'},600);
-setTimeout(function(){bar.style.width='65%'},1200);
-setTimeout(function(){bar.style.width='85%'},1800);
-setTimeout(function(){bar.style.width='100%'},2400);
+if(welcomed){document.getElementById('welcome').style.display='none';nav('dashboard');return}
+bar.style.width='10%';
+var steps=document.querySelectorAll('.wc-step .wc-icon');
+// Step 1: load rules (real API)
+af('/api/rules').then(function(r){return r.json()}).then(function(d){bar.style.width='30%';if(steps[0])steps[0].classList.add('done');var p=steps[0]&&steps[0].nextElementSibling;if(p){var h=p.querySelector('h4');if(h)h.textContent=(d.atr||0)+' ATR rules loaded'}}).catch(function(){bar.style.width='30%'});
+// Step 2: WS connects (handled by cWS onopen)
+setTimeout(function(){bar.style.width='50%';if(steps[1])steps[1].classList.add('done')},1200);
+// Step 3: load status (real API)
+af('/api/status').then(function(r){return r.json()}).then(function(d){bar.style.width='75%';if(steps[2])steps[2].classList.add('done');var p=steps[2]&&steps[2].nextElementSibling;if(p){var h=p.querySelector('h4');if(h)h.textContent=(d.mode==='protection'?'Protected':'Active')+' - '+(d.eventsProcessed||0)+' events'}}).catch(function(){bar.style.width='75%'});
+// Step 4: ready
+setTimeout(function(){bar.style.width='100%';if(steps[3])steps[3].classList.add('done')},2400);
 })();
 </script>
 </body>