feat(vscode): add detail panels, browser executive dashboard, and security hardening

Add 5 dedicated detail webview panels (Kernel Debugger, Memory Browser,
Safety Stats, Audit Log, Active Policies) so all 8 sidebar panels now
open their own full-panel React views instead of falling back to the
Governance Hub.

Redesign the browser dashboard as an executive governance experience:
- Single-screen grid layout with all panels visible simultaneously
- 6 premium themes (Corporate Slate, Midnight Blue, Onyx, Azure Mist,
  High Contrast Dark, High Contrast Light) persisted via localStorage
- Policy editor with 5 governance templates (Strict Security, SOC 2,
  GDPR, Development, Rate Limiting), validation, test scenarios, and
  file download/import
- Real-time filtering on Audit Log (by severity) and Policies (by action)
- SLO trend arrows showing delta between updates
- Full data broadcast (SLO, topology, audit, policies) over WebSocket

Security hardening:
- Fix CSP mismatch between HTTP header and HTML meta tag (blob: for downloads)
- Escape all data values in browser innerHTML with esc() including numerics
- Sanitize CSS class attribute injection via regex whitelist
- Fix pre-existing XSS in CMVK results panel (escHtml on external API data)

Sidebar fixes:
- Panel settings modal now fully opaque (was 5% transparent)
- Browser launch button added to sidebar header
- PROMOTE_COMMANDS correctly routes all 8 panels

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Author: MythologIQ

packages/agent-os-vscode/esbuild.webview.mjs

@@ -20,6 +20,11 @@ const config = {
         'src/webviews/sloDetail/main.tsx',
         'src/webviews/topologyDetail/main.tsx',
         'src/webviews/hubDetail/main.tsx',
+        'src/webviews/kernelDetail/main.tsx',
+        'src/webviews/memoryDetail/main.tsx',
+        'src/webviews/statsDetail/main.tsx',
+        'src/webviews/auditDetail/main.tsx',
+        'src/webviews/policyDetail/main.tsx',
     ],
     bundle: true,
     outdir: 'out/webviews',

packages/agent-os-vscode/package.json

@@ -164,6 +164,31 @@
         "title": "Agent OS: Open Governance Hub",
         "icon": "$(dashboard)"
       },
+      {
+        "command": "agent-os.showKernelDebugger",
+        "title": "Agent OS: Open Kernel Debugger",
+        "icon": "$(debug-alt)"
+      },
+      {
+        "command": "agent-os.showMemoryBrowser",
+        "title": "Agent OS: Open Memory Browser",
+        "icon": "$(database)"
+      },
+      {
+        "command": "agent-os.showSafetyStats",
+        "title": "Agent OS: Open Safety Stats",
+        "icon": "$(shield)"
+      },
+      {
+        "command": "agent-os.showAuditDetail",
+        "title": "Agent OS: Open Audit Log Detail",
+        "icon": "$(list-unordered)"
+      },
+      {
+        "command": "agent-os.showPolicyDetail",
+        "title": "Agent OS: Open Active Policies Detail",
+        "icon": "$(law)"
+      },
       {
         "command": "agent-os.openSLOInBrowser",
         "title": "Agent OS: Open SLO Dashboard in Browser",

packages/agent-os-vscode/src/extension.ts

@@ -38,6 +38,11 @@ import { GovernanceStatusBar } from './governanceStatusBar';
 import { showSLODetail } from './webviews/sloDetail/SLODetailPanel';
 import { showTopologyDetail } from './webviews/topologyDetail/TopologyDetailPanel';
 import { showHubDetail } from './webviews/hubDetail/HubDetailPanel';
+import { showKernelDetail } from './webviews/kernelDetail/KernelDetailPanel';
+import { showMemoryDetail } from './webviews/memoryDetail/MemoryDetailPanel';
+import { showStatsDetail } from './webviews/statsDetail/StatsDetailPanel';
+import { showAuditDetail } from './webviews/auditDetail/AuditDetailPanel';
+import { showPolicyDetail } from './webviews/policyDetail/PolicyDetailPanel';
 
 // 3-Slot Sidebar (Sidebar Redesign)
 import { SidebarProvider } from './webviews/sidebar/SidebarProvider';
@@ -438,6 +443,26 @@ safe_query = "SELECT * FROM users WHERE id = ?"
         showHubDetail(context.extensionUri, governanceStore);
     });
 
+    const showKernelDebuggerCmd = vscode.commands.registerCommand('agent-os.showKernelDebugger', () => {
+        showKernelDetail(context.extensionUri, governanceStore);
+    });
+
+    const showMemoryBrowserCmd = vscode.commands.registerCommand('agent-os.showMemoryBrowser', () => {
+        showMemoryDetail(context.extensionUri, governanceStore);
+    });
+
+    const showSafetyStatsCmd = vscode.commands.registerCommand('agent-os.showSafetyStats', () => {
+        showStatsDetail(context.extensionUri, governanceStore);
+    });
+
+    const showAuditDetailCmd = vscode.commands.registerCommand('agent-os.showAuditDetail', () => {
+        showAuditDetail(context.extensionUri, governanceStore);
+    });
+
+    const showPolicyDetailCmd = vscode.commands.registerCommand('agent-os.showPolicyDetail', () => {
+        showPolicyDetail(context.extensionUri, governanceStore);
+    });
+
     // Agent Drill-Down Command (Dashboard Feature Completeness - Phase 2)
     const showAgentDetailsCmd = vscode.commands.registerCommand(
         'agent-os.showAgentDetails',
@@ -516,7 +541,8 @@ safe_query = "SELECT * FROM users WHERE id = ?"
             governanceServer = GovernanceServer.getInstance(
                 sloDataProvider,
                 agentTopologyDataProvider,
-                auditLogger
+                auditLogger,
+                policyDataProvider,
             );
             const port = await governanceServer.start();
             const url = `http://localhost:${port}`;
@@ -530,7 +556,8 @@ safe_query = "SELECT * FROM users WHERE id = ?"
             governanceServer = GovernanceServer.getInstance(
                 sloDataProvider,
                 agentTopologyDataProvider,
-                auditLogger
+                auditLogger,
+                policyDataProvider,
             );
             const port = await governanceServer.start();
             const url = `http://localhost:${port}/#slo`;
@@ -544,7 +571,8 @@ safe_query = "SELECT * FROM users WHERE id = ?"
             governanceServer = GovernanceServer.getInstance(
                 sloDataProvider,
                 agentTopologyDataProvider,
-                auditLogger
+                auditLogger,
+                policyDataProvider,
             );
             const port = await governanceServer.start();
             const url = `http://localhost:${port}/#topology`;
@@ -699,6 +727,11 @@ safe_query = "SELECT * FROM users WHERE id = ?"
         governanceStatusBar,
         // Governance Hub & Browser Experience
         showGovernanceHubCmd,
+        showKernelDebuggerCmd,
+        showMemoryBrowserCmd,
+        showSafetyStatsCmd,
+        showAuditDetailCmd,
+        showPolicyDetailCmd,
         showAgentDetailsCmd,
         exportAuditCSVCmd,
         openGovernanceInBrowserCmd,
@@ -891,13 +924,13 @@ function generateCMVKResultsHTML(result: any, webview: vscode.Webview): string {
     const modelRows = result.modelResults.map((m: any) => `
         <tr>
             <td>${m.passed ? '✅' : '⚠️'}</td>
-            <td><strong>${m.model}</strong></td>
-            <td>${m.summary}</td>
+            <td><strong>${escHtml(String(m.model))}</strong></td>
+            <td>${escHtml(String(m.summary))}</td>
         </tr>
     `).join('');
 
-    const issuesList = result.issues.length > 0 
-        ? `<ul>${result.issues.map((i: string) => `<li>${i}</li>`).join('')}</ul>`
+    const issuesList = result.issues.length > 0
+        ? `<ul>${result.issues.map((i: string) => `<li>${escHtml(i)}</li>`).join('')}</ul>`
         : '<p>No issues detected</p>';
 
     return `
@@ -942,7 +975,7 @@ function generateCMVKResultsHTML(result: any, webview: vscode.Webview): string {
         <div class="section">
             <h2>Recommendations</h2>
             <div class="recommendation">
-                ${result.recommendations}
+                ${escHtml(String(result.recommendations))}
             </div>
         </div>
         ` : ''}

packages/agent-os-vscode/src/server/GovernanceServer.ts

@@ -12,6 +12,7 @@ import * as http from 'http';
 import * as path from 'path';
 import { SLODataProvider } from '../views/sloTypes';
 import { AgentTopologyDataProvider } from '../views/topologyTypes';
+import { PolicyDataProvider } from '../views/policyTypes';
 import { AuditLogger } from '../auditLogger';
 import { ServerState, ClientConnection, ServerMessage, ServerMessageType } from './serverTypes';
 import { renderBrowserDashboard } from './browserTemplate';
@@ -51,20 +52,23 @@ export class GovernanceServer {
     private constructor(
         private readonly _sloProvider: SLODataProvider,
         private readonly _topologyProvider: AgentTopologyDataProvider,
-        private readonly _auditLogger: AuditLogger
+        private readonly _auditLogger: AuditLogger,
+        private readonly _policyProvider?: PolicyDataProvider,
     ) {}
 
     /** Get or create the singleton server instance. */
     public static getInstance(
         sloProvider: SLODataProvider,
         topologyProvider: AgentTopologyDataProvider,
-        auditLogger: AuditLogger
+        auditLogger: AuditLogger,
+        policyProvider?: PolicyDataProvider,
     ): GovernanceServer {
         if (!GovernanceServer._instance) {
             GovernanceServer._instance = new GovernanceServer(
                 sloProvider,
                 topologyProvider,
-                auditLogger
+                auditLogger,
+                policyProvider,
             );
         }
         return GovernanceServer._instance;
@@ -178,7 +182,7 @@ export class GovernanceServer {
     /** Apply security headers to all HTTP responses. */
     private _setSecurityHeaders(res: http.ServerResponse, nonce: string): void {
         res.setHeader('Content-Security-Policy',
-            "default-src 'self'; " +
+            "default-src 'self' blob:; " +
             `script-src 'nonce-${nonce}'; ` +
             "style-src 'self' 'unsafe-inline'; " +
             "connect-src 'self' ws://127.0.0.1:*");
@@ -237,6 +241,10 @@ export class GovernanceServer {
             ws.send(JSON.stringify({ type: 'sloUpdate', data: slo }));
             ws.send(JSON.stringify({ type: 'topologyUpdate', data: topology }));
             ws.send(JSON.stringify({ type: 'auditUpdate', data: audit }));
+            if (this._policyProvider) {
+                const policy = await this._policyProvider.getSnapshot();
+                ws.send(JSON.stringify({ type: 'policyUpdate', data: policy }));
+            }
         } catch {
             // Provider may not be ready yet; client will receive data on next broadcast cycle
         }
@@ -247,6 +255,17 @@ export class GovernanceServer {
         try {
             const slo = await this._sloProvider.getSnapshot();
             this.broadcast('sloUpdate', slo);
+            const topology = {
+                agents: this._topologyProvider.getAgents(),
+                bridges: this._topologyProvider.getBridges(),
+                delegations: this._topologyProvider.getDelegations(),
+            };
+            this.broadcast('topologyUpdate', topology);
+            this.broadcast('auditUpdate', this._auditLogger.getRecent(50));
+            if (this._policyProvider) {
+                const policy = await this._policyProvider.getSnapshot();
+                this.broadcast('policyUpdate', policy);
+            }
         } catch {
             // Non-critical: broadcast failure retries automatically on next 10s interval
         }