feat(frontend): slice 3 — Backups cluster migration + nav/IA

Web UI rework.
- Migrate BackupAlertsTable, BackupJobsTable, BackupRunsTable,
  BackupsPage, BackupDashboardWidget off @mui (shadcn Table + Badge
  severity variants: success=chart-2, warning=chart-3, destructive)
- App.tsx IA: Backups now top-level nav (DatabaseBackup icon);
  Media surface primary at /media; /applications -> /media redirect
  in both route trees (mirrors /monitoring -> /observability)

Gate: build + lint + test green.

openspec/changes/web-ui-rework/apply-progress.md

@@ -330,3 +330,171 @@ Slice 2 is complete (25/71 tasks). Next in dependency order: **Slice 3 — Backu
 cluster + nav/IA** (uses slice-2 `Table`/`Badge`/`Tabs`/cards and lands the
 `/backups` nav item + `/applications`→`/media` redirect; `DatabaseBackup` icon
 confirmed available). See `tasks.md` Slices 3–8 for the verbatim unchecked list.
+
+## Slice 3 — Backups cluster + navigation/IA — COMPLETE
+
+All 8 Slice-3 task lines in `tasks.md` are now `- [x]`. The 5 Backups components
+are MUI-free and the reconciled IA (`/backups` top-level nav item, Media at
+`/media`, `/applications` → redirect) is live. Cumulative change task progress:
+25 → **33/71** complete.
+
+### Status context consumed
+
+- `applyState` reported by the status engine: **blocked** (`blockedReasons`:
+  domain specs missing/partial; legacy flat `spec.md` present without domain
+  specs). Same planning-completeness gap as slices 1–2 — **not** a safety or
+  `actionContext` blocker.
+- `actionContext`: `mode: repo-local`, `workspaceRoot: /home/user/Manage_01`,
+  `allowedEditRoots: ["/home/user/Manage_01"]`, `warnings: []` — safe.
+- This run executed the explicitly delegated **Slice 3 (Backups cluster +
+  nav/IA)** scope per the parent acceptance contract. Slice-3 work is fully
+  specified in `tasks.md` (Slice 3) + `design.md` (§1 mapping table, §2.3
+  status→Badge variant map, §4 IA) and does not depend on the missing domain
+  specs. `instructions.apply`: "Implement only unchecked tasks from the tasks
+  artifact." → proceeded under the parent's explicit slice delegation.
+- `artifactStore: openspec`; persisted task checkboxes updated in `tasks.md`
+  (Slice 3: 0 → 8 `[x]`).
+
+### Completed tasks (persisted checkboxes updated)
+
+- [x] Migrated `BackupAlertsTable.tsx` → shadcn `Table` family on a bordered
+  rounded surface + `Badge` (`severityVariant`: `critical`→`destructive`,
+  `warning`→`warning`) + `Button variant="outline" size="sm"` acknowledge
+  (hidden when `acknowledged`). Preserve `formatTimestamp`, props, callback.
+- [x] Migrated `BackupJobsTable.tsx` → shadcn `Table` + `Badge`
+  (`statusVariant`: `success`→`success`, `failure`→`destructive`,
+  `in_progress`→`warning`, unknown→`secondary`). Latest-run status, `formatInterval`,
+  last-run + next-expected timing preserved.
+- [x] Migrated `BackupRunsTable.tsx` → shadcn `Select` (status filter,
+  `onValueChange`) + `Badge` (`success`/`destructive`/`warning`) + `Table`.
+  `formatDuration`/`formatBytes`/`formatTimestamp` + filter logic preserved.
+- [x] Migrated `BackupDashboardWidget.tsx` → shadcn `Card`/`CardHeader`/
+  `CardTitle`/`CardContent` + `Badge` (active_alerts>0 → `destructive`) +
+  `text-destructive` last-failed line. total_jobs / 24h success rate / active
+  alerts / last-failed-time + loading state preserved.
+- [x] Migrated `BackupsPage.tsx` → shadcn `Tabs` (controlled `value`/
+  `onValueChange`, string values `jobs|runs|alerts`) with `TabsContent` per tab;
+  jobs/runs/alerts behavior, latest-runs map, and the acknowledge mutation
+  preserved. In-page `<h1>` kept to match the already-migrated `ObservabilityPage`.
+- [x] Applied the §4 IA nav + route edits in `App.tsx`: imported `DatabaseBackup`
+  from lucide-react; nav `Media` retargeted `/applications` → `/media`; added
+  top-level `{ path: "/backups", label: "Backups", icon: DatabaseBackup }` (after
+  Files, before Users); in **both** route blocks `/media` is the canonical
+  `<Applications />` element and `/applications` is `<Navigate to="/media"
+  replace />` (mirrors the existing `/monitoring` → `/observability` redirect).
+  `/backups` already rendered `<BackupsPage />`.
+- [x] Added component tests: `BackupRunsTable` (status→Badge variant mapping +
+  formatted duration/size), `BackupAlertsTable` (severity→variant, acknowledge
+  callback fires with the id, acknowledged hides the button),
+  `BackupDashboardWidget` (loading state, stats render, active_alerts>0 →
+  destructive Badge + last-failed line). 8 new tests across 3 files.
+- [x] **Exit gate green:** `/backups` reachable from the sidebar; `/applications`
+  redirects to `/media`; 5 Backups components MUI-free; `npm run build` +
+  `npm run lint` + `npm test` + `npm run test:node` all pass.
+
+### Files changed (tracked)
+
+Modified (6):
+
+- `frontend/src/components/BackupAlertsTable.tsx`
+- `frontend/src/components/BackupJobsTable.tsx`
+- `frontend/src/components/BackupRunsTable.tsx`
+- `frontend/src/components/BackupDashboardWidget.tsx`
+- `frontend/src/components/BackupsPage.tsx`
+- `frontend/src/App.tsx` (icon import, `navItems`, both route blocks)
+
+Added (new, 3 test files):
+
+- `frontend/src/components/__tests__/BackupRunsTable.test.tsx`
+- `frontend/src/components/__tests__/BackupAlertsTable.test.tsx`
+- `frontend/src/components/__tests__/BackupDashboardWidget.test.tsx`
+
+Persisted artifact updated:
+
+- `openspec/changes/web-ui-rework/tasks.md` (Slice 3 checkboxes 0 → 8 `[x]`)
+
+Untouched (no-unintended-edits respected): **no `frontend/src/pages/*` file was
+edited this slice** — `git status --porcelain frontend/src/pages` is empty.
+Applications.tsx itself was **not** edited (slice 4 owns it); only its route +
+nav entry changed. No `components/ui/*` primitive was modified. The pre-existing
+`/monitoring` → `/observability` redirect is intact.
+
+### Commands run (validation) — all green
+
+- `grep -rlE '@mui/(material|icons-material)' <5 backups files>` → **ALL 5
+  BACKUPS MUI-FREE**.
+- `cd frontend && npm run build` → **PASS** (`tsc -b` + `vite build`; the
+  >500 kB chunk-size warning is pre-existing and unrelated).
+- `cd frontend && npm run lint` → **PASS** (0 errors; the only 2 items are the
+  pre-existing `react-hooks/exhaustive-deps` **warnings** in
+  `UsersPage.impl.tsx`, out of Slice-3 scope).
+- `cd frontend && npm test` → **PASS** (Vitest: **15 files, 30 tests**; +3 files
+  and +8 tests vs slice-2 baseline of 12 files / 22 tests + the badge smoke).
+- `cd frontend && npm run test:node` → **PASS** (legacy node:test: 4 tests,
+  0 fail).
+- IA verification (`grep` of `App.tsx`): nav has `/media` Media + `/backups`
+  Backups; both route blocks have `/media` canonical + `/applications` Navigate
+  redirect + `/backups` BackupsPage; `/monitoring`→`/observability` intact.
+
+### Design decisions / deviations
+
+1. **Backups nav icon: `DatabaseBackup`.** Verified at the pinned
+   `lucide-react@^1.14.0` (slice-1 confirmation re-checked this run via
+   `node -e "…require('lucide-react').DatabaseBackup"` → object). Semantic fit,
+  no fallback needed. Placed after Files, before Users per design §4.1.
+2. **`/applications` is a replace-redirect to `/media`** in both route blocks
+   (OIDC-configured branch + unauthenticated branch), mirroring the existing
+   `/monitoring` → `/observability` redirect. `/media` is the canonical
+   `<Applications />` route. React Router v6 ranks routes by specificity, so
+   order is cosmetic; rendered `/media` before the `/applications` redirect to
+   match design §4.2's example snippet. The `Applications.tsx` component file
+   is **not** renamed (out of scope — design §4 non-goal).
+3. **`BackupsPage` keeps an in-page `<h1>`** ("Backups") to match the
+   already-migrated `ObservabilityPage` (`<h1 className="text-2xl font-bold
+   tracking-tight">`). The shell's `<main>` already provides `p-4 md:p-6`, so
+   the old `Box sx={{ p: 3 }}` double-padding was dropped per design §2.2.
+4. **Status / severity → Badge variant** uses the `chart-N` cue map per design
+   §2.3 (success=chart-2/success, failure/critical=chart-4/destructive,
+   in_progress=chart-3/warning, unknown=secondary). Verified via the
+   `data-variant` attribute assertions in the new tests (mirrors the slice-2
+   `SessionActivityPanel` test pattern).
+5. **`BackupRunsTable` status filter** uses the shadcn `Select` (`onValueChange`
+   with string values) instead of MUI `Select`/`FormControl`/`InputLabel`/
+   `MenuItem`; an `aria-label="Status filter"` is on the trigger for a11y. The
+   `all|success|failure|in_progress` filter set is unchanged.
+6. **`latestRuns` map left un-memoized** in `BackupsPage` (verbatim from the
+   pre-migration source) to preserve behavior exactly and avoid an extra
+   `useMemo`/exhaustive-deps surface.
+
+### Slice boundary / PR
+
+- Slice 3 is forecast "likely OK" at ≤400 lines as a single PR (tasks §per-slice
+  table). Actual review churn: ~6 modified components/App (~250 ins / ~270 del)
+  - 3 new test files (~150 lines) ≈ **~400 changed lines**, right at the budget.
+  The parent delegated the whole slice as one unit and owns the commit/PR; if
+  the parent prefers, the nav/route edit in `App.tsx` is a clean split point.
+  All gates are green.
+
+### Remaining tasks (Slices 4–8, 38 unchecked)
+
+Slice 3 is complete (33/71 tasks). Next in dependency order: **Slice 4 —
+Dashboard + Applications surface** (depends on slices 2 + 3; reuses
+`BackupDashboardWidget` from this slice and the reconciled `/media` route; the
+`Applications.tsx` component itself is migrated here). The first unchecked items:
+
+- [ ] Migrate `frontend/src/pages/Applications.tsx` …
+- [ ] Migrate `frontend/src/pages/Dashboard.tsx` …
+- … (see `tasks.md` Slices 4–8 for the verbatim unchecked list)
+
+### Top risk for slice 4
+
+- **`Dashboard.tsx` is the heaviest single page** (20 distinct MUI components:
+  Dialog/FormControl/FormControlLabel/Grid/Select/Switch/TextField/Stack/Grid…)
+  and composes the slice-3 `BackupDashboardWidget` plus `NowPlaying`. It is
+  forecast "medium" (~300–450 lines) and may need a 4a (Applications, smaller)
+  → 4b (Dashboard) sub-split on overrun. The reconciled `/media` route + the
+  shortcut deep-links must be re-pointed to `/media` (any Dashboard shortcut
+  still linking `/applications` will rely on the new redirect until re-pointed).
+  Overall change `applyState` remains **blocked** on missing domain specs (legacy
+  flat `spec.md`); does not block Slice 3 (done) but should be resolved before
+  `sdd-verify`/archive.

openspec/changes/web-ui-rework/tasks.md

@@ -146,14 +146,14 @@ Each slice section restates this gate as its final task.
 > This is where Backups becomes a top-level nav item and the Media/Applications route
 > is reconciled.
 
-- [ ] Migrate `frontend/src/components/BackupAlertsTable.tsx` (Chip/Paper/Table family/FormControl/InputLabel/MenuItem/Select/Button → `Badge` (status cues), bordered surface, shadcn `Table` family, shadcn `Select`; acknowledge button preserved; severity → Badge variant).
-- [ ] Migrate `frontend/src/components/BackupJobsTable.tsx` (Chip/Paper/Table family → `Badge` + shadcn `Table`; latest-run status + next-expected timing preserved).
-- [ ] Migrate `frontend/src/components/BackupRunsTable.tsx` (Chip/FormControl/InputLabel/MenuItem/Paper/Select/Table family → shadcn `Select` + `Badge` + `Table`; status filter + formatted duration/size/timestamp preserved).
-- [ ] Migrate `frontend/src/components/BackupDashboardWidget.tsx` (Box/Card/CardContent/Chip/Typography → shadcn `Card` + `Badge`; total jobs / 24h success rate / active alerts / last-failed-time preserved).
-- [ ] Migrate `frontend/src/components/BackupsPage.tsx` (Box/Tab/Tabs/Typography → shadcn `Tabs`; tabs Jobs/Runs/Alerts behavior + acknowledge mutation preserved).
-- [ ] Apply the IA nav + route edits in `frontend/src/App.tsx` per design §4: import a Backups icon (`DatabaseBackup`, or the slice-1-chosen fallback) from lucide-react; add a top-level `{ path: "/backups", label: "Backups", icon: … }` nav item (after Files, before Users); retarget the Media nav item from `/applications` to `/media`; in **both** route blocks add `<Route path="/media" element={<Applications />} />` and convert `<Route path="/applications" …>` to `<Route path="/applications" element={<Navigate to="/media" replace />} />`, mirroring the existing `/monitoring` → `/observability` redirect.
-- [ ] Add/extend component tests for the migrated Backups tables (status Badge variant mapping; alert acknowledge callback).
-- [ ] **Exit gate:** `/backups` reachable from the sidebar; `/applications` redirects to `/media`; Backups cluster MUI-free; `npm run build` + `npm run lint` + `npm test` + `node --test tests` green.
+- [x] Migrate `frontend/src/components/BackupAlertsTable.tsx` (Chip/Paper/Table family/FormControl/InputLabel/MenuItem/Select/Button → `Badge` (status cues), bordered surface, shadcn `Table` family, shadcn `Select`; acknowledge button preserved; severity → Badge variant).
+- [x] Migrate `frontend/src/components/BackupJobsTable.tsx` (Chip/Paper/Table family → `Badge` + shadcn `Table`; latest-run status + next-expected timing preserved).
+- [x] Migrate `frontend/src/components/BackupRunsTable.tsx` (Chip/FormControl/InputLabel/MenuItem/Paper/Select/Table family → shadcn `Select` + `Badge` + `Table`; status filter + formatted duration/size/timestamp preserved).
+- [x] Migrate `frontend/src/components/BackupDashboardWidget.tsx` (Box/Card/CardContent/Chip/Typography → shadcn `Card` + `Badge`; total jobs / 24h success rate / active alerts / last-failed-time preserved).
+- [x] Migrate `frontend/src/components/BackupsPage.tsx` (Box/Tab/Tabs/Typography → shadcn `Tabs`; tabs Jobs/Runs/Alerts behavior + acknowledge mutation preserved).
+- [x] Apply the IA nav + route edits in `frontend/src/App.tsx` per design §4: import a Backups icon (`DatabaseBackup`, or the slice-1-chosen fallback) from lucide-react; add a top-level `{ path: "/backups", label: "Backups", icon: … }` nav item (after Files, before Users); retarget the Media nav item from `/applications` to `/media`; in **both** route blocks add `<Route path="/media" element={<Applications />} />` and convert `<Route path="/applications" …>` to `<Route path="/applications" element={<Navigate to="/media" replace />} />`, mirroring the existing `/monitoring` → `/observability` redirect.
+- [x] Add/extend component tests for the migrated Backups tables (status Badge variant mapping; alert acknowledge callback).
+- [x] **Exit gate:** `/backups` reachable from the sidebar; `/applications` redirects to `/media`; Backups cluster MUI-free; `npm run build` + `npm run lint` + `npm test` + `node --test tests` green.
 
 ---