Dark-themed admin panel built with React 18, TypeScript, Vite 5, TanStack Query, and Recharts. Features an interactive Skill Graph — a force-directed visualization of AI skills, agents, and rules.
| Layer | Technology |
|---|---|
| UI | React 18, TypeScript 5 |
| Build | Vite 5 |
| State | TanStack Query 5 |
| Charts | Recharts 3 |
| Routing | React Router 7 |
| Design | CSS variables, dark mode default |
npm install
npm run dev # → http://localhost:5175The dev server proxies /api to http://localhost:8000. Configure your backend API separately.
| Category | Pages |
|---|---|
| Customers & Growth | Company CRM, Tester Links, Feature Flags, Experimentation |
| Product Intelligence | Feedback, Feedback Triage, Nav Analytics, Metric Snapshots |
| Security & Compliance | Security & SOC2, Audit Log, Risk Framework |
| AI & Automation | Autonomy Control, Skill Graph |
| Infrastructure | Event Stream, Webhooks |
The Skill Graph (src/pages/SkillGraphPage.tsx) is an interactive D3-style force-directed visualization showing how AI commands, agents, and rules connect. Nodes are colored by type (indigo = commands, green = agents, amber = rules), sized by connectivity, and display usage heat rings from telemetry data.
Two view modes: Network (force simulation with drag) and Layered (horizontal bands by type).
The tools/mcp/skill-usage/ directory contains an MCP server that tracks skill usage:
log_skill_usage— Records which skills/agents/rules were used for a taskget_skill_usage— Retrieves usage statistics
Data is written to public/skill-usage.json, which the Skill Graph page fetches on load.
To use with Claude Code, the .mcp.json at the repo root registers the server.
npm run build # TypeScript check + Vite build → dist/
npm run typecheck # TypeScript onlyDocker deployment uses nginx to serve the SPA and proxy /api to a configurable backend:
docker build -t admin-dashboard .
docker run -e API_BASE_URL=https://your-api.example.com -p 80:80 admin-dashboard- Zero external backend coupling — all API communication via
src/api.ts - JWT authentication — token stored in localStorage, auto-redirects to login on expiry
- CSS variables only — no hardcoded colors, theme customizable via
:root - Lazy-loaded pages — each page is code-split for fast initial load