feat(vscode): governance visualization, detail panels, and browser executive dashboard

[MythologIQ]

Summary

Complete governance visualization system for the Agent OS VS Code extension. Builds a React/Tailwind webview panel system with 8 dedicated detail panels, a 3-slot configurable sidebar, and a browser-based executive governance dashboard with theming, policy editor, and real-time data.

10 commits | 183 files changed | +21,568 / -871 lines

---

What's Included

1. Governance Visualization Infrastructure

• SLO Dashboard — gauges, sparklines, budget bars, trust distribution
• Agent Topology — D3.js force-directed graph with trust-colored nodes
• Governance Hub — composite tabbed view (SLO + Topology + Audit + Policy)
• Mock backends for SLO, topology, and policy data during development

2. React/Tailwind Webview Panel System

• 3-slot configurable sidebar with panel picker overlay (gear icon)
• 8 summary panels: SLO Dashboard, Agent Topology, Governance Hub, Audit Log, Active Policies, Safety Stats, Kernel Debugger, Memory Browser
• 8 dedicated detail panels — each sidebar panel opens its own full-panel React view:

Panel	Components	Data
SLO Dashboard	Gauges, sparklines, budget bars	SLODataProvider
Agent Topology	Force graph, node details, bridges	AgentTopologyDataProvider
Governance Hub	Tabbed composite (SLO+Topo+Audit+Policy)	All providers
Audit Log	Severity badges, event table, counts	AuditLogger
Active Policies	Action badges, rule table, violations	PolicyDataProvider
Safety Stats	Blocked/warnings/CMVK stat cards	AuditLogger.getStats()
Kernel Debugger	Agent status table, metrics grid	KernelDebuggerProvider
Memory Browser	Expandable VFS tree, dir/file counts	MemoryBrowserProvider

• Attention modes: Auto (scanning + priority rotation) and Manual (user-locked)
• GovernanceStore with event-driven refresh, latency isolation, detail subscriptions
• Shared panelHost factory with CSP nonce-gated scripts, singleton lifecycle

3. Browser Executive Dashboard

Single-screen grid layout served via local HTTP server (127.0.0.1 only):

• Layout: SLO banner (full width) | Left tabs (Stats/Kernel/Memory) | Center topology (D3.js) | Right tabs (Policies/Audit/Editor)
• 6 premium themes persisted to localStorage:
  • Corporate Slate (default), Midnight Blue, Onyx, Azure Mist, High Contrast Dark, High Contrast Light
• Policy Editor with 5 governance templates:
  • Strict Security, SOC 2 Compliance, GDPR Data Protection, Development Mode, Rate Limiting
  • YAML/JSON/Rego format selector, client-side validation, 4 test scenarios, file download/import
• Real-time filtering on Audit Log (by severity) and Policies (by action type)
• SLO trend arrows showing delta between updates
• WebSocket broadcasts all 4 data types (SLO, topology, audit, policies) every 10s

4. Language Intelligence

• Diagnostic providers: policy YAML validation, governance rule checking
• Completion provider: policy keywords, signal names, governance patterns
• Hover provider: contextual documentation for governance terms
• Code actions: quick fixes for policy violations

5. Security Hardening

• CSP nonce-gated scripts on all webviews and browser dashboard
• esc() / escHtml() on all innerHTML data paths
• CSP blob: alignment between HTTP header and HTML meta tag
• CSS class attribute sanitization via regex whitelist
• XSS fix in CMVK results panel (external API data without escaping)
• WebSocket session token via Sec-WebSocket-Protocol (not URL query)
• Server binds to 127.0.0.1 only with rate limiting

6. Testing and Documentation

• Unit tests for GovernanceStore, detailFetchers, sidebar components, event bus, panel picker
• SECURITY.md, CHANGELOG.md
• OTel span validation tests
• Keyboard navigation (Ctrl+Shift+Up/Down for slot focus)

---

Architecture

packages/agent-os-vscode/
  src/
    extension.ts                # Activation, command registration
    server/                     # Browser dashboard (HTTP + WebSocket)
      GovernanceServer.ts       # Singleton local server
      browserTemplate.ts        # HTML grid layout
      browserStyles.ts          # 6 CSS themes
      browserScripts.ts         # WebSocket client, filtering, trends
      browserPolicyEditor.ts    # Policy templates + editor logic
    webviews/
      sidebar/                  # 3-slot sidebar (React)
        GovernanceStore.ts      # Event-driven state
        SidebarProvider.ts      # Webview lifecycle
        Sidebar.tsx             # Root component
        PanelPicker.tsx         # Config overlay
        panels/                 # 8 summary components
      shared/                   # DetailShell, panelHost, types
      sloDetail/                # SLO full panel
      topologyDetail/           # Topology full panel
      hubDetail/                # Hub composite panel
      kernelDetail/             # Kernel debugger panel
      memoryDetail/             # Memory browser panel
      statsDetail/              # Safety stats panel
      auditDetail/              # Audit log panel
      policyDetail/             # Policy detail panel
    views/                      # TreeDataProviders
    language/                   # Diagnostics, completions, hovers
    mockBackend/                # Dev data providers
    services/                   # Provider factory
  esbuild.webview.mjs           # 9 React entry points
  tailwind.config.js            # Monolith Ledger design system
  package.json                  # Extension manifest

Test plan

• tsc --noEmit passes with zero errors
• eslint src --ext ts passes with zero errors (warnings are pre-existing)
• Extension activates in VS Code Extension Development Host (F5)
• All 8 sidebar panels render summary data
• Clicking each sidebar panel opens its dedicated detail view
• Active Policies opens the full Policy Editor (not read-only)
• Panel picker (gear) opens, allows slot config, Apply saves
• Panel picker modal has opaque background
• Browser dashboard opens via sidebar link-external icon
• All 6 themes switch correctly and persist across reload
• Policy editor: template selection populates textarea with YAML
• Policy editor: validate, test, download, import all function
• Audit and policy filters narrow results with match counts
• SLO trend arrows appear after second WebSocket update
• Keyboard nav (Ctrl+Shift+Up/Down) moves slot focus
• No console errors in Extension Host or browser DevTools

---

Generated with Claude Code