Developer
dd778d8850
Web UI rework (openspec/changes/web-ui-rework). Foundation slice: - Add @tanstack/react-table; remove orphaned recharts, d3 - Vendor shadcn primitives: tabs table dialog input label checkbox switch progress separator avatar textarea dropdown-menu scroll-area - Add Vitest + @testing-library/react + jsdom harness; npm test script - Delete no-op theme.ts shim; remove getAppTheme references - Smoke test proves the harness Gate: build + lint + test green.
17 lines
1.6 KiB
YAML
17 lines
1.6 KiB
YAML
schema: spec-driven
|
|
|
|
context: |
|
|
Manage: homelab media + server-operations dashboard. FastAPI backend (backend/) + Vite/React/TypeScript frontend (frontend/).
|
|
Frontend stack: React 18, TypeScript, Vite, TanStack Query, Tailwind CSS v4 (CSS @theme config in src/index.css), shadcn/ui (Radix primitives), lucide-react, react-router-dom, react-oidc-context.
|
|
MIGRATION IN PROGRESS: MUI v9 (@mui/material, @mui/icons-material, @mui/x-data-grid, @emotion/react, @emotion/styled) -> shadcn/ui + Tailwind + lucide-react. The shell (frontend/src/App.tsx) and frontend/src/components/ObservabilityPage.tsx are already migrated and are the style targets. @mui/x-data-grid (pages/Media.tsx, pages/FileBrowser.impl.tsx) migrates to TanStack Table (@tanstack/react-table) with shadcn table styling.
|
|
DESIGN TOKENS: src/index.css already defines a full Tailwind v4 @theme token system (light + .dark), Inter font, primary #4f8cff, radius 0.625rem. tailwind.config.cjs is minimal. theme.ts is a no-op shim, safe to delete.
|
|
OBSERVABILITY MODEL: Manage is a THIN dashboard. Charts/metrics/logs live in EXTERNAL, decoupled Grafana. In-app surfaces show Alertmanager alerts + Prometheus target health + Grafana deep-links (kiosk iframe). Do NOT re-implement charting in-app. No recharts/d3 is in use.
|
|
|
|
rules:
|
|
proposal:
|
|
- Always include a "Non-goals" section
|
|
- Call out the DataGrid (TanStack Table) migration as the key technical risk
|
|
tasks:
|
|
- Slice work into chained PRs of at most 400 changed lines each
|
|
- Each slice must leave `npm run build` (tsc -b + vite build) and `npm run lint` green
|