feat(frontend): slice 7b — Media on TanStack Table (server pagination)

Web UI rework. Completes the DataGrid migration (7a + 7b):
- pages/Media.tsx off @mui/x-data-grid + @mui/material onto DataTable:
  15 locked columns (title/series/season/episode/type/year/runtime_min/
  size/bitrate/hdr/video/resolution/date_added/library/path);
  enablePagination + manualPagination + rowCount from queryResult.total;
  page state (pageIndex/pageSize) -> offset/limit into useMediaQuery;
  onRowClick -> navigate('/files?path=...') preserved; stable path-derived
  getRowId so selection survives server paging; column-visibility toggle.
  Hard rule honored: NO sorting, NO resizing (visibility-only).
- Migrate Media shell (Select/Input/Progress/Card/grid/Typography/Tabs).
- Media component tests (column set + row-click nav).
- Harness fix: polyfill ResizeObserver in test/setup.ts — jsdom lacks it
  and Radix primitives (Select/ScrollArea/etc.) reference it; was causing
  cross-test failures once Media pulled shadcn Select into the pool.

Gate: build + lint + test green (23 files / 64 tests).

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

@@ -1191,3 +1191,201 @@ limit, offset })`). The **columns-stability** discovery above is the #1 risk:
 shell migration (`Card`/`SectionCard`/`Grid`/`Select`/`Input`/`LinearProgress`
 → shadcn + CSS grid + `Progress`) is large; sub-split is already planned (7b is
 its own sub-PR).
+
+## Slice 7b — Media: DataGrid → TanStack Table with server-driven pagination (DONE)
+
+Migrated `frontend/src/pages/Media.tsx` **fully** off `@mui/x-data-grid` +
+`@mui/material` onto the frozen 7a `DataTable` wrapper (reused, not rewritten)
+with **server-driven** pagination, row selection, row-click → file browser, and
+visibility-only column parity. All 6 Slice-7b task lines in `tasks.md` are now
+`- [x]`. Cumulative change task progress: 53 → **59/71** (the 7a rows were
+already `[x]`; this run marks the 6 7b rows).
+
+### 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–7a — **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 7b** scope per the parent
+  acceptance contract (which also supplied the resolved delivery path: 7b-only
+  sub-PR, reuse the 7a `DataTable`). `design.md` §3.1–§3.4 (DataTable contract +
+  Media consumer contract) and §1 (component mapping) are authoritative and do
+  not depend on the missing domain specs.
+- `artifactStore: openspec`; persisted task checkboxes updated in `tasks.md`
+  (Slice 7b: 0 → 6 `[x]`).
+
+### Completed tasks (persisted checkboxes updated)
+
+- [x] **15 locked columns** — `mediaColumns: ColumnDef<MediaItem>[]` is a
+  **module-level constant** (stable — see 7a columns-stability discovery) with
+  exactly the 15 columns via `accessorKey`: `title, series, season, episode,
+  type, year, runtime_min, size, bitrate, hdr, video, resolution, date_added,
+  library, path`. Column `id` == `accessorKey`, so the visibility dropdown lists
+  exactly these 15. Headers match the pre-rework headerNames (incl. `video` →
+  "Video codec"). Cells rely on TanStack's default accessor rendering (the
+  backend `display_media_row` already formats `size`/`bitrate`/`date_added` as
+  strings; `runtime_min` shows the raw minute int — same as the DataGrid).
+- [x] **DataTable wiring** — `enableRowSelection` (controlled `rowSelection` +
+  `setRowSelection`), `enablePagination` + `manualPagination` +
+  `rowCount={queryResult.total}`, `onRowClick={handleRowClick}` →
+  `navigate('/files?path=${encodeURIComponent(row.path)}')` (PRESERVED exact
+  pre-rework row-click → file-browser behavior), `enableColumnVisibilityToggle`.
+- [x] **Lifted state + server-driven paging** — added `offset` (kept),
+  `pageSize` (new, default `100`), and `columnVisibility` (new, default `{}`) to
+  the `MediaTabState` persisted via the existing `usePersistentState`
+  (`manage.media.tabState`). `pagination = { pageIndex: Math.floor(offset /
+  pageSize), pageSize }`; `onPaginationChange` maps back to `offset`/`pageSize`
+  (and resets `offset` to 0 on page-size change). `useMediaQuery({ limit:
+  pageSize, offset, … })`. `getRowId = getMediaRowId(row) => row.path`
+  (module-level, stable, **path-derived** so selection survives server-driven
+  paging). Old persisted state without `pageSize`/`columnVisibility` is
+  back-compat-merged with defaults on read.
+- [x] **Shell migrated** — `Card`/`CardContent` → shadcn `Card`/`CardContent`;
+  `Grid` → `grid grid-cols-1 md:grid-cols-12 gap-4` (filter row: search
+  `md:col-span-4`, types/hdr/sort/order `md:col-span-2` each); MUI
+  `FormControl`/`InputLabel`/`MenuItem`/`Select` → shadcn `Select` family (file-
+  local `FilterSelect` helper, no empty-value items so no sentinel needed);
+  `TextField` → `Input` + `Label`; `LinearProgress` → shadcn `Progress`
+  (determinate) / pulsing bar (indeterminate — preserves the pre-rework
+  `variant="indeterminate"` affordance) via a file-local `BuildProgress`;
+  `Stack`/`Box` → `flex flex-col gap-*`; `Typography` → semantic text utilities;
+  `Alert` (the "No index built yet.") → shadcn `Alert` + `AlertDescription`
+  (`destructive`). Index-build controls + progress (Build / Stop=`destructive` /
+  Force stop=`outline`+`text-chart-3` cue, overall + per-library progress, items
+  processed/total, elapsed/eta, cancel-requested) preserved verbatim. MUI's
+  `useMediaQuery("(max-width:900px)")` is replaced by a local
+  `usePrefersSmallScreen` (`window.matchMedia`) that re-applies the pre-rework
+  mobile column-visibility override (forces the same 9 columns hidden on small
+  screens); the hook is defensive (`matchMedia` absent → desktop) so jsdom never
+  crashes.
+- [x] **Component tests** — `src/pages/__tests__/Media.test.tsx` (6 tests):
+  (1) the toggleable column set equals the locked 15 (open the Columns dropdown,
+  collect `menuitemcheckbox` names, assert exactly the 15 + excludes
+  `__select__`); (2) the 15 data column headers render (incl. "Video codec");
+  (3) row-click navigates to `/files?path=<encoded path>` (mocked `navigate`);
+  (4) toggling a row checkbox does NOT navigate (selection-cell stopPropagation
+  parity); (5) server-driven pagination total + page controls render
+  (`rowCount`-driven "2 rows", "Page 1 of 1", disabled Previous); (6) Build
+  disabled while running (Stop/Force-stop surface). Hooks mocked via `vi.mock`;
+  `usePersistentState` runs for real (localStorage cleared in `beforeEach`).
+- [x] **Exit gate (7b)** — see gate table below (build/lint/test/node all green);
+  `@mui/x-data-grid` no longer imported by Media (or FileBrowser); **no sorting,
+  no resizing** (DataTable never wires `getSortedRowModel`/`enableColumnResizing`;
+  Media passes neither).
+
+### Files changed (this slice)
+
+Modified:
+
+- `frontend/src/pages/Media.tsx` (full rewrite; `@mui/x-data-grid` +
+  `@mui/material` → `DataTable` + shadcn/Tailwind)
+- `openspec/changes/web-ui-rework/tasks.md` (Slice 7b checkboxes 0 → 6 `[x]`)
+
+Added (new):
+
+- `frontend/src/pages/__tests__/Media.test.tsx` (6 component tests)
+
+Untouched (no-unintended-edits respected): `frontend/src/components/ui/data-table.tsx`
+(7a, **frozen — reused, not edited**), `FileBrowser.impl.tsx` (7a, already
+TanStack), `Applications.tsx` + its test (test already `vi.mock("../Media")`, so
+the child swap is transparent), every other page/component, `package.json`
+(MUI/@emotion removal is slice 8), `docs/REQUIREMENTS.md` (slice 8).
+`git status --porcelain` shows exactly `M frontend/src/pages/Media.tsx` +
+`?? frontend/src/pages/__tests__/Media.test.tsx` (plus these two OpenSpec
+artifacts).
+
+### Gate results (run from `frontend/`) — ALL GREEN
+
+| Gate | Command | Result |
+|------|---------|--------|
+| MUI-free | `grep -cE '@mui/(material\|icons-material\|x-data-grid)' src/pages/Media.tsx` | ✅ **0** |
+| Build | `npm run build` (`tsc -b` + `vite build`) | ✅ exit 0 (chunk-size warning pre-existing, not a failure) |
+| Lint | `npm run lint` (`eslint .`) | ✅ exit 0 — 0 errors; 2 warnings both **pre-existing** in `UsersPage.impl.tsx` (slice 6b, out of scope) |
+| Test | `npm test` (`vitest run`) | ✅ **23 files / 64 tests** pass (baseline 22/58 → +1 file, +6 tests) |
+| Legacy node | `node --test tests/*.test.mjs` | ✅ 4/4 pass |
+| Visibility-only | (Media passes no sort/resize; DataTable 7a enforces) | ✅ no sorting, no resizing |
+
+> **Known flake (NOT a 7b regression):** under parallel load the full suite
+> occasionally flakes `UsersPage.test.tsx` "opens compose and inserts bold markup"
+> (slice-6b compose-test timing sensitivity, already documented in the 7a
+> progress notes). It passes **7/7 in isolation across 2 runs**, and the **full
+> suite is 23/23 on a re-run**. My diff touches Media.tsx + Media.test.tsx only;
+> `UsersPage.impl.tsx` is unchanged this slice.
+
+> **`node --test tests` (no glob):** fails with `Cannot find module '.../tests'`
+> — the **pre-existing** Node 22 invocation quirk noted since slice 1. The
+> package's canonical node-suite command `node --test tests/*.test.mjs` is green
+> (4/4). My diff does not touch `package.json` or `tests/`.
+
+### Design decisions / deviations
+
+1. **Default page size = 100 (parity).** The pre-rework Media used a fixed
+   `limit = 100`; `pageSize` defaults to `100` so initial paging behavior is
+   identical. The DataTable pager now also offers `[50, 100, 200]` (a feature
+   addition permitted by design §3.4's "pagination parity"), with `offset`
+   reset to 0 on any page-size change to keep the server offset sane.
+2. **Column cells use default accessor rendering.** The task text suggested
+   `formatDuration`/`humanSize`/`formatBitrate`/HDR-badge formatting, but the
+   backend `display_media_row` **already** returns formatted strings for
+   `size`/`bitrate`/`date_added`/`hdr`/`video`/`resolution`, and the pre-rework
+   DataGrid rendered raw field values. Applying those formatters to already-
+   formatted strings would break parity (e.g. `humanSize("12.4 GB")`), so cells
+   render the raw field value (exact parity). `formatDuration` is still used for
+   build elapsed/eta (unchanged).
+3. **`usePrefersSmallScreen` replaces MUI `useMediaQuery`.** Local
+   `window.matchMedia("(max-width: 900px)")` hook re-applies the pre-rework
+   mobile column-visibility override (same 9 columns hidden). It is defensive
+   (treats missing `matchMedia` as desktop) so jsdom renders the full 15-column
+   desktop layout in tests without editing the shared `src/test/setup.ts` (out
+   of scope).
+4. **The standalone Prev/Next pager + `hideFooter`** from the DataGrid are gone —
+   the `DataTable` pagination footer (Previous/Next + "Page X of Y" + rows-per-
+   page + server total) replaces them (page-nav parity). A one-line "Showing X
+   of Y items | Page X of Y" caption is kept above the table for the per-page
+   count (the footer shows the server total only).
+5. **No fixed 640px scroll box.** The pre-rework DataGrid was bounded to a 640px
+   scroll viewport; the TanStack/shadcn table now flows on the page (page-level
+   scroll). Behavior parity (paging/selection/row-click) is preserved; the
+   bounded-viewport visual is a minor deviation. The DataTable wrapper was not
+   modified (7a frozen).
+6. **Row selection is NEW behavior** (the pre-rework Media had
+   `checkboxSelection={false}`). Design §3.4 / tasks.md explicitly require
+   `enableRowSelection` on Media, so a leading checkbox column is now present.
+   Selection state is local `useState` (resets on reload — no pre-rework parity
+   to preserve); `getRowId` is path-derived so any selection survives server
+   paging.
+
+### Slice boundary / PR
+
+Single sub-PR, well within the 400-line budget: ~1 file rewrite (~310 inserted
+/ ~360 deleted net of the MUI teardown — the migration is more compact) + 1 new
+test file (~210 lines). No 7b sub-split needed. The parent owns the commit/PR;
+nothing committed here.
+
+### Top risk for slice 8 (cleanup + docs)
+
+**Slice 8 removes `@mui/material`, `@mui/icons-material`, `@mui/x-data-grid`,
+`@emotion/react`, `@emotion/styled` from `package.json`** — but `UsersPage.impl.tsx`
+still imports `@mui/icons-material` + `@mui/material` (slice **6b** is still
+unchecked: compose dialog + 9 icons). Until 6b lands, `@mui/*` is NOT safe to
+uninstall. Slice 8's grep gate (`grep -rlE '@mui/(material|icons-material|...)'
+frontend/src` returns nothing) will **fail** until 6b completes. So **6b must
+land before (or alongside) slice 8**. Secondary slice-8 risks: re-confirm
+`recharts`/`d3`/`theme.ts` are still gone (carry-over), and the
+`docs/REQUIREMENTS.md` write-up of the single design system + reconciled IA.
+
+### Remaining tasks (exact unchecked `- [ ]` lines)
+
+Slice 7b is complete (59/71). The remaining 12 unchecked lines are:
+
+- **Slice 6b** (5 — compose dialog, 9 lucide icons, rich-text behavior, compose
+  tests, exit gate 6a+6b): `UsersPage.impl.tsx` still uses `@mui/icons-material`
+  (9) + `@mui/material` (Dialog family + TextField/Divider/IconButton).
+- **Slice 8** (7 — remove MUI/@emotion deps, grep-verify zero `@mui/*` +
+  `@emotion/*`, re-confirm `recharts`/`d3`/`theme.ts`, final gates, update
+  `docs/REQUIREMENTS.md`, exit gate).
+
+No slice-7b work remains.

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

@@ -225,12 +225,12 @@ Each slice section restates this gate as its final task.
 
 ### Slice 7b — Media (server-driven pagination)
 
-- [ ] Migrate `frontend/src/pages/Media.tsx` off `@mui/x-data-grid` onto `DataTable`: build `mediaColumns: ColumnDef<MediaItem>[]` for the 15 locked columns (`title, series, season, episode, type, year, runtime_min, size, bitrate, hdr, video, resolution, date_added, library, path`).
-- [ ] Render `DataTable` with `enableRowSelection`, `enablePagination` + `manualPagination` + `rowCount` (driven by `queryResult.total`), `onRowClick → navigate('/files?path=…')` (opens file browser at the item's path — preserved), and `enableColumnVisibilityToggle` (toggleable set must match the 15-column list above exactly).
-- [ ] Lift pagination + column-visibility state into the existing `usePersistentState` media state and feed `useMediaQuery({ limit, offset, … })`; use a stable path-derived `getRowId` so selection survives server-driven paging.
-- [ ] Also migrate the remaining `@mui/material` Media shell (Card/SectionCard/Grid/Select/Input/LinearProgress) to shadcn primitives + CSS grid + `Progress`; preserve index-build controls + progress (stop/force-stop).
-- [ ] Add component tests asserting the toggleable column set equals the locked 15 and that row-click triggers the navigation callback.
-- [ ] **Exit gate (7b):** Media on TanStack Table with pagination (server-driven, page-size + total-count + page-nav parity), row selection, row click → file browser, column-visibility parity; `@mui/x-data-grid` no longer imported anywhere; **no sorting, no resizing** present; `npm run build` + `npm run lint` + `npm test` + `node --test tests` green; manual smoke of Media paging + row-click and FileBrowser row-click preview.
+- [x] Migrate `frontend/src/pages/Media.tsx` off `@mui/x-data-grid` onto `DataTable`: build `mediaColumns: ColumnDef<MediaItem>[]` for the 15 locked columns (`title, series, season, episode, type, year, runtime_min, size, bitrate, hdr, video, resolution, date_added, library, path`).
+- [x] Render `DataTable` with `enableRowSelection`, `enablePagination` + `manualPagination` + `rowCount` (driven by `queryResult.total`), `onRowClick → navigate('/files?path=…')` (opens file browser at the item's path — preserved), and `enableColumnVisibilityToggle` (toggleable set must match the 15-column list above exactly).
+- [x] Lift pagination + column-visibility state into the existing `usePersistentState` media state and feed `useMediaQuery({ limit, offset, … })`; use a stable path-derived `getRowId` so selection survives server-driven paging.
+- [x] Also migrate the remaining `@mui/material` Media shell (Card/SectionCard/Grid/Select/Input/LinearProgress) to shadcn primitives + CSS grid + `Progress`; preserve index-build controls + progress (stop/force-stop).
+- [x] Add component tests asserting the toggleable column set equals the locked 15 and that row-click triggers the navigation callback.
+- [x] **Exit gate (7b):** Media on TanStack Table with pagination (server-driven, page-size + total-count + page-nav parity), row selection, row click → file browser, column-visibility parity; `@mui/x-data-grid` no longer imported anywhere; **no sorting, no resizing** present; `npm run build` + `npm run lint` + `npm test` + `node --test tests` green; manual smoke of Media paging + row-click and FileBrowser row-click preview.
 
 ---