Developer
9de2d5b8d2
Web UI rework. Final slice.
- Remove from package.json: @mui/material, @mui/icons-material,
@mui/x-data-grid, @emotion/react, @emotion/styled (zero consumers
remain in src after slices 1-7b; grep-verified).
- Update docs/REQUIREMENTS.md (+63 lines): single design system
(shadcn/ui + Tailwind v4 + lucide-react), thin-dashboard observability
model (no in-app charts; Grafana deep-links), TanStack tables
(visibility-only parity), reconciled IA (Backups top-level nav;
Media at /media with /applications redirect), repurposed chart-*
status cues, removed deps list.
- Note: AGENTS.md 'node --test tests' invocation is a pre-existing
broken command (treats tests/ as a module); correct form is
'node --test' (auto-discover, 5/5 pass) — verified identical at
pre-rework baseline ef5311b.
Gate: build + lint + vitest (23/64) + node --test (5/5) green.
Web UI rework complete.
Manage Frontend
React + TypeScript SPA for Manage, consuming the FastAPI backend.
Tech Stack
- Vite — Build tool
- React 18+ — UI framework
- TypeScript — Type safety
- @tanstack/react-query — Data fetching/caching
- ag-grid-react — Data tables (media, file browser)
- recharts — Monitoring charts
- react-router-dom — Client-side routing
- Tailwind CSS — Styling
Setup
cd frontend
npm install
Development
npm run dev
Runs on http://localhost:5173 with API requests proxied to http://localhost:8000.
Make sure the backend is running:
cd ../backend
uvicorn main:app --reload --port 8000
Build
npm run build
Output goes to frontend/dist/.
Pages
- Dashboard (
/) — Now playing, backend-collected per-machine monitoring table with 10-minute averages/min/max, library stats, frontend/backend version chips in the shell header - Monitoring (
/monitoring) — Per-machine CPU/IO wait/RAM/network/disk charts, collector controls, and backend-collected recent action history - Media (
/media) — Full-library table with sort/filter/search - Users (
/users) — Read-only Jellyfin user list with optional Jellyseerr enrichment - File Browser (
/files) — Remote directory browsing, ffprobe preview, jobs - Settings (
/settings) — Persistent monitoring machine definitions and setup workflow
Environment Variables
Set VITE_API_URL and any OIDC variables directly in your shell or Compose build args if the API is not at http://localhost:8000.
The frontend version defaults to the package.json version and can be overridden with VITE_APP_VERSION and VITE_APP_BUILD_INFO when you need explicit deployed labels.
VITE_API_URL=http://your-backend-host:8000
Configuration workflow examples
- Local development: run
docker compose -f docker-compose.dev.yml up --build, then open the app and add monitoring machines in the Settings tab. - Production: export the required Compose variables in your shell, run
docker compose up --build, and manage local/remote machines from Settings. - Dashboard monitoring UI: the dashboard shows a compact, sortable table with one row per configured machine plus poller status.
- Monitoring UI: the Monitoring tab shows one card per configured machine, including a recent action-history table populated by the backend poller. A machine can be
local(the API host itself) orssh(a remote host), and the UI treats both the same after configuration. The page also shows the backend poller health badge.
In development, the Vite proxy handles /api requests automatically.