kb dashboard

kb-dashboard — Web Dashboard

Language: React + TypeScript · Primary Maintainer: Rupa — Design & Frontend · Collaborator: Tejaswini — Frontend & Backend

The primary human-in-the-loop operator interface for live defense operations.

Stack

• React 18 + TypeScript 5, built with Vite
• Real-time zone distribution and per-process behavioral score views
• Swarm topology as a live D3.js force graph (nodes shifting, edges tightening as agent state changes)
• All data delivered over a persistent WebSocket connection — no polling, no stale state
• Recharts for charts/graphs

Capabilities

• Zone distribution heat view
• Per-process score stream
• D3 force-graph swarm topology visualization
• Soft-kill / hard-kill operator actions

Template Baseline

Scaffolded from the standard Vite React+TS template (@vitejs/plugin-react or @vitejs/plugin-react-swc). The React Compiler is intentionally not enabled by default due to its dev/build performance impact — see the template docs if you want to add it.

For production hardening, the recommended ESLint upgrade path is tseslint.configs.recommendedTypeChecked (or strictTypeChecked for stricter rules), plus eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules.

Run

cd kb-dashboard
npm install
npm run dev

Data Flow

kb-control-plane (gRPC: StreamEvents / StreamAlerts)
        │
        ▼
   WebSocket bridge
        │
        ▼
   kb-dashboard (React)

See also: Architecture (Layer 4 — Operator Interface), kb-control-plane (the gRPC streams the dashboard consumes), kb-tui (the terminal-based alternative surface).