title: CloudSlash - Web Dashboard Reference description: The web dashboard is a React SPA embedded in the daemon binary. No npm, no separate server: it is at localhost:8080 the moment cs daemon starts. The dashboar...

Web Dashboard¶

The web dashboard is a React SPA embedded in the daemon binary. No npm, no separate server: it is at localhost:8080 the moment cs daemon starts.

Launching the Dashboard¶

cs daemon                  # Start daemon + open Web UI at localhost:8080
cs daemon --mock           # Demo mode with 10,000 simulated resources
# Web UI is served at http://localhost:8080 (port is fixed; not overridable via CLI)

The dashboard opens automatically in your default browser. If it doesn't, navigate to http://localhost:8080.

Dashboard Overview¶

Opening the dashboard shows the Overview tab with four KPI cards at the top:

Below the cards, the overview shows a summary of active findings, policy violations, and recent scan activity.

Navigation Tabs¶

The dashboard is organized into 11 tabs, each focusing on a specific aspect of your infrastructure:

Topology¶

The interactive topology graph renders your entire infrastructure as a force-directed network diagram powered by React Flow. Resources are nodes, relationships are edges.

• Pan and zoom to explore large graphs
• Click a node to see full resource details (CRN, cost, tags, heuristic findings, provenance)
• Filter by provider using the sidebar controls (AWS, GCP, Azure, K8s, Linode)
• Edge types are color-coded: AttachedTo, SecuredBy, FlowsTo, Contains, Grants

The Universal Graph View provides an advanced explorer with search, filtering, and graph algorithm visualization.

PolicyMesh¶

View all loaded CEL policies, their enforcement status, and trigger counts. From this tab you can:

• Toggle enforcement mode between shadow (log-only) and enforcing (blocks remediation)
• Edit policies in the syntax-highlighted CEL editor with live validation
• Dry-run a policy against the live graph to preview which resources would match
• Read-Only Mode
• Security Priority
• Reorder priorities via drag-and-drop

s.a.u Pipeline¶

The Kanban-style remediation pipeline. Resources flow through stages:

Flagged → Analyzed → Codegen → s.a.u Gate → Pending → Applied

• Drag resources between stages
• Bulk actions: select multiple resources and approve/reject/dismiss in one click
• Click a resource to see its Terraform plan diff, blast radius, and reversibility assessment

DEVI AI Chat¶

The AI copilot tab. Ask questions about your infrastructure in natural language:

• "Which resources cost the most in us-east-1?"
• "Generate a plugin for DigitalOcean"
• "What's the blast radius of terminating this NAT gateway?"
• "Write a CEL policy to block public RDS instances"

The chat shows tier indicators. You see whether DEVI routed your query to the fast router model or escalated to the deep frontier model. Tool calls display inline so you see exactly what DEVI queried.

Saga Timeline¶

Step-by-step visualization of s.a.u saga execution. Each saga shows its ordered steps (forward action + compensating rollback), current progress, and whether any step failed and triggered automatic unwinding.

History & Audit¶

Chronological event log of all engine activity: scans, quarantine decisions, approvals, rejections, policy changes, and pipeline movements. Filter by event type, resource CRN, or time range.

Marketplace¶

Browse and install community plugins from the CloudSlash registry. Search by name, view plugin details (version, author, category), and install with one click.

Insights¶

Deep analysis results including:

• Anomaly detection: statistical outliers in resource metrics
• Drift analysis: resources whose live state diverges from Terraform declarations
• Solver results: formal verification confidence scores
• Oracle proofs: network reachability analysis
• Provenance: Git blame data showing who created each resource

Trend¶

Cost trend analysis with time-series charts. Visualize waste count and projected savings over days, weeks, or months. Week-over-week comparisons highlight whether your optimization efforts are working.

Plugins¶

Manage installed plugins. Toggle plugins active/inactive, view version information, and see which resource types each plugin scans.

Settings¶

Click the gear icon to open the Settings modal. From here you can configure:

• AI Provider: Select your LLM provider (Ollama, OpenAI, Anthropic, Gemini, Groq) and model
• Heuristic Sliders: Tune the sensitivity thresholds for waste detection
• Plugin Activation: Enable/disable specific provider plugins
• Data Management: Configure event retention and prune old history

Settings changes apply immediately via hot-reload. No daemon restart required.

Real-Time Updates¶

The Web Dashboard connects to the daemon via WebSocket for real-time streaming. When the engine discovers new resources, evaluates policies, or processes remediations, the dashboard updates instantly without requiring a page refresh.

The connection status is shown in the dashboard header. If the daemon goes offline, the dashboard displays cached data and automatically reconnects when the daemon comes back.

Network Reachability¶

The Network Reachability component visualizes the results of the Oracle engine's formal verification. It shows:

• Whether Internet → Database reachability exists on critical ports
• Security group relationships and traffic flow paths
• Formal proof traces (reachable / unreachable / unknown)

WebGPU Simulator¶

If your browser supports WebGPU, the dashboard includes a GPU-accelerated physics simulation for large graph rendering. This uses WGSL compute shaders to handle force-directed layout calculations on the GPU, enabling smooth interaction with graphs containing thousands of nodes.