feat: v2 dashboard — React + Vite parallel implementation

New modern dashboard at /v2 running alongside the existing UI at /.
Same backend, same APIs, same WebSocket — zero backend changes.

Stack: React 19 + Vite + TypeScript + Recharts
Source: frontend/ — build output: static/v2/

Phase 1 delivers:
- Character overview cards in a responsive CSS Grid
  - Live HP/Stamina/Mana bars via WebSocket vitals
  - Kills/hr, total kills, deaths, session uptime
  - VTank state badge (Combat/Nav/Idle)
  - Location coordinates
  - Click to expand: combat stats, prismatic count, CPU/RAM
- Global stats header: active chars, total kills, total rares, server health
- WebSocket hook with auto-reconnect
- HTTP poll fallback for initial load + server health
- Mobile responsive (single column on narrow screens)
- Dark theme matching the MosswartOverlord palette

Build: cd frontend && npm run build
Access: /v2 (served by existing NoCacheStaticFiles mount)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik 2026-04-12 15:07:11 +02:00
parent ee30ad2636
commit e58c05c895
24 changed files with 3213 additions and 0 deletions

21
frontend/src/App.tsx Normal file
View file

@ -0,0 +1,21 @@
import { Layout } from './components/Layout';
import { GlobalStats } from './components/GlobalStats';
import { CharacterGrid } from './components/CharacterGrid';
import { useLiveData } from './hooks/useLiveData';
import './styles/global.css';
export default function App() {
const { characters, serverHealth, totalRares, totalKills } = useLiveData();
return (
<Layout>
<GlobalStats
activeChars={characters.size}
totalKills={totalKills}
totalRares={totalRares}
serverHealth={serverHealth}
/>
<CharacterGrid characters={characters} />
</Layout>
);
}