Wardvane is a live, animated admin dashboard for security operations centres, MSSP / MDR providers and in-house security teams. It covers the live threat picture, incident response, vulnerability and endpoint management, identity risk and audit-ready compliance (SOC 2, ISO 27001, GDPR, HIPAA) across several client organisations, in one workspace.
Built with React 19, TypeScript 6, React Router 7, Tailwind CSS 4 and Vite 8. There are no UI-kit or chart libraries: every chart, map and animated background is hand-built SVG and canvas.
Why Wardvane is different
- It feels alive. An animated background never stops moving, live alerts pop in, the world threat map blips, and the on-call bridge card plays a looping video with live captions.
- Ask Wardvane AI copilot. A floating bubble opens a side panel that explains alerts, summarises incidents and drafts client updates with citations, thinking steps and a tone switch. Connect your own LLM through one function.
- Triage mode. A full-screen, keyboard-first alert queue: resolve, escalate, mark as false positive, skip and undo, with swipe on touch screens.
- Five animated styles (Terrain, Constellation, Hex shield, Signal, Blackgrid), each in dark and light, plus three layouts and two densities, all in a live “Try me” panel.
Screens
- Security overview: on-call bridge, posture dial, attack surface graph, KPI stats, global threat map, live alert feed, compliance readiness, MITRE ATT&CK kill chain, risky assets and on-call rota.
- Threat monitoring: alert queue with filters, bulk actions, tactic strip, signal waterfall and alert drawer.
- Triage mode: the keyboard-first queue.
- Incidents: board and table views, plus detail pages with timeline, tasks, evidence, notes and AI summary.
- Vulnerability management: CVEs, exposure, SLAs and patch status.
- Endpoint inventory: fleet grid, device details and hold-to-isolate.
- Identity & access: risky sign-ins map, MFA coverage, permission matrix and inactive accounts.
- Compliance centre: SOC 2, ISO 27001, GDPR and HIPAA readiness, control matrix, evidence upload and audits.
- Security reports: analytics, a report library and a print-ready executive report.
- Team & roles: members, permissions, on-call timeline, client organisations and access audit log.
- Settings: nine sections — general, profile & security, integrations, alert rules, notifications, API keys & webhooks, playbooks, billing and audit log.
- Authentication: login (with SSO, passkey and MFA steps), sign-up, forgot password and 404.
Features
- Live alert pop-ups, a threat level in the top bar (calculated automatically or set by hand) and hold-to-lockdown.
- Command palette (Ctrl/⌘ + K), organisation switcher and a first-load boot sequence.
- Scroll-driven reveals and a scroll progress line.
- Demo memory: status changes, isolations and new incidents persist in the browser until you reset them.
- Custom SVG charts with tooltips: area chart with a pinned crosshair, bars, donut, heatmap, dial, rings, sparkline and meter.
- Responsive from 375 px phones to large desktops.
- Reduced-motion support and print styles.
- Strict TypeScript, oxlint, Docker setup, and every screen lazy-loaded.
- Clear backend hooks for alerts, incidents, devices, live detections, the AI copilot and authentication.
What’s included
- Full React + TypeScript source code.
- Documentation (HTML): installation, structure, styles, customization and connecting a backend.
- README and changelog.
Notes
- Wardvane is a frontend template that runs on realistic sample data. Real detections, authentication, storage and AI answers need your own backend.
- The portraits and the on-call video in the live preview are for demonstration only. The download includes placeholders with the same file names.
- Fonts: Mona Sans and Martian Mono (Google Fonts, SIL OFL). Icons: Lucide (ISC).
Changelog
1.0.0 — Initial release.