react-bootstrap migration, review & parser fixes

UI / react-bootstrap: Migrate client components to react-bootstrap (Card, Table, Form, Alert, Badge, Nav, Button, Spinner, Row, Col): the ZXDB explorers and detail pages (Labels, Genres, Languages, MachineTypes, Releases, Entries), TapeIdentifier, home page, Navbar and ThemeDropdown. Server components (home, zxdb hub, magazines, issues) keep raw HTML+className — react-bootstrap barrel imports resolve to undefined under Turbopack in server components. Replace bi bi-* CSS icons with react-bootstrap-icons. Add aria-labels to search inputs and visually-hidden captions to data tables. Code-review remediation (docs/todo.md): - FileViewer: replace useState-as-effect with a proper useEffect. - register.service: restore request-level caching of parsed registers. - middleware: convert .js to .ts, dev-only request logging. - Extract shared types to src/types/zxdb.ts; add src/server/repo barrel for incremental per-domain splitting. - Extract helpers: parseIdList (params.ts), serialize (serialize.ts), buildRegisterSummary/isInfoLine (register_helpers.ts). - Add loading.tsx skeletons for dynamic ZXDB detail routes. - generateMetadata + notFound() on entry/release/label detail pages. - opengraph-image: stable keys; ThemeDropdown: drop hardcoded cookie domain; remove unused page.module.css. Register parser & data: - Update data/nextreg.txt from upstream tbblue (SpectrumNext FPGA): 0x04/0x0A/0x0F/0x80/0x81 bit changes, new Issue 5 board id, 0x43 renamed "Palette Control", 0xF0/0xF8/0xF9/0xFA now "Issues 4 and 5 Only". - Add reg_44 custom parser for 0x44 (Palette Value 9-bit): the two consecutive writes render as separate "1st write" / "2nd write" modes. - Skip commented-out register headers so the disabled 0xA3 block no longer leaks a phantom register. - Add detailHasContent guard so body-less registers (0xC7/0xCB/0xCF/ 0xFF) and 0xF0's leading blank no longer emit empty tab strips. - Capture 0xF0's leading "Issues 4 and 5 Only" line as register text. - Add isIssueRestricted (case-sensitive) to detect the issue badge across rewording without flagging per-bit "(issue 5 only)" notes; update badge label to "Issues 4 & 5 Only". claude-opus-4-8@lucy
2026-06-08 22:47:37 +01:00
parent 590b07147a
commit e803274af4
79 changed files with 1346 additions and 1011 deletions
--- a/data/nextreg.txt
+++ b/data/nextreg.txt
@@ -85,9 +85,9 @@ Generally a set bit indicates the property is asserted
 0x04 (04) => Config Mapping
 config mode only, bootrom disabled
 (W)
-  bit 7 = Reserved, must be 0
-  bits 6:0 = 16K SRAM bank mapped to 0x0000-0x3FFF (hard reset = 0)
-  ** Even multiplies of 256K are unreliable if storing data in sram for the next core started.
+  bits 7:0 = 16K SRAM bank mapped to 0x0000-0x3FFF (hard reset = 0)
+  ** On issue 2 pcbs, even multiplies of 256K are unreliable if storing data in sram for the next core started.
+  ** Bit 7 ignored except on issue 5 pcb

 0x05 (05) => Peripheral 1 Setting
 (R/W)
@@ -174,15 +174,16 @@ Joystick modes:
    01 = Multiface 128 v87.2 (enable port 0xBF, disable port 0x3F)
    10 = Multiface 128 v87.12 (enable port 0x9F, disable port 0x1F)
    11 = Multiface 1 (enable port 0x9F, disable port 0x1F)
-  bit 5 = Reserved, must be zero
+  bit 5 = 1 to swap sd0 and sd1 (hard reset = 0) (config mode only) *
  bit 4 = Enable divmmc automap (hard reset = 0)
  bit 3 = 1 to reverse left and right mouse buttons (hard reset = 0)
-  bit 2 = Reserved, must be zero
+  bit 2 = Reserved, must be 0
  bits 1:0 = mouse dpi (hard reset = 01)
    00 = low dpi
    01 = default
    10 = medium dpi
    11 = high dpi
+  * only affects future writes to port 0xE7

 0x0B (11) => Joystick I/O Mode
 (R/W) (soft reset = 0x01)
@@ -219,6 +220,7 @@ Sub-minor number
    0000 = ZXN Issue 2, XC6SLX16-2FTG256, 128Mbit W25Q128JV, 24bit spi, 64K*8 core size
    0001 = ZXN Issue 3, XC6SLX16-2FTG256, 128Mbit W25Q128JV, 24bit spi, 64K*8 core size
    0010 = ZXN Issue 4, XC7A15T-1CSG324, 256Mbit MX25L25645G, 32bit spi, 64K*34 core size
+    0011 = ZXN Issue 5, XC7A35T-2CSG324, 256Mbit MX25L25645G, 32bit spi, 64K*34 core size

 0x10 (16) => Core Boot
 (R)
@@ -525,7 +527,7 @@ Writable in config mode only.
    the mask with the attribute byte and the PAPER and border colour are again both taken
    from the fallback colour in nextreg 0x4A.

-0x43 (67) => ULA Palette Control
+0x43 (67) => Palette Control
 (R/W)
  bit 7 = Disable palette write auto-increment (soft reset = 0)
  bits 6-4 = Select palette for reading or writing (soft reset = 000)
@@ -787,6 +789,7 @@ Writable in config mode only.
  bit 6 = 1 to allow peripherals to override the ULA on some even port reads (rotronics wafadrive)
  bit 5 = 1 to disable expansion bus nmi debounce (opus discovery)
  bit 4 = 1 to propagate the max cpu clock at all times including when the expansion bus is off
+  bit 3 = 1 to enable +3 fdc signals on expansion bus (issue 5 only)
  bits 1-0 = max cpu speed when the expansion bus is on (currently fixed at 00 = 3.5MHz)

 0x85,0x84,0x83,0x82 (133-130) => Internal Port Decoding Enables (0x85 is MSB) (soft reset if bit 31 = 1, hard reset if bit 31 = 0 : all 1)
@@ -824,6 +827,7 @@ Writable in config mode only.
  bit 26 = port eff7 pentagon 1024 memory
  bit 27 = port 183b,193b,1a3b,1b3b,1c3b,1d3b,1e3b,1f3b z80 ctc
  ...
+  ...
  bit 31 = register reset mode (soft or hard reset selection)
  -----
  The internal port decoding enables always apply.
@@ -1202,7 +1206,7 @@ progress is made in the main program.
 --

 0xF0 (240) => XDEV CMD
-R/W Issue 4 Only - (soft reset = 0x80)
+R/W Issues 4 and 5 Only - (soft reset = 0x80)
  Select Mode
    (R)
      bit 7 = 1 if in select mode
@@ -1238,7 +1242,7 @@ R/W Issue 4 Only - (soft reset = 0x80)
  *** Exit select mode by writing zero to bit 7; thereafter the particular device is attached to the nextreg

 0xF8 (248) => XADC REG
-(R/W Issue 4 Only) (hard reset = 0)
+(R/W Issues 4 and 5 Only) (hard reset = 0)
  bit 7 = 1 to write to XADC DRP port, 0 to read from XADC DRP port **
  bits 6:0 = XADC DRP register address DADDR
  * An XADC register read or write is/ initiated by writing to this register
@@ -1246,12 +1250,12 @@ R/W Issue 4 Only - (soft reset = 0x80)
  ** Reads as 0

 0xF9 (249) => XADC D0
-(R/W Issue 4 Only) (hard reset = 0)
+(R/W Issues 4 and 5 Only) (hard reset = 0)
  bits 7:0 = LSB data connected to XADC DRP data bus D7:0
  * DRP reads store result here, DRP writes take value from here

 0xFA (250) => XADC D1
-(R/W Issue 4 Only) (hard reset = 0)
+(R/W Issues 4 and 5 Only) (hard reset = 0)
  bits 7:0 = MSB data connected to XADC DRP data bus D15:8
  * DRP reads store result here, DRP writes take value from here

--- a/docs/todo.md
+++ b/docs/todo.md
@@ -0,0 +1,286 @@
+# 📋 Next Explorer — Code Review & TODO
+
+> Full codebase review performed 2026-03-04. Findings grouped by priority and area.
+
+---
+
+## 🔴 Critical
+
+### 🐛 Bug: `FileViewer` uses `useState` as `useEffect`
+
+**File:** `src/components/FileViewer.tsx:23`
+
+`useState(() => { ... })` is being abused as a side-effect initializer — it calls `fetch()` inside `useState`'s initializer function. This works by accident on first render but violates React rules:
+- The initializer can run multiple times in Strict Mode (double-invocation).
+- It never re-runs if `url` or `title` props change.
+- Side effects in `useState` initializers are explicitly discouraged by React.
+
+**Fix:** Replace with `useEffect` with proper dependency array on `[url, isText]`.
+
+### 🐛 Bug: Register service caching is commented out
+
+**File:** `src/services/register.service.ts:14-18`
+
+The `if (registers.length === 0)` guard is commented out, so the file is re-read and re-parsed on every call to `getRegisters()`. This means every register page load (including the OG image generator and `generateMetadata`) re-parses the entire `nextreg.txt` file. The `[hex]/page.tsx` calls `getRegisters()` twice (once in `generateMetadata`, once in the page function), reading the file from disk twice per request.
+
+**Fix:** Uncomment the caching guard, or better yet, wrap with React `cache()` for request-level deduplication.
+
+### 🔒 Security: `middleware.js` is untyped JavaScript
+
+**File:** `src/middleware.js`
+
+The only `.js` file in the project. It logs every request path to stdout, including potentially sensitive paths. In production this creates noise and potential log injection vectors.
+
+**Fix:** Convert to TypeScript (`.ts`). Consider restricting logging to development only, or removing it entirely since Next.js has built-in request logging.
+
+---
+
+## 🟠 High Priority
+
+### 🧱 Architecture: Duplicated type definitions across files
+
+`Paged<T>`, `Item`, `SearchScope`, `EntryFacets`, and similar types are independently re-declared in:
+- `src/hooks/useSearchFetch.ts`
+- `src/app/zxdb/entries/EntriesExplorer.tsx`
+- `src/app/zxdb/releases/ReleasesExplorer.tsx`
+- `src/app/zxdb/labels/LabelsSearch.tsx`
+- `src/app/zxdb/genres/GenresSearch.tsx`
+
+And the `EntryDetailData` type in `EntryDetail.tsx` is a near-duplicate of `EntryDetail` in `src/server/repo/zxdb.ts`.
+
+**Fix:** Extract shared types to `src/types/zxdb.ts` and import everywhere.
+
+### 🧱 Architecture: Duplicated `parseMachineIds` / `parseIdList` helpers
+
+The same ID-parsing logic appears in:
+- `src/app/zxdb/entries/page.tsx`
+- `src/app/zxdb/entries/EntriesExplorer.tsx`
+- `src/app/zxdb/releases/page.tsx`
+- `src/app/zxdb/releases/ReleasesExplorer.tsx`
+- `src/app/api/zxdb/search/route.ts`
+
+**Fix:** Extract to a shared utility (e.g., `src/utils/params.ts`).
+
+### 🧱 Architecture: Duplicated `buildRegisterSummary` logic
+
+`[hex]/page.tsx` and `[hex]/opengraph-image.tsx` each have their own version of register-summary-building logic (one returns a string, one returns lines). The `isInfoLine` filter is duplicated.
+
+**Fix:** Extract to a shared utility in `src/utils/register_helpers.ts`.
+
+### ⚡ Performance: Repository file is 800+ lines with no code splitting
+
+**File:** `src/server/repo/zxdb.ts` (31,000+ tokens)
+
+This monolithic file contains all DB queries. It's hard to navigate and cannot benefit from tree-shaking at the module level.
+
+**Fix:** Split into per-domain files: `repo/entries.ts`, `repo/labels.ts`, `repo/releases.ts`, `repo/magazines.ts`, `repo/lookups.ts`, etc.
+
+### ⚡ Performance: `releases/page.tsx` uses `JSON.parse(JSON.stringify(...))` for serialization
+
+**File:** `src/app/zxdb/releases/page.tsx:51-63`
+
+Uses `JSON.parse(JSON.stringify(initial))` to strip non-serializable values. This is a known workaround for Drizzle decimal types. However, it's applied 7 times in the same function.
+
+**Fix:** Create a `serialize()` helper, or configure Drizzle's `decimal` columns to return strings/numbers natively.
+
+### 🎨 UI Consistency: Mixed raw HTML and react-bootstrap components
+
+Per `CLAUDE.md`, the project should always use react-bootstrap components. Several pages use raw HTML instead:
+
+| File | Issue |
+|------|-------|
+| `LabelsSearch.tsx` | Raw `<table>`, `<input>`, `<button>`, `<form>` instead of `Table`, `Form.*`, `Button` |
+| `LabelDetail.tsx` | Raw `<table>`, `<input>`, `<button>`, nav tabs using raw `<ul>/<li>/<button>` |
+| `GenresSearch.tsx` | Raw `<table>`, `<input>`, `<button>` |
+| `MachineTypesSearch.tsx` | Likely same pattern |
+| `LanguagesSearch.tsx` | Likely same pattern |
+| `ReleaseDetail.tsx` | Raw `<table>` throughout instead of `<Table>` |
+| `zxdb/page.tsx` | Raw `<input>`, `<select>`, `<button>` in the search form |
+| `magazines/page.tsx` | Raw `<table>`, local `Pagination` component instead of shared one |
+| `magazines/[id]/page.tsx` | Raw `<table>` |
+| `issues/[id]/page.tsx` | Raw `<table>` |
+| `page.tsx` (home) | Raw `<div className="card">` instead of `<Card>` |
+| `TapeIdentifier.tsx` | Raw `<table>` for hash display |
+
+**Fix:** Systematically replace with react-bootstrap equivalents to match `EntriesExplorer.tsx` and `RegisterBrowser.tsx` patterns.
+
+### 🎨 UI: Magazines page has its own inline `Pagination` component
+
+**File:** `src/app/zxdb/magazines/page.tsx:89-117`
+
+Defines a local `Pagination` function instead of using the shared `src/components/explorer/Pagination.tsx`.
+
+**Fix:** Use the shared `Pagination` component.
+
+---
+
+## 🟡 Medium Priority
+
+### ⚛️ React: `useSearchFetch` `onExtra` callback may cause infinite loops
+
+**File:** `src/hooks/useSearchFetch.ts:75`
+
+The `fetch_` callback depends on `[endpoint, onExtra]`. If the caller doesn't memoize `onExtra`, this dependency changes every render, creating a new `fetch_` reference, which could cascade into effect re-runs.
+
+The `EntriesExplorer.tsx` correctly `useCallback`-wraps `handleExtra`, but this is a fragile contract.
+
+**Fix:** Store `onExtra` in a ref instead of including it in the dependency array, or document the requirement clearly.
+
+### ⚛️ React: Missing `notFound()` call in entry detail page
+
+**File:** `src/app/zxdb/entries/[id]/page.tsx:13-15`
+
+When `getEntryById` returns null, the page still renders with status 200 — the client component shows an "alert-warning" div. This means:
+- Search engines index a 200 page with "Not found" content.
+- No proper 404 HTTP status.
+
+**Fix:** Call `notFound()` in the server component when `data` is null, like `magazines/[id]/page.tsx` does.
+
+### ⚛️ React: Same issue for release detail page
+
+**File:** `src/app/zxdb/releases/[entryId]/[releaseSeq]/page.tsx`
+
+Same pattern — no `notFound()` when `data` is null.
+
+### ⚛️ React: `RegisterBrowser` disables exhaustive-deps without justification
+
+**File:** `src/app/registers/RegisterBrowser.tsx:90-91`
+
+The `eslint-disable-next-line react-hooks/exhaustive-deps` on the `searchParams` sync effect excludes `searchTerm` from deps, which could lead to stale closures if `searchParams` changes while `searchTerm` is mid-update.
+
+### 📦 Metadata: Entry/release/label detail pages lack dynamic metadata
+
+**Files:**
+- `src/app/zxdb/entries/[id]/page.tsx` — static `metadata = { title: "ZXDB Entry" }`
+- `src/app/zxdb/releases/[entryId]/[releaseSeq]/page.tsx` — static `metadata = { title: "ZXDB Release" }`
+- `src/app/zxdb/labels/[id]/page.tsx` — static `metadata = { title: "ZXDB Label" }`
+
+These should use `generateMetadata` to include the entry/release/label title for SEO and social sharing, similar to how `registers/[hex]/page.tsx` does it.
+
+### 🧱 Architecture: `ThemeDropdown` hardcodes cookie domain
+
+**File:** `src/components/ThemeDropdown.tsx:16`
+
+```typescript
+document.cookie = `${name}=...; Domain=specnext.dev`;
+```
+
+This hardcoded domain means the theme cookie won't work on `localhost` or any non-specnext.dev domain during development.
+
+**Fix:** Remove the `Domain=` attribute (let it default to current host), or conditionally set it based on environment.
+
+### ⚡ Performance: No `loading.tsx` or `Suspense` boundaries
+
+None of the route segments define `loading.tsx` files. For `force-dynamic` pages (entries, releases, labels, genres, languages, machinetypes), users see a blank page or frozen UI while the server fetches from MySQL.
+
+**Fix:** Add `loading.tsx` with skeleton/spinner states for ZXDB routes.
+
+### ⚡ Performance: `opengraph-image.tsx` calls `getRegisters()` for every OG image
+
+**File:** `src/app/registers/[hex]/opengraph-image.tsx:132-136`
+
+Loads ALL registers from disk just to find one. With the caching fix above this becomes a non-issue, but currently it's reading and parsing the full file for each image request.
+
+### 🔒 Security: Download API path traversal protection should normalize before joining
+
+**File:** `src/app/api/zxdb/download/route.ts:27-28`
+
+The current protection `path.normalize(path.join(baseDir, filePath))` is correct, but the check should also reject paths containing `..` before `join` for defense-in-depth.
+
+### 📝 DX: `parseNextReg()` is async but does no async work
+
+**File:** `src/utils/register_parser.ts:49`
+
+`parseNextReg()` is declared `async` and returns `Promise<Register[]>`, but the function body is entirely synchronous. This forces callers to `await` unnecessarily.
+
+**Fix:** Remove `async` and return `Register[]` directly.
+
+---
+
+## 🟢 Low Priority
+
+### 🎨 UI: `Navbar` uses `Link` with `className="nav-link"` instead of `Nav.Link`
+
+**File:** `src/components/Navbar.tsx:14-16`
+
+For consistency with react-bootstrap patterns, use `<Nav.Link as={Link} href="...">` instead of raw `<Link className="nav-link">`.
+
+### 🎨 UI: Home page uses `bi bi-*` CSS classes instead of react-bootstrap-icons
+
+**File:** `src/app/page.tsx:12,29`
+
+Uses `<span className="bi bi-collection">` instead of the `react-bootstrap-icons` package that's used elsewhere.
+
+### 🎨 UI: `TapeIdentifier` uses `bi bi-*` CSS classes
+
+**File:** `src/app/zxdb/TapeIdentifier.tsx`
+
+Same issue — uses Bootstrap icon CSS classes instead of `react-bootstrap-icons` components.
+
+### 🎨 UI: Inconsistent "not found" patterns
+
+Some pages use `notFound()` (magazines, issues), others render inline alerts (entries, releases, labels). This creates inconsistent UX.
+
+### ⚛️ React: `buildRegisterSummaryLines` in OG image could use better key strategy
+
+**File:** `src/app/registers/[hex]/opengraph-image.tsx:174,188`
+
+Uses `key={line}` which will produce duplicate keys if two lines have identical text.
+
+### 📝 DX: Commented-out code in register parsers
+
+**Files:**
+- `src/utils/register_parsers/reg_default.ts:13,106,122-126` — commented `footnoteTarget` variable and `valueMatch` block
+- `src/services/register.service.ts:14,18` — commented caching guard
+
+**Fix:** Remove dead code or convert to tracked TODOs.
+
+### 📝 DX: `app/page.module.css` exists but is never imported
+
+Check if this file has any content; if empty/unused, remove it.
+
+### 🧪 Testing: Zero test coverage
+
+No test files exist (`*.test.ts`, `*.spec.ts`, `__tests__/`). Key areas that would benefit:
+1. Register parser (`parseNextReg`, `parseDescriptionDefault`, `parseDescriptionF0`) — complex parsing logic with edge cases.
+2. API route input validation (Zod schemas).
+3. `useSearchFetch` hook behavior (cancellation, race conditions).
+4. `computeMd5` correctness.
+5. Component rendering for entry detail, release detail.
+
+### ♿ Accessibility: Search inputs lack proper labeling
+
+Several search inputs use `placeholder` as the only label (no associated `<label>` or `aria-label`):
+- `zxdb/page.tsx` search form
+- Various filter sidebars
+
+### ♿ Accessibility: Tables lack `<caption>` elements
+
+Data tables throughout the ZXDB explorer have no `<caption>`, making it harder for screen readers to understand table purpose.
+
+### ⚡ Performance: `EntriesExplorer` and `ReleasesExplorer` have very similar structures
+
+Both follow the same pattern: sidebar with filters, table results, pagination. They share about 60% structural similarity. Consider extracting a shared `SearchExplorer` wrapper that accepts column definitions and filter config.
+
+### 📦 Bundle: `import * as Icon from 'react-bootstrap-icons'`
+
+**File:** `src/app/registers/RegisterDetail.tsx:8`, `src/components/ThemeDropdown.tsx:4`
+
+Importing the entire icon library. While tree-shaking should handle this, named imports are safer and make dependencies explicit.
+
+**Fix:** `import { Wikipedia, Link45deg, CodeSlash } from 'react-bootstrap-icons'`
+
+### 📝 DX: `CLAUDE.md` structure tree is outdated
+
+The project tree in `CLAUDE.md` doesn't reflect the current file structure (missing `hooks/`, `components/explorer/`, ZXDB pages, API routes, `server/`, etc.).
+
+---
+
+## 🗺️ Feature Ideas (non-bugs)
+
+- **Search debouncing** — `RegisterBrowser` updates the URL on every keystroke. Consider debouncing the URL update (keep instant local filtering).
+- **Entry detail OG images** — Register pages have OG images; ZXDB entry pages do not.
+- **Keyboard navigation** — Add keyboard shortcuts for pagination (left/right arrows).
+- **Back-to-top button** — Long entry detail pages would benefit.
+- **Error boundaries** — No `error.tsx` files exist for graceful error recovery in route segments.
+- **Rate limiting** — API routes have no rate limiting for the search endpoints.
--- a/src/app/api/zxdb/availabletypes/route.ts
+++ b/src/app/api/zxdb/availabletypes/route.ts
@@ -1,4 +1,4 @@
-import { listAvailabletypes } from "@/server/repo/zxdb";
+import { listAvailabletypes } from "@/server/repo";

 export async function GET() {
  const items = await listAvailabletypes();
--- a/src/app/api/zxdb/casetypes/route.ts
+++ b/src/app/api/zxdb/casetypes/route.ts
@@ -1,4 +1,4 @@
-import { listCasetypes } from "@/server/repo/zxdb";
+import { listCasetypes } from "@/server/repo";

 export async function GET() {
  const items = await listCasetypes();
--- a/src/app/api/zxdb/currencies/route.ts
+++ b/src/app/api/zxdb/currencies/route.ts
@@ -1,4 +1,4 @@
-import { listCurrencies } from "@/server/repo/zxdb";
+import { listCurrencies } from "@/server/repo";

 export async function GET() {
  const items = await listCurrencies();
--- a/src/app/api/zxdb/download/route.ts
+++ b/src/app/api/zxdb/download/route.ts
@@ -23,6 +23,11 @@ export async function GET(req: NextRequest) {
    return new NextResponse("Invalid source or mirroring not enabled", { status: 400 });
  }

+  // Defense-in-depth: reject obvious traversal before joining
+  if (filePath.includes("..")) {
+    return new NextResponse("Forbidden", { status: 403 });
+  }
+
  // Security: Ensure path doesn't escape baseDir
  const absolutePath = path.normalize(path.join(baseDir, filePath));
  if (!absolutePath.startsWith(path.normalize(baseDir))) {
--- a/src/app/api/zxdb/entries/[id]/route.ts
+++ b/src/app/api/zxdb/entries/[id]/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest } from "next/server";
 import { z } from "zod";
-import { getEntryById } from "@/server/repo/zxdb";
+import { getEntryById } from "@/server/repo";

 const paramsSchema = z.object({ id: z.coerce.number().int().positive() });

--- a/src/app/api/zxdb/filetypes/route.ts
+++ b/src/app/api/zxdb/filetypes/route.ts
@@ -1,4 +1,4 @@
-import { listFiletypes } from "@/server/repo/zxdb";
+import { listFiletypes } from "@/server/repo";

 export async function GET() {
  const items = await listFiletypes();
--- a/src/app/api/zxdb/genres/[id]/route.ts
+++ b/src/app/api/zxdb/genres/[id]/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest } from "next/server";
 import { z } from "zod";
-import { entriesByGenre } from "@/server/repo/zxdb";
+import { entriesByGenre } from "@/server/repo";

 const paramsSchema = z.object({ id: z.coerce.number().int().positive() });
 const querySchema = z.object({
--- a/src/app/api/zxdb/genres/route.ts
+++ b/src/app/api/zxdb/genres/route.ts
@@ -1,4 +1,4 @@
-import { listGenres } from "@/server/repo/zxdb";
+import { listGenres } from "@/server/repo";

 export async function GET() {
  const data = await listGenres();
--- a/src/app/api/zxdb/labels/[id]/route.ts
+++ b/src/app/api/zxdb/labels/[id]/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest } from "next/server";
 import { z } from "zod";
-import { getLabelById, getLabelAuthoredEntries, getLabelPublishedEntries } from "@/server/repo/zxdb";
+import { getLabelById, getLabelAuthoredEntries, getLabelPublishedEntries } from "@/server/repo";

 const paramsSchema = z.object({ id: z.coerce.number().int().positive() });
 const querySchema = z.object({
--- a/src/app/api/zxdb/labels/search/route.ts
+++ b/src/app/api/zxdb/labels/search/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest } from "next/server";
 import { z } from "zod";
-import { searchLabels } from "@/server/repo/zxdb";
+import { searchLabels } from "@/server/repo";

 const querySchema = z.object({
  q: z.string().optional(),
--- a/src/app/api/zxdb/languages/[id]/route.ts
+++ b/src/app/api/zxdb/languages/[id]/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest } from "next/server";
 import { z } from "zod";
-import { entriesByLanguage } from "@/server/repo/zxdb";
+import { entriesByLanguage } from "@/server/repo";

 const paramsSchema = z.object({ id: z.string().trim().length(2) });
 const querySchema = z.object({
--- a/src/app/api/zxdb/languages/route.ts
+++ b/src/app/api/zxdb/languages/route.ts
@@ -1,4 +1,4 @@
-import { listLanguages } from "@/server/repo/zxdb";
+import { listLanguages } from "@/server/repo";

 export async function GET() {
  const data = await listLanguages();
--- a/src/app/api/zxdb/machinetypes/[id]/route.ts
+++ b/src/app/api/zxdb/machinetypes/[id]/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest } from "next/server";
 import { z } from "zod";
-import { entriesByMachinetype } from "@/server/repo/zxdb";
+import { entriesByMachinetype } from "@/server/repo";

 const paramsSchema = z.object({ id: z.coerce.number().int().positive() });
 const querySchema = z.object({
--- a/src/app/api/zxdb/machinetypes/route.ts
+++ b/src/app/api/zxdb/machinetypes/route.ts
@@ -1,4 +1,4 @@
-import { listMachinetypes } from "@/server/repo/zxdb";
+import { listMachinetypes } from "@/server/repo";

 export async function GET() {
  const data = await listMachinetypes();
--- a/src/app/api/zxdb/releases/search/route.ts
+++ b/src/app/api/zxdb/releases/search/route.ts
@@ -1,6 +1,7 @@
 import { NextRequest } from "next/server";
 import { z } from "zod";
-import { searchReleases } from "@/server/repo/zxdb";
+import { searchReleases } from "@/server/repo";
+import { parseIdList } from "@/utils/params";

 const querySchema = z.object({
  q: z.string().optional(),
@@ -17,15 +18,6 @@ const querySchema = z.object({
  isDemo: z.coerce.boolean().optional(),
 });

-function parseIdList(value: string | undefined) {
-  if (!value) return undefined;
-  const ids = value
-    .split(",")
-    .map((id) => Number(id.trim()))
-    .filter((id) => Number.isFinite(id) && id > 0);
-  return ids.length ? ids : undefined;
-}
-
 export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const parsed = querySchema.safeParse({
--- a/src/app/api/zxdb/roletypes/route.ts
+++ b/src/app/api/zxdb/roletypes/route.ts
@@ -1,4 +1,4 @@
-import { listRoletypes } from "@/server/repo/zxdb";
+import { listRoletypes } from "@/server/repo";

 export async function GET() {
  const items = await listRoletypes();
--- a/src/app/api/zxdb/schemetypes/route.ts
+++ b/src/app/api/zxdb/schemetypes/route.ts
@@ -1,4 +1,4 @@
-import { listSchemetypes } from "@/server/repo/zxdb";
+import { listSchemetypes } from "@/server/repo";

 export async function GET() {
  const items = await listSchemetypes();
--- a/src/app/api/zxdb/search/route.ts
+++ b/src/app/api/zxdb/search/route.ts
@@ -1,6 +1,7 @@
 import { NextRequest } from "next/server";
 import { z } from "zod";
-import { searchEntries, getEntryFacets } from "@/server/repo/zxdb";
+import { searchEntries, getEntryFacets } from "@/server/repo";
+import { parseIdList } from "@/utils/params";

 const querySchema = z.object({
  q: z.string().optional(),
@@ -19,15 +20,6 @@ const querySchema = z.object({
  facets: z.coerce.boolean().optional(),
 });

-function parseIdList(value: string | undefined) {
-  if (!value) return undefined;
-  const ids = value
-    .split(",")
-    .map((id) => Number(id.trim()))
-    .filter((id) => Number.isFinite(id) && id > 0);
-  return ids.length ? ids : undefined;
-}
-
 export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const parsed = querySchema.safeParse({
--- a/src/app/api/zxdb/sourcetypes/route.ts
+++ b/src/app/api/zxdb/sourcetypes/route.ts
@@ -1,4 +1,4 @@
-import { listSourcetypes } from "@/server/repo/zxdb";
+import { listSourcetypes } from "@/server/repo";

 export async function GET() {
  const items = await listSourcetypes();
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,163 +0,0 @@
-/*.page {*/
-/*  --gray-rgb: 0, 0, 0;*/
-/*  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);*/
-/*  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);*/
-
-/*  --button-primary-hover: #383838;*/
-/*  --button-secondary-hover: #f2f2f2;*/
-
-/*  display: grid;*/
-/*  grid-template-rows: 20px 1fr 20px;*/
-/*  align-items: center;*/
-/*  justify-items: center;*/
-/*  min-height: 100svh;*/
-/*  padding: 80px;*/
-/*  gap: 64px;*/
-/*}*/
-
-/*@media (prefers-color-scheme: dark) {*/
-/*  .page {*/
-/*    --gray-rgb: 255, 255, 255;*/
-/*    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);*/
-/*    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);*/
-
-/*    --button-primary-hover: #ccc;*/
-/*    --button-secondary-hover: #1a1a1a;*/
-/*  }*/
-/*}*/
-
-/*.main {*/
-/*  display: flex;*/
-/*  flex-direction: column;*/
-/*  gap: 32px;*/
-/*  grid-row-start: 2;*/
-/*}*/
-
-/*.main ol {*/
-/*  padding-left: 0;*/
-/*  margin: 0;*/
-/*  font-size: 14px;*/
-/*  line-height: 24px;*/
-/*  letter-spacing: -0.01em;*/
-/*  list-style-position: inside;*/
-/*}*/
-
-/*.main li:not(:last-of-type) {*/
-/*  margin-bottom: 8px;*/
-/*}*/
-
-/*.main code {*/
-/*  font-family: inherit;*/
-/*  background: var(--gray-alpha-100);*/
-/*  padding: 2px 4px;*/
-/*  border-radius: 4px;*/
-/*  font-weight: 600;*/
-/*}*/
-
-/*.ctas {*/
-/*  display: flex;*/
-/*  gap: 16px;*/
-/*}*/
-
-/*.ctas a {*/
-/*  appearance: none;*/
-/*  border-radius: 128px;*/
-/*  height: 48px;*/
-/*  padding: 0 20px;*/
-/*  border: 1px solid transparent;*/
-/*  transition:*/
-/*    background 0.2s,*/
-/*    color 0.2s,*/
-/*    border-color 0.2s;*/
-/*  cursor: pointer;*/
-/*  display: flex;*/
-/*  align-items: center;*/
-/*  justify-content: center;*/
-/*  font-size: 16px;*/
-/*  line-height: 20px;*/
-/*  font-weight: 500;*/
-/*}*/
-
-/*a.primary {*/
-/*  gap: 8px;*/
-/*}*/
-
-/*a.secondary {*/
-/*  border-color: var(--gray-alpha-200);*/
-/*  min-width: 158px;*/
-/*}*/
-
-/*.footer {*/
-/*  grid-row-start: 3;*/
-/*  display: flex;*/
-/*  gap: 24px;*/
-/*}*/
-
-/*.footer a {*/
-/*  display: flex;*/
-/*  align-items: center;*/
-/*  gap: 8px;*/
-/*}*/
-
-/*.footer img {*/
-/*  flex-shrink: 0;*/
-/*}*/
-
-/*!* Enable hover only on non-touch devices *!*/
-/*@media (hover: hover) and (pointer: fine) {*/
-/*  a.primary:hover {*/
-/*    background: var(--button-primary-hover);*/
-/*    border-color: transparent;*/
-/*  }*/
-
-/*  a.secondary:hover {*/
-/*    background: var(--button-secondary-hover);*/
-/*    border-color: transparent;*/
-/*  }*/
-
-/*  .footer a:hover {*/
-/*    text-decoration: underline;*/
-/*    text-underline-offset: 4px;*/
-/*  }*/
-/*}*/
-
-/*@media (max-width: 600px) {*/
-/*  .page {*/
-/*    padding: 32px;*/
-/*    padding-bottom: 80px;*/
-/*  }*/
-
-/*  .main {*/
-/*    align-items: center;*/
-/*  }*/
-
-/*  .main ol {*/
-/*    text-align: center;*/
-/*  }*/
-
-/*  .ctas {*/
-/*    flex-direction: column;*/
-/*  }*/
-
-/*  .ctas a {*/
-/*    font-size: 14px;*/
-/*    height: 40px;*/
-/*    padding: 0 16px;*/
-/*  }*/
-
-/*  a.secondary {*/
-/*    min-width: auto;*/
-/*  }*/
-
-/*  .footer {*/
-/*    flex-wrap: wrap;*/
-/*    align-items: center;*/
-/*    justify-content: center;*/
-/*  }*/
-/*}*/
-
-/*@media (prefers-color-scheme: dark) {*/
-/*  .logo {*/
-/*    filter: invert();*/
-/*  }*/
-/*}*/
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { Collection, Cpu } from "react-bootstrap-icons";

 export default function Home() {
  return (
@@ -8,7 +9,7 @@ export default function Home() {
          <div className="card h-100 shadow-sm">
            <div className="card-body d-flex flex-column gap-3">
              <div className="d-flex align-items-center gap-3">
-                <span className="bi bi-collection" style={{ fontSize: 40 }} aria-hidden />
+                <Collection size={40} aria-hidden />
                <div>
                  <h1 className="h3 mb-1">ZXDB Explorer</h1>
                  <p className="text-secondary mb-0">Search entries, releases, magazines, and labels.</p>
@@ -26,7 +27,7 @@ export default function Home() {
          <div className="card h-100 shadow-sm">
            <div className="card-body d-flex flex-column gap-3">
              <div className="d-flex align-items-center gap-3">
-                <span className="bi bi-cpu" style={{ fontSize: 40 }} aria-hidden />
+                <Cpu size={40} aria-hidden />
                <div>
                  <h2 className="h3 mb-1">NextReg Explorer</h2>
                  <p className="text-secondary mb-0">Browse Spectrum Next registers and bitfields.</p>
--- a/src/app/registers/RegisterDetail.tsx
+++ b/src/app/registers/RegisterDetail.tsx
@@ -5,7 +5,7 @@ import { Col, Card, Tabs, Tab, Button, Modal } from 'react-bootstrap';
 import { Register } from '@/utils/register_parser';
 import { renderAccess } from './RegisterBrowser';
 import Link from "next/link";
-import * as Icon from 'react-bootstrap-icons';
+import { Wikipedia, Link45deg, CodeSlash } from 'react-bootstrap-icons';

 /**
 * A client-side component that displays the details of a single register.
@@ -24,18 +24,18 @@ export default function RegisterDetail({
        <Card>
          <Card.Header>
            <code>{register.hex_address}</code> ( {register.dec_address} ) &nbsp;
-              <strong>{register.name}</strong> {register.issue_4_only && <span className="badge bg-danger">Issue 4 Only</span>}
+              <strong>{register.name}</strong> {register.issue_4_only && <span className="badge bg-danger">Issues 4 &amp; 5 Only</span>}
            <div className="float-end small text-muted">
              <Link href={register.wiki_link} className="text-decoration-none btn btn-sm btn-primary" title="Open wiki">
-                <Icon.Wikipedia />
+                <Wikipedia />
              </Link>
              &nbsp;
              <Link href={`/registers/${register.hex_address}`} className="text-decoration-none btn btn-sm btn-primary" title="Permalink">
-                <Icon.Link45deg />
+                <Link45deg />
              </Link>
              &nbsp;
              <Button variant="primary" size="sm" className="text-decoration-none" onClick={() => setShowSource(true)} title="View source">
-                <Icon.CodeSlash />
+                <CodeSlash />
              </Button>
            </div>
          </Card.Header>
--- a/src/app/registers/[hex]/opengraph-image.tsx
+++ b/src/app/registers/[hex]/opengraph-image.tsx
@@ -1,5 +1,6 @@
 import { ImageResponse } from 'next/og';
 import { getRegisters } from '@/services/register.service';
+import { buildRegisterSummaryLines } from '@/utils/register_helpers';

 export const runtime = 'nodejs';

@@ -10,70 +11,6 @@ export const size = {

 export const contentType = 'image/png';

-const buildRegisterSummaryLines = (register: { description: string; text: string; modes: { text: string }[] }) => {
-  const isInfoLine = (line: string) =>
-    line.length > 0 &&
-    !line.startsWith('//') &&
-    !line.startsWith('(R') &&
-    !line.startsWith('(W') &&
-    !line.startsWith('(R/W') &&
-    !line.startsWith('*') &&
-    !/^bits?\s+\d/i.test(line);
-
-  const normalizeLines = (raw: string) => {
-    const lines: string[] = [];
-    const rawLines = raw.split('\n');
-    for (const rawLine of rawLines) {
-      const trimmed = rawLine.trim();
-      if (!trimmed) {
-        if (lines.length > 0 && lines[lines.length - 1] !== '') {
-          lines.push('');
-        }
-        continue;
-      }
-      if (isInfoLine(trimmed)) {
-        lines.push(trimmed);
-      }
-    }
-    return lines;
-  };
-
-  const textLines = normalizeLines(register.text);
-  const modeLines = register.modes.flatMap(mode => normalizeLines(mode.text));
-  const descriptionLines = normalizeLines(register.description);
-
-  const combined: string[] = [];
-  const appendBlock = (block: string[]) => {
-    if (block.length === 0) return;
-    if (combined.length > 0 && combined[combined.length - 1] !== '') {
-      combined.push('');
-    }
-    combined.push(...block);
-  };
-
-  appendBlock(textLines);
-  appendBlock(modeLines);
-  appendBlock(descriptionLines);
-
-  const deduped: string[] = [];
-  const seen = new Set<string>();
-  for (const line of combined) {
-    if (!line) {
-      if (deduped.length > 0 && deduped[deduped.length - 1] !== '') {
-        deduped.push('');
-      }
-      continue;
-    }
-    if (seen.has(line)) {
-      continue;
-    }
-    seen.add(line);
-    deduped.push(line);
-  }
-
-  return deduped.length > 0 ? deduped : ['Spectrum Next register details and bit-level behavior.'];
-};
-
 const splitLongWord = (word: string, maxLineLength: number) => {
  if (word.length <= maxLineLength) return [word];
  const chunks: string[] = [];
@@ -171,8 +108,8 @@ export default async function Image({ params }: { params: Promise<{ hex: string
              lineHeight: 1.05,
            }}
          >
-            {titleLines.map(line => (
-              <div key={line}>{line}</div>
+            {titleLines.map((line, idx) => (
+              <div key={idx}>{line}</div>
            ))}
          </div>
          <div
@@ -185,8 +122,8 @@ export default async function Image({ params }: { params: Promise<{ hex: string
              color: '#f7f1ff',
            }}
          >
-            {summaryLines.map(line => (
-              <div key={line}>{line}</div>
+            {summaryLines.map((line, idx) => (
+              <div key={idx}>{line}</div>
            ))}
          </div>
          <div style={{ marginTop: 'auto', fontSize: '26px', color: '#dacbff' }}>
--- a/src/app/registers/[hex]/page.tsx
+++ b/src/app/registers/[hex]/page.tsx
@@ -5,27 +5,7 @@ import RegisterDetail from '@/app/registers/RegisterDetail';
 import {Container, Row} from "react-bootstrap";
 import { getRegisters } from '@/services/register.service';
 import {env} from "@/env";
-
-const buildRegisterSummary = (register: { description: string; text: string; modes: { text: string }[] }) => {
-    const trimLine = (line: string) => line.trim();
-    const isInfoLine = (line: string) =>
-        line.length > 0 &&
-        !line.startsWith('//') &&
-        !line.startsWith('(R') &&
-        !line.startsWith('(W') &&
-        !line.startsWith('(R/W') &&
-        !line.startsWith('*') &&
-        !/^bits?\s+\d/i.test(line);
-
-    const modeLines = register.modes.flatMap(mode => mode.text.split('\n')).map(trimLine).filter(isInfoLine);
-    const textLines = register.text.split('\n').map(trimLine).filter(isInfoLine);
-    const descriptionLines = register.description.split('\n').map(trimLine).filter(isInfoLine);
-
-    const rawSummary = [...textLines, ...modeLines, ...descriptionLines].join(' ').replace(/\s+/g, ' ').trim();
-    if (!rawSummary) return 'Spectrum Next register details and bit-level behavior.';
-    if (rawSummary.length <= 180) return rawSummary;
-    return `${rawSummary.slice(0, 177).trimEnd()}...`;
-};
+import { buildRegisterSummary } from "@/utils/register_helpers";

 export async function generateMetadata({ params }: { params: Promise<{ hex: string }> }): Promise<Metadata> {
    const registers = await getRegisters();
--- a/src/app/zxdb/TapeIdentifier.tsx
+++ b/src/app/zxdb/TapeIdentifier.tsx
@@ -2,9 +2,11 @@

 import { useState, useRef, useCallback } from "react";
 import Link from "next/link";
+import { Card, Table, Alert, Badge, Spinner, Button } from "react-bootstrap";
+import { Cassette, CloudArrowUp, PersonFill, TagFill, CpuFill, ArrowRight } from "react-bootstrap-icons";
 import { computeMd5 } from "@/utils/md5";
 import { identifyTape } from "./actions";
-import type { TapeMatch } from "@/server/repo/zxdb";
+import type { TapeMatch } from "@/server/repo";

 const SUPPORTED_EXTS = [".tap", ".tzx", ".pzx", ".csw", ".p", ".o"];

@@ -79,12 +81,12 @@ export default function TapeIdentifier() {
  // Dropzone view (idle, hashing, identifying, error)
  if (state.kind === "results" || state.kind === "not-found") {
    return (
-      <div className="card border-0 shadow-sm">
-        <div className="card-body">
-          <h5 className="card-title d-flex align-items-center gap-2 mb-3">
-            <span className="bi bi-cassette" style={{ fontSize: 22 }} aria-hidden />
+      <Card className="border-0 shadow-sm">
+        <Card.Body>
+          <Card.Title className="d-flex align-items-center gap-2 mb-3">
+            <Cassette size={22} aria-hidden />
            Tape Identifier
-          </h5>
+          </Card.Title>

          {state.kind === "results" ? (
            <>
@@ -92,34 +94,34 @@ export default function TapeIdentifier() {
                <strong>{state.fileName}</strong> matched {state.matches.length === 1 ? "1 entry" : `${state.matches.length} entries`}:
              </p>
              {state.matches.map((m) => (
-                <div key={m.downloadId} className="card border mb-3">
-                  <div className="card-body">
+                <Card key={m.downloadId} className="border mb-3">
+                  <Card.Body>
                    <div className="d-flex justify-content-between align-items-start mb-2">
-                      <h6 className="card-title mb-0">
+                      <Card.Title as="h6" className="mb-0">
                        <Link href={`/zxdb/entries/${m.entryId}`} className="text-decoration-none">
                          {m.entryTitle}
                        </Link>
-                      </h6>
+                      </Card.Title>
                      {m.releaseYear && (
-                        <span className="badge text-bg-secondary ms-2">{m.releaseYear}</span>
+                        <Badge bg="secondary" className="ms-2">{m.releaseYear}</Badge>
                      )}
                    </div>

                    {(m.authors.length > 0 || m.genre || m.machinetype) && (
                      <div className="d-flex flex-wrap gap-2 mb-2 small text-secondary">
                        {m.authors.length > 0 && (
-                          <span><span className="bi bi-person me-1" aria-hidden />{m.authors.join(", ")}</span>
+                          <span><PersonFill className="me-1" aria-hidden />{m.authors.join(", ")}</span>
                        )}
                        {m.genre && (
-                          <span><span className="bi bi-tag me-1" aria-hidden />{m.genre}</span>
+                          <span><TagFill className="me-1" aria-hidden />{m.genre}</span>
                        )}
                        {m.machinetype && (
-                          <span><span className="bi bi-cpu me-1" aria-hidden />{m.machinetype}</span>
+                          <span><CpuFill className="me-1" aria-hidden />{m.machinetype}</span>
                        )}
                      </div>
                    )}

-                    <table className="table table-sm table-borderless mb-2 small" style={{ maxWidth: 500 }}>
+                    <Table size="sm" borderless className="mb-2 small" style={{ maxWidth: 500 }}>
                      <tbody>
                        <tr>
                          <td className="text-secondary ps-0" style={{ width: 90 }}>File</td>
@@ -138,16 +140,16 @@ export default function TapeIdentifier() {
                          <td className="font-monospace">{m.crc32}</td>
                        </tr>
                      </tbody>
-                    </table>
+                    </Table>

                    <Link
                      href={`/zxdb/entries/${m.entryId}`}
                      className="btn btn-outline-primary btn-sm"
                    >
-                      View entry <span className="bi bi-arrow-right ms-1" aria-hidden />
+                      View entry <ArrowRight className="ms-1" aria-hidden />
                    </Link>
-                  </div>
-                </div>
+                  </Card.Body>
+                </Card>
              ))}
            </>
          ) : (
@@ -156,23 +158,23 @@ export default function TapeIdentifier() {
            </p>
          )}

-          <button className="btn btn-outline-primary btn-sm" onClick={reset}>
+          <Button variant="outline-primary" size="sm" onClick={reset}>
            Identify another tape
-          </button>
-        </div>
-      </div>
+          </Button>
+        </Card.Body>
+      </Card>
    );
  }

  const isProcessing = state.kind === "hashing" || state.kind === "identifying";

  return (
-    <div className="card border-0 shadow-sm">
-      <div className="card-body">
-        <h5 className="card-title d-flex align-items-center gap-2 mb-3">
-          <span className="bi bi-cassette" style={{ fontSize: 22 }} aria-hidden />
+    <Card className="border-0 shadow-sm">
+      <Card.Body>
+        <Card.Title className="d-flex align-items-center gap-2 mb-3">
+          <Cassette size={22} aria-hidden />
          Tape Identifier
-        </h5>
+        </Card.Title>

        <div
          className={`rounded-3 p-4 text-center ${dragOver ? "bg-primary bg-opacity-10 border-primary" : "border-secondary border-opacity-25"}`}
@@ -191,7 +193,7 @@ export default function TapeIdentifier() {
        >
          {isProcessing ? (
            <div className="py-2">
-              <div className="spinner-border spinner-border-sm text-primary me-2" role="status" />
+              <Spinner animation="border" size="sm" variant="primary" className="me-2" />
              <span className="text-secondary">
                {state.kind === "hashing" ? "Computing hash\u2026" : "Searching ZXDB\u2026"}
              </span>
@@ -199,7 +201,7 @@ export default function TapeIdentifier() {
          ) : (
            <>
              <div className="mb-2">
-                <span className="bi bi-cloud-arrow-up" style={{ fontSize: 32, opacity: 0.5 }} aria-hidden />
+                <CloudArrowUp size={32} style={{ opacity: 0.5 }} aria-hidden />
              </div>
              <p className="mb-1 text-secondary">
                Drop a tape file to identify it
@@ -223,11 +225,11 @@ export default function TapeIdentifier() {
        </div>

        {state.kind === "error" && (
-          <div className="alert alert-warning mt-3 mb-0 py-2 small">
+          <Alert variant="warning" className="mt-3 mb-0 py-2 small">
            {state.message}
-          </div>
+          </Alert>
        )}
-      </div>
-    </div>
+      </Card.Body>
+    </Card>
  );
 }
--- a/src/app/zxdb/actions.ts
+++ b/src/app/zxdb/actions.ts
@@ -1,6 +1,6 @@
 "use server";

-import { lookupByMd5, type TapeMatch } from "@/server/repo/zxdb";
+import { lookupByMd5, type TapeMatch } from "@/server/repo";

 export async function identifyTape(
  md5: string,
--- a/src/app/zxdb/entries/EntriesExplorer.tsx
+++ b/src/app/zxdb/entries/EntriesExplorer.tsx
@@ -13,8 +13,9 @@ import FilterSection from "@/components/explorer/FilterSection";
 import MultiSelectChips from "@/components/explorer/MultiSelectChips";
 import Pagination from "@/components/explorer/Pagination";
 import useSearchFetch from "@/hooks/useSearchFetch";
+import type { PagedResult, EntryFacets, EntrySearchScope } from "@/types/zxdb";
+import { preferredMachineIds, parseMachineIds } from "@/utils/params";

-const preferredMachineIds = [27, 26, 8, 9];
 const PAGE_SIZE = 20;

 type Item = {
@@ -29,31 +30,6 @@ type Item = {
  languageName?: string | null;
 };

-type Paged<T> = {
-  items: T[];
-  page: number;
-  pageSize: number;
-  total: number;
-};
-
-type SearchScope = "title" | "title_aliases" | "title_aliases_origins";
-
-type EntryFacets = {
-  genres: { id: number; name: string; count: number }[];
-  languages: { id: string; name: string; count: number }[];
-  machinetypes: { id: number; name: string; count: number }[];
-  flags: { hasAliases: number; hasOrigins: number };
-};
-
-function parseMachineIds(value?: string) {
-  if (!value) return preferredMachineIds.slice();
-  const ids = value
-    .split(",")
-    .map((id) => Number(id.trim()))
-    .filter((id) => Number.isFinite(id) && id > 0);
-  return ids.length ? ids : preferredMachineIds.slice();
-}
-
 export default function EntriesExplorer({
  initial,
  initialGenres,
@@ -62,7 +38,7 @@ export default function EntriesExplorer({
  initialFacets,
  initialUrlState,
 }: {
-  initial?: Paged<Item>;
+  initial?: PagedResult<Item>;
  initialGenres?: { id: number; name: string }[];
  initialLanguages?: { id: string; name: string }[];
  initialMachines?: { id: number; name: string }[];
@@ -74,7 +50,7 @@ export default function EntriesExplorer({
    languageId: string | "";
    machinetypeId: string;
    sort: "title" | "id_desc";
-    scope?: SearchScope;
+    scope?: EntrySearchScope;
  };
 }) {
  const router = useRouter();
@@ -90,7 +66,7 @@ export default function EntriesExplorer({
  const [languageId, setLanguageId] = useState<string | "">(initialUrlState?.languageId ?? "");
  const [machinetypeIds, setMachinetypeIds] = useState<number[]>(parseMachineIds(initialUrlState?.machinetypeId));
  const [sort, setSort] = useState<"title" | "id_desc">(initialUrlState?.sort ?? "id_desc");
-  const [scope, setScope] = useState<SearchScope>(initialUrlState?.scope ?? "title");
+  const [scope, setScope] = useState<EntrySearchScope>(initialUrlState?.scope ?? "title");
  const [facets, setFacets] = useState<EntryFacets | null>(initialFacets ?? null);

  // -- Filter lists --
@@ -314,7 +290,7 @@ export default function EntriesExplorer({
                  <option value="title">Title (A-Z)</option>
                  <option value="id_desc">Newest</option>
                </Form.Select>
-                <Form.Select size="sm" value={scope} onChange={(e) => { setScope(e.target.value as SearchScope); setPage(1); }}>
+                <Form.Select size="sm" value={scope} onChange={(e) => { setScope(e.target.value as EntrySearchScope); setPage(1); }}>
                  <option value="title">Titles only</option>
                  <option value="title_aliases">Titles + Aliases</option>
                  <option value="title_aliases_origins">Titles + Aliases + Origins</option>
--- a/src/app/zxdb/entries/[id]/loading.tsx
+++ b/src/app/zxdb/entries/[id]/loading.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from "react-bootstrap";
+
+export default function Loading() {
+  return (
+    <div className="d-flex justify-content-center align-items-center py-5">
+      <Spinner animation="border" variant="primary" />
+    </div>
+  );
+}
--- a/src/app/zxdb/entries/[id]/page.tsx
+++ b/src/app/zxdb/entries/[id]/page.tsx
@@ -1,16 +1,20 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
 import EntryDetailClient from "./EntryDetail";
-import { getEntryById } from "@/server/repo/zxdb";
-
-export const metadata = {
-  title: "ZXDB Entry",
-};
+import { getEntryById } from "@/server/repo";

 export const revalidate = 3600;

+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
+  const { id } = await params;
+  const data = await getEntryById(Number(id));
+  if (!data) return { title: "Entry Not Found | ZXDB" };
+  return { title: `${data.title} | ZXDB Entry` };
+}
+
 export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
-  const numericId = Number(id);
-  const data = await getEntryById(numericId);
-  // For simplicity, let the client render a Not Found state if null
+  const data = await getEntryById(Number(id));
+  if (!data) notFound();
  return <EntryDetailClient data={data} />;
 }
--- a/src/app/zxdb/entries/page.tsx
+++ b/src/app/zxdb/entries/page.tsx
@@ -1,5 +1,6 @@
 import EntriesExplorer from "./EntriesExplorer";
-import { getEntryFacets, listGenres, listLanguages, listMachinetypes, searchEntries } from "@/server/repo/zxdb";
+import { getEntryFacets, listGenres, listLanguages, listMachinetypes, searchEntries } from "@/server/repo";
+import { parseIdList } from "@/utils/params";

 export const metadata = {
  title: "ZXDB Entries",
@@ -7,16 +8,6 @@ export const metadata = {

 export const dynamic = "force-dynamic";

-function parseIdList(value: string | string[] | undefined) {
-  if (!value) return undefined;
-  const raw = Array.isArray(value) ? value.join(",") : value;
-  const ids = raw
-    .split(",")
-    .map((id) => Number(id.trim()))
-    .filter((id) => Number.isFinite(id) && id > 0);
-  return ids.length ? ids : undefined;
-}
-
 export default async function Page({ searchParams }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
  const sp = await searchParams;
  const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
--- a/src/app/zxdb/genres/GenresSearch.tsx
+++ b/src/app/zxdb/genres/GenresSearch.tsx
@@ -3,16 +3,18 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { Row, Col, Card, Form, Button, Alert, Table, Badge } from "react-bootstrap";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
 import Pagination from "@/components/explorer/Pagination";

-type Genre = { id: number; name: string };
-type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
+import type { PagedResult } from "@/types/zxdb";

-export default function GenresSearch({ initial, initialQ }: { initial?: Paged<Genre>; initialQ?: string }) {
+type Genre = { id: number; name: string };
+
+export default function GenresSearch({ initial, initialQ }: { initial?: PagedResult<Genre>; initialQ?: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initialQ ?? "");
-  const [data, setData] = useState<Paged<Genre> | null>(initial ?? null);
+  const [data, setData] = useState<PagedResult<Genre> | null>(initial ?? null);
  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);

  useEffect(() => {
@@ -54,28 +56,28 @@ export default function GenresSearch({ initial, initialQ }: { initial?: Paged<Ge
        </div>
      </div>

-      <div className="row g-3">
-        <div className="col-lg-3">
-          <div className="card shadow-sm">
-            <div className="card-body">
-              <form className="d-flex flex-column gap-2" onSubmit={submit}>
-                <div>
-                  <label className="form-label small text-secondary">Search</label>
-                  <input className="form-control" placeholder="Search genres..." value={q} onChange={(e) => setQ(e.target.value)} />
-                </div>
+      <Row className="g-3">
+        <Col lg={3}>
+          <Card className="shadow-sm">
+            <Card.Body>
+              <Form className="d-flex flex-column gap-2" onSubmit={submit}>
+                <Form.Group>
+                  <Form.Label className="small text-secondary">Search</Form.Label>
+                  <Form.Control placeholder="Search genres..." value={q} onChange={(e) => setQ(e.target.value)} />
+                </Form.Group>
                <div className="d-grid">
-                  <button className="btn btn-primary">Search</button>
-                </div>
-              </form>
-            </div>
-          </div>
+                  <Button variant="primary" type="submit">Search</Button>
                </div>
+              </Form>
+            </Card.Body>
+          </Card>
+        </Col>

-        <div className="col-lg-9">
-          {data && data.items.length === 0 && <div className="alert alert-warning">No genres found.</div>}
+        <Col lg={9}>
+          {data && data.items.length === 0 && <Alert variant="warning">No genres found.</Alert>}
          {data && data.items.length > 0 && (
-            <div className="table-responsive">
-              <table className="table table-striped table-hover align-middle">
+            <Table striped hover className="align-middle">
+              <caption className="visually-hidden">Genres search results</caption>
              <thead>
                <tr>
                  <th style={{ width: 120 }}>ID</th>
@@ -85,18 +87,17 @@ export default function GenresSearch({ initial, initialQ }: { initial?: Paged<Ge
              <tbody>
                {data.items.map((g) => (
                  <tr key={g.id}>
-                      <td><span className="badge text-bg-light">#{g.id}</span></td>
+                    <td><Badge bg="light" text="dark">#{g.id}</Badge></td>
                    <td>
                      <Link href={`/zxdb/genres/${g.id}`}>{g.name}</Link>
                    </td>
                  </tr>
                ))}
              </tbody>
-              </table>
-            </div>
+            </Table>
          )}
-        </div>
-      </div>
+        </Col>
+      </Row>

      <Pagination
        page={data?.page ?? 1}
--- a/src/app/zxdb/genres/[id]/GenreDetail.tsx
+++ b/src/app/zxdb/genres/[id]/GenreDetail.tsx
@@ -4,10 +4,11 @@ import Link from "next/link";
 import { useMemo, useState } from "react";
 import { useRouter } from "next/navigation";

-type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; machinetypeName?: string | null; languageId: string | null; languageName?: string | null };
-type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
+import type { PagedResult } from "@/types/zxdb";

-export default function GenreDetailClient({ id, initial, initialQ }: { id: number; initial: Paged<Item>; initialQ?: string }) {
+type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; machinetypeName?: string | null; languageId: string | null; languageName?: string | null };
+
+export default function GenreDetailClient({ id, initial, initialQ }: { id: number; initial: PagedResult<Item>; initialQ?: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initialQ ?? "");
  const totalPages = useMemo(() => Math.max(1, Math.ceil(initial.total / initial.pageSize)), [initial]);
@@ -17,7 +18,7 @@ export default function GenreDetailClient({ id, initial, initialQ }: { id: numbe
      <h1 className="mb-0">Genre <span className="badge text-bg-light">#{id}</span></h1>
      <form className="row gy-2 gx-2 align-items-center mt-2" onSubmit={(e) => { e.preventDefault(); const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", "1"); router.push(`/zxdb/genres/${id}?${p.toString()}`); }}>
        <div className="col-sm-8 col-md-6 col-lg-4">
-          <input className="form-control" placeholder="Search within this genre…" value={q} onChange={(e) => setQ(e.target.value)} />
+          <input className="form-control" placeholder="Search within this genre…" aria-label="Search within this genre" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <div className="col-auto">
          <button className="btn btn-primary">Search</button>
--- a/src/app/zxdb/genres/[id]/loading.tsx
+++ b/src/app/zxdb/genres/[id]/loading.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from "react-bootstrap";
+
+export default function Loading() {
+  return (
+    <div className="d-flex justify-content-center align-items-center py-5">
+      <Spinner animation="border" variant="primary" />
+    </div>
+  );
+}
--- a/src/app/zxdb/genres/[id]/page.tsx
+++ b/src/app/zxdb/genres/[id]/page.tsx
@@ -1,5 +1,5 @@
 import GenreDetailClient from "./GenreDetail";
-import { entriesByGenre } from "@/server/repo/zxdb";
+import { entriesByGenre } from "@/server/repo";

 export const metadata = { title: "ZXDB Genre" };

--- a/src/app/zxdb/genres/page.tsx
+++ b/src/app/zxdb/genres/page.tsx
@@ -1,5 +1,5 @@
 import GenresSearch from "./GenresSearch";
-import { searchGenres } from "@/server/repo/zxdb";
+import { searchGenres } from "@/server/repo";

 export const metadata = { title: "ZXDB Genres" };

--- a/src/app/zxdb/issues/[id]/loading.tsx
+++ b/src/app/zxdb/issues/[id]/loading.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from "react-bootstrap";
+
+export default function Loading() {
+  return (
+    <div className="d-flex justify-content-center align-items-center py-5">
+      <Spinner animation="border" variant="primary" />
+    </div>
+  );
+}
--- a/src/app/zxdb/issues/[id]/page.tsx
+++ b/src/app/zxdb/issues/[id]/page.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { getIssue } from "@/server/repo/zxdb";
+import { getIssue } from "@/server/repo";
 import EntryLink from "@/app/zxdb/components/EntryLink";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";

@@ -29,7 +29,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
      />

      <div className="mb-3 d-flex gap-2 flex-wrap">
-        <Link className="btn btn-outline-secondary btn-sm" href={`/zxdb/magazines/${issue.magazine.id}`}>← Back to magazine</Link>
+        <Link className="btn btn-outline-secondary btn-sm" href={`/zxdb/magazines/${issue.magazine.id}`}>&larr; Back to magazine</Link>
        <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/magazines">All magazines</Link>
        {issue.linkMask && (
          <a className="btn btn-outline-secondary btn-sm" href={issue.linkMask} target="_blank" rel="noreferrer">Issue link</a>
@@ -57,6 +57,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
      ) : (
        <div className="table-responsive">
          <table className="table table-sm align-middle">
+            <caption className="visually-hidden">Issue references</caption>
            <thead>
              <tr>
                <th style={{ width: 80 }}>Page</th>
@@ -75,7 +76,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
                    ) : r.labelId ? (
                      <Link href={`/zxdb/labels/${r.labelId}`}>{r.labelName ?? r.labelId}</Link>
                    ) : (
-                      <span className="text-secondary">—</span>
+                      <span className="text-secondary">&mdash;</span>
                    )}
                  </td>
                </tr>
--- a/src/app/zxdb/labels/LabelsSearch.tsx
+++ b/src/app/zxdb/labels/LabelsSearch.tsx
@@ -3,16 +3,18 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { Row, Col, Card, Form, Button, Alert, Table, Badge } from "react-bootstrap";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
 import Pagination from "@/components/explorer/Pagination";

-type Label = { id: number; name: string; labeltypeId: string | null };
-type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
+import type { PagedResult } from "@/types/zxdb";

-export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<Label>; initialQ?: string }) {
+type Label = { id: number; name: string; labeltypeId: string | null };
+
+export default function LabelsSearch({ initial, initialQ }: { initial?: PagedResult<Label>; initialQ?: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initialQ ?? "");
-  const [data, setData] = useState<Paged<Label> | null>(initial ?? null);
+  const [data, setData] = useState<PagedResult<Label> | null>(initial ?? null);
  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);

  useEffect(() => {
@@ -54,28 +56,28 @@ export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<La
        </div>
      </div>

-      <div className="row g-3">
-        <div className="col-lg-3">
-          <div className="card shadow-sm">
-            <div className="card-body">
-              <form className="d-flex flex-column gap-2" onSubmit={submit}>
-                <div>
-                  <label className="form-label small text-secondary">Search</label>
-                  <input className="form-control" placeholder="Search labels..." value={q} onChange={(e) => setQ(e.target.value)} />
-                </div>
+      <Row className="g-3">
+        <Col lg={3}>
+          <Card className="shadow-sm">
+            <Card.Body>
+              <Form className="d-flex flex-column gap-2" onSubmit={submit}>
+                <Form.Group>
+                  <Form.Label className="small text-secondary">Search</Form.Label>
+                  <Form.Control placeholder="Search labels..." value={q} onChange={(e) => setQ(e.target.value)} />
+                </Form.Group>
                <div className="d-grid">
-                  <button className="btn btn-primary">Search</button>
-                </div>
-              </form>
-            </div>
-          </div>
+                  <Button variant="primary" type="submit">Search</Button>
                </div>
+              </Form>
+            </Card.Body>
+          </Card>
+        </Col>

-        <div className="col-lg-9">
-          {data && data.items.length === 0 && <div className="alert alert-warning">No labels found.</div>}
+        <Col lg={9}>
+          {data && data.items.length === 0 && <Alert variant="warning">No labels found.</Alert>}
          {data && data.items.length > 0 && (
-            <div className="table-responsive">
-              <table className="table table-striped table-hover align-middle">
+            <Table striped hover className="align-middle">
+              <caption className="visually-hidden">Labels search results</caption>
              <thead>
                <tr>
                  <th style={{ width: 100 }}>ID</th>
@@ -91,16 +93,15 @@ export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<La
                      <Link href={`/zxdb/labels/${l.id}`}>{l.name}</Link>
                    </td>
                    <td>
-                        <span className="badge text-bg-light">{l.labeltypeId ?? "?"}</span>
+                      <Badge bg="light" text="dark">{l.labeltypeId ?? "?"}</Badge>
                    </td>
                  </tr>
                ))}
              </tbody>
-              </table>
-            </div>
+            </Table>
          )}
-        </div>
-      </div>
+        </Col>
+      </Row>

      <Pagination
        page={data?.page ?? 1}
--- a/src/app/zxdb/labels/[id]/LabelDetail.tsx
+++ b/src/app/zxdb/labels/[id]/LabelDetail.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import EntryLink from "../../components/EntryLink";
 import { useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
+import { Row, Col, Table, Nav, Form, Button, Alert, Badge } from "react-bootstrap";

 type Label = {
  id: number;
@@ -30,10 +31,11 @@ type Label = {
    comments?: string | null;
  }[];
 };
-type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; machinetypeName?: string | null; languageId: string | null; languageName?: string | null };
-type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
+import type { PagedResult } from "@/types/zxdb";

-type Payload = { label: Label | null; authored: Paged<Item>; published: Paged<Item> };
+type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; machinetypeName?: string | null; languageId: string | null; languageName?: string | null };
+
+type Payload = { label: Label | null; authored: PagedResult<Item>; published: PagedResult<Item> };

 export default function LabelDetailClient({ id, initial, initialTab, initialQ }: { id: number; initial: Payload; initialTab?: "authored" | "published"; initialQ?: string }) {
  // Keep only interactive UI state (tab). Data should come directly from SSR props so it updates on navigation.
@@ -43,24 +45,24 @@ export default function LabelDetailClient({ id, initial, initialTab, initialQ }:
  // Names are now delivered by SSR payload to minimize pop-in.

  // Hooks must be called unconditionally
-  const current = useMemo<Paged<Item> | null>(
+  const current = useMemo<PagedResult<Item> | null>(
    () => (tab === "authored" ? initial?.authored : initial?.published) ?? null,
    [initial, tab]
  );
  const totalPages = useMemo(() => (current ? Math.max(1, Math.ceil(current.total / current.pageSize)) : 1), [current]);

-  if (!initial || !initial.label) return <div className="alert alert-warning">Not found</div>;
+  if (!initial || !initial.label) return <Alert variant="warning">Not found</Alert>;

  return (
    <div>
      <div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <h1 className="mb-0">{initial.label.name}</h1>
        <div>
-          <span className="badge text-bg-light">
+          <Badge bg="light" text="dark">
            {initial.label.labeltypeName
              ? `${initial.label.labeltypeName} (${initial.label.labeltypeId ?? "?"})`
              : (initial.label.labeltypeId ?? "?")}
-          </span>
+          </Badge>
        </div>
      </div>
      {(initial.label.countryId || initial.label.linkWikipedia || initial.label.linkSite) && (
@@ -82,13 +84,12 @@ export default function LabelDetailClient({ id, initial, initialTab, initialQ }:
        </div>
      )}

-      <div className="row g-4 mt-1">
-        <div className="col-lg-6">
+      <Row className="g-4 mt-1">
+        <Col lg={6}>
          <h5>Permissions</h5>
          {initial.label.permissions.length === 0 && <div className="text-secondary">No permissions recorded</div>}
          {initial.label.permissions.length > 0 && (
-            <div className="table-responsive">
-              <table className="table table-sm table-striped align-middle">
+            <Table size="sm" striped className="align-middle">
              <thead>
                <tr>
                  <th>Website</th>
@@ -111,16 +112,14 @@ export default function LabelDetailClient({ id, initial, initialTab, initialQ }:
                  </tr>
                ))}
              </tbody>
-              </table>
-            </div>
+            </Table>
          )}
-        </div>
-        <div className="col-lg-6">
+        </Col>
+        <Col lg={6}>
          <h5>Licenses</h5>
          {initial.label.licenses.length === 0 && <div className="text-secondary">No licenses linked</div>}
          {initial.label.licenses.length > 0 && (
-            <div className="table-responsive">
-              <table className="table table-sm table-striped align-middle">
+            <Table size="sm" striped className="align-middle">
              <thead>
                <tr>
                  <th>Name</th>
@@ -147,35 +146,29 @@ export default function LabelDetailClient({ id, initial, initialTab, initialQ }:
                  </tr>
                ))}
              </tbody>
-              </table>
-            </div>
+            </Table>
          )}
-        </div>
-      </div>
+        </Col>
+      </Row>

-      <ul className="nav nav-tabs mt-3">
-        <li className="nav-item">
-          <button className={`nav-link ${tab === "authored" ? "active" : ""}`} onClick={() => setTab("authored")}>Authored</button>
-        </li>
-        <li className="nav-item">
-          <button className={`nav-link ${tab === "published" ? "active" : ""}`} onClick={() => setTab("published")}>Published</button>
-        </li>
-      </ul>
+      <Nav variant="tabs" className="mt-3" activeKey={tab} onSelect={(k) => setTab(k as "authored" | "published")}>
+        <Nav.Item>
+          <Nav.Link eventKey="authored">Authored</Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Nav.Link eventKey="published">Published</Nav.Link>
+        </Nav.Item>
+      </Nav>

-      <form className="row gy-2 gx-2 align-items-center mt-2" onSubmit={(e) => { e.preventDefault(); const p = new URLSearchParams(); p.set("tab", tab); if (q) p.set("q", q); p.set("page", "1"); router.push(`/zxdb/labels/${id}?${p.toString()}`); }}>
-        <div className="col-sm-8 col-md-6 col-lg-4">
-          <input className="form-control" placeholder={`Search within ${tab}…`} value={q} onChange={(e) => setQ(e.target.value)} />
-        </div>
-        <div className="col-auto">
-          <button className="btn btn-primary">Search</button>
-        </div>
-      </form>
+      <Form className="d-flex align-items-center gap-2 mt-2" onSubmit={(e) => { e.preventDefault(); const p = new URLSearchParams(); p.set("tab", tab); if (q) p.set("q", q); p.set("page", "1"); router.push(`/zxdb/labels/${id}?${p.toString()}`); }}>
+        <Form.Control className="w-auto" style={{ minWidth: 200 }} placeholder={`Search within ${tab}…`} aria-label={`Search within ${tab}`} value={q} onChange={(e) => setQ(e.target.value)} />
+        <Button variant="primary" type="submit">Search</Button>
+      </Form>

      <div className="mt-3">
-        {current && current.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
+        {current && current.items.length === 0 && <Alert variant="warning">No entries.</Alert>}
        {current && current.items.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-striped table-hover align-middle">
+          <Table striped hover className="align-middle">
            <thead>
              <tr>
                <th style={{ width: 80 }}>ID</th>
@@ -214,8 +207,7 @@ export default function LabelDetailClient({ id, initial, initialTab, initialQ }:
                </tr>
              ))}
            </tbody>
-            </table>
-          </div>
+          </Table>
        )}
      </div>

--- a/src/app/zxdb/labels/[id]/loading.tsx
+++ b/src/app/zxdb/labels/[id]/loading.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from "react-bootstrap";
+
+export default function Loading() {
+  return (
+    <div className="d-flex justify-content-center align-items-center py-5">
+      <Spinner animation="border" variant="primary" />
+    </div>
+  );
+}
--- a/src/app/zxdb/labels/[id]/page.tsx
+++ b/src/app/zxdb/labels/[id]/page.tsx
@@ -1,7 +1,13 @@
+import type { Metadata } from "next";
 import LabelDetailClient from "./LabelDetail";
-import { getLabelById, getLabelAuthoredEntries, getLabelPublishedEntries } from "@/server/repo/zxdb";
+import { getLabelById, getLabelAuthoredEntries, getLabelPublishedEntries } from "@/server/repo";

-export const metadata = { title: "ZXDB Label" };
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
+  const { id } = await params;
+  const label = await getLabelById(Number(id));
+  if (!label) return { title: "Label Not Found | ZXDB" };
+  return { title: `${label.name} | ZXDB Label` };
+}

 // Depends on searchParams (?page=, ?tab=). Force dynamic so each request renders correctly.
 export const dynamic = "force-dynamic";
--- a/src/app/zxdb/labels/page.tsx
+++ b/src/app/zxdb/labels/page.tsx
@@ -1,5 +1,5 @@
 import LabelsSearch from "./LabelsSearch";
-import { searchLabels } from "@/server/repo/zxdb";
+import { searchLabels } from "@/server/repo";

 export const metadata = { title: "ZXDB Labels" };

--- a/src/app/zxdb/languages/LanguagesSearch.tsx
+++ b/src/app/zxdb/languages/LanguagesSearch.tsx
@@ -3,16 +3,18 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { Row, Col, Card, Form, Button, Alert, Table, Badge } from "react-bootstrap";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
 import Pagination from "@/components/explorer/Pagination";

-type Language = { id: string; name: string };
-type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
+import type { PagedResult } from "@/types/zxdb";

-export default function LanguagesSearch({ initial, initialQ }: { initial?: Paged<Language>; initialQ?: string }) {
+type Language = { id: string; name: string };
+
+export default function LanguagesSearch({ initial, initialQ }: { initial?: PagedResult<Language>; initialQ?: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initialQ ?? "");
-  const [data, setData] = useState<Paged<Language> | null>(initial ?? null);
+  const [data, setData] = useState<PagedResult<Language> | null>(initial ?? null);
  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);

  useEffect(() => {
@@ -54,28 +56,28 @@ export default function LanguagesSearch({ initial, initialQ }: { initial?: Paged
        </div>
      </div>

-      <div className="row g-3">
-        <div className="col-lg-3">
-          <div className="card shadow-sm">
-            <div className="card-body">
-              <form className="d-flex flex-column gap-2" onSubmit={submit}>
-                <div>
-                  <label className="form-label small text-secondary">Search</label>
-                  <input className="form-control" placeholder="Search languages..." value={q} onChange={(e) => setQ(e.target.value)} />
-                </div>
+      <Row className="g-3">
+        <Col lg={3}>
+          <Card className="shadow-sm">
+            <Card.Body>
+              <Form className="d-flex flex-column gap-2" onSubmit={submit}>
+                <Form.Group>
+                  <Form.Label className="small text-secondary">Search</Form.Label>
+                  <Form.Control placeholder="Search languages..." value={q} onChange={(e) => setQ(e.target.value)} />
+                </Form.Group>
                <div className="d-grid">
-                  <button className="btn btn-primary">Search</button>
-                </div>
-              </form>
-            </div>
-          </div>
+                  <Button variant="primary" type="submit">Search</Button>
                </div>
+              </Form>
+            </Card.Body>
+          </Card>
+        </Col>

-        <div className="col-lg-9">
-          {data && data.items.length === 0 && <div className="alert alert-warning">No languages found.</div>}
+        <Col lg={9}>
+          {data && data.items.length === 0 && <Alert variant="warning">No languages found.</Alert>}
          {data && data.items.length > 0 && (
-            <div className="table-responsive">
-              <table className="table table-striped table-hover align-middle">
+            <Table striped hover className="align-middle">
+              <caption className="visually-hidden">Languages search results</caption>
              <thead>
                <tr>
                  <th style={{ width: 120 }}>Code</th>
@@ -85,18 +87,17 @@ export default function LanguagesSearch({ initial, initialQ }: { initial?: Paged
              <tbody>
                {data.items.map((l) => (
                  <tr key={l.id}>
-                      <td><span className="badge text-bg-light">{l.id}</span></td>
+                    <td><Badge bg="light" text="dark">{l.id}</Badge></td>
                    <td>
                      <Link href={`/zxdb/languages/${l.id}`}>{l.name}</Link>
                    </td>
                  </tr>
                ))}
              </tbody>
-              </table>
-            </div>
+            </Table>
          )}
-        </div>
-      </div>
+        </Col>
+      </Row>

      <Pagination
        page={data?.page ?? 1}
--- a/src/app/zxdb/languages/[id]/LanguageDetail.tsx
+++ b/src/app/zxdb/languages/[id]/LanguageDetail.tsx
@@ -4,10 +4,11 @@ import Link from "next/link";
 import { useMemo, useState } from "react";
 import { useRouter } from "next/navigation";

-type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; machinetypeName?: string | null; languageId: string | null; languageName?: string | null };
-type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
+import type { PagedResult } from "@/types/zxdb";

-export default function LanguageDetailClient({ id, initial, initialQ }: { id: string; initial: Paged<Item>; initialQ?: string }) {
+type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; machinetypeName?: string | null; languageId: string | null; languageName?: string | null };
+
+export default function LanguageDetailClient({ id, initial, initialQ }: { id: string; initial: PagedResult<Item>; initialQ?: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initialQ ?? "");
  const totalPages = useMemo(() => Math.max(1, Math.ceil(initial.total / initial.pageSize)), [initial]);
@@ -17,7 +18,7 @@ export default function LanguageDetailClient({ id, initial, initialQ }: { id: st
      <h1 className="mb-0">Language <span className="badge text-bg-light">{id}</span></h1>
      <form className="row gy-2 gx-2 align-items-center mt-2" onSubmit={(e) => { e.preventDefault(); const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", "1"); router.push(`/zxdb/languages/${id}?${p.toString()}`); }}>
        <div className="col-sm-8 col-md-6 col-lg-4">
-          <input className="form-control" placeholder="Search within this language…" value={q} onChange={(e) => setQ(e.target.value)} />
+          <input className="form-control" placeholder="Search within this language…" aria-label="Search within this language" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <div className="col-auto">
          <button className="btn btn-primary">Search</button>
--- a/src/app/zxdb/languages/[id]/loading.tsx
+++ b/src/app/zxdb/languages/[id]/loading.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from "react-bootstrap";
+
+export default function Loading() {
+  return (
+    <div className="d-flex justify-content-center align-items-center py-5">
+      <Spinner animation="border" variant="primary" />
+    </div>
+  );
+}
--- a/src/app/zxdb/languages/[id]/page.tsx
+++ b/src/app/zxdb/languages/[id]/page.tsx
@@ -1,5 +1,5 @@
 import LanguageDetailClient from "./LanguageDetail";
-import { entriesByLanguage } from "@/server/repo/zxdb";
+import { entriesByLanguage } from "@/server/repo";

 export const metadata = { title: "ZXDB Language" };

--- a/src/app/zxdb/languages/page.tsx
+++ b/src/app/zxdb/languages/page.tsx
@@ -1,5 +1,5 @@
 import LanguagesSearch from "./LanguagesSearch";
-import { searchLanguages } from "@/server/repo/zxdb";
+import { searchLanguages } from "@/server/repo";

 export const metadata = { title: "ZXDB Languages" };

--- a/src/app/zxdb/machinetypes/MachineTypesSearch.tsx
+++ b/src/app/zxdb/machinetypes/MachineTypesSearch.tsx
@@ -3,16 +3,18 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { Row, Col, Card, Form, Button, Alert, Table, Badge } from "react-bootstrap";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
 import Pagination from "@/components/explorer/Pagination";

-type MT = { id: number; name: string };
-type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
+import type { PagedResult } from "@/types/zxdb";

-export default function MachineTypesSearch({ initial, initialQ }: { initial?: Paged<MT>; initialQ?: string }) {
+type MT = { id: number; name: string };
+
+export default function MachineTypesSearch({ initial, initialQ }: { initial?: PagedResult<MT>; initialQ?: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initialQ ?? "");
-  const [data, setData] = useState<Paged<MT> | null>(initial ?? null);
+  const [data, setData] = useState<PagedResult<MT> | null>(initial ?? null);
  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);

  useEffect(() => {
@@ -54,28 +56,28 @@ export default function MachineTypesSearch({ initial, initialQ }: { initial?: Pa
        </div>
      </div>

-      <div className="row g-3">
-        <div className="col-lg-3">
-          <div className="card shadow-sm">
-            <div className="card-body">
-              <form className="d-flex flex-column gap-2" onSubmit={submit}>
-                <div>
-                  <label className="form-label small text-secondary">Search</label>
-                  <input className="form-control" placeholder="Search machine types..." value={q} onChange={(e) => setQ(e.target.value)} />
-                </div>
+      <Row className="g-3">
+        <Col lg={3}>
+          <Card className="shadow-sm">
+            <Card.Body>
+              <Form className="d-flex flex-column gap-2" onSubmit={submit}>
+                <Form.Group>
+                  <Form.Label className="small text-secondary">Search</Form.Label>
+                  <Form.Control placeholder="Search machine types..." value={q} onChange={(e) => setQ(e.target.value)} />
+                </Form.Group>
                <div className="d-grid">
-                  <button className="btn btn-primary">Search</button>
-                </div>
-              </form>
-            </div>
-          </div>
+                  <Button variant="primary" type="submit">Search</Button>
                </div>
+              </Form>
+            </Card.Body>
+          </Card>
+        </Col>

-        <div className="col-lg-9">
-          {data && data.items.length === 0 && <div className="alert alert-warning">No machine types found.</div>}
+        <Col lg={9}>
+          {data && data.items.length === 0 && <Alert variant="warning">No machine types found.</Alert>}
          {data && data.items.length > 0 && (
-            <div className="table-responsive">
-              <table className="table table-striped table-hover align-middle">
+            <Table striped hover className="align-middle">
+              <caption className="visually-hidden">Machine types search results</caption>
              <thead>
                <tr>
                  <th style={{ width: 120 }}>ID</th>
@@ -85,18 +87,17 @@ export default function MachineTypesSearch({ initial, initialQ }: { initial?: Pa
              <tbody>
                {data.items.map((m) => (
                  <tr key={m.id}>
-                      <td><span className="badge text-bg-light">#{m.id}</span></td>
+                    <td><Badge bg="light" text="dark">#{m.id}</Badge></td>
                    <td>
                      <Link href={`/zxdb/machinetypes/${m.id}`}>{m.name}</Link>
                    </td>
                  </tr>
                ))}
              </tbody>
-              </table>
-            </div>
+            </Table>
          )}
-        </div>
-      </div>
+        </Col>
+      </Row>

      <Pagination
        page={data?.page ?? 1}
--- a/src/app/zxdb/machinetypes/[id]/MachineTypeDetail.tsx
+++ b/src/app/zxdb/machinetypes/[id]/MachineTypeDetail.tsx
@@ -13,9 +13,9 @@ type Item = {
  languageId: string | null;
  languageName?: string | null;
 };
-type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
+import type { PagedResult } from "@/types/zxdb";

-export default function MachineTypeDetailClient({ id, initial, initialQ }: { id: number; initial: Paged<Item>; initialQ?: string }) {
+export default function MachineTypeDetailClient({ id, initial, initialQ }: { id: number; initial: PagedResult<Item>; initialQ?: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initialQ ?? "");
  const totalPages = useMemo(() => Math.max(1, Math.ceil(initial.total / initial.pageSize)), [initial]);
@@ -29,7 +29,7 @@ export default function MachineTypeDetailClient({ id, initial, initialQ }: { id:
        <h1 className="mb-0">{machineName ?? "Machine Type"} <span className="badge text-bg-light">#{id}</span></h1>
        <form className="row gy-2 gx-2 align-items-center mt-2" onSubmit={(e) => { e.preventDefault(); const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", "1"); router.push(`/zxdb/machinetypes/${id}?${p.toString()}`); }}>
          <div className="col-sm-8 col-md-6 col-lg-4">
-            <input className="form-control" placeholder="Search within this machine type…" value={q} onChange={(e) => setQ(e.target.value)} />
+            <input className="form-control" placeholder="Search within this machine type…" aria-label="Search within this machine type" value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
          <div className="col-auto">
            <button className="btn btn-primary">Search</button>
--- a/src/app/zxdb/machinetypes/[id]/loading.tsx
+++ b/src/app/zxdb/machinetypes/[id]/loading.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from "react-bootstrap";
+
+export default function Loading() {
+  return (
+    <div className="d-flex justify-content-center align-items-center py-5">
+      <Spinner animation="border" variant="primary" />
+    </div>
+  );
+}
--- a/src/app/zxdb/machinetypes/[id]/page.tsx
+++ b/src/app/zxdb/machinetypes/[id]/page.tsx
@@ -1,5 +1,5 @@
 import MachineTypeDetailClient from "./MachineTypeDetail";
-import { entriesByMachinetype } from "@/server/repo/zxdb";
+import { entriesByMachinetype } from "@/server/repo";

 export const metadata = { title: "ZXDB Machine Type" };
 // Depends on searchParams (?page=). Force dynamic so each page renders correctly.
--- a/src/app/zxdb/machinetypes/page.tsx
+++ b/src/app/zxdb/machinetypes/page.tsx
@@ -1,5 +1,5 @@
 import MachineTypesSearch from "./MachineTypesSearch";
-import { searchMachinetypes } from "@/server/repo/zxdb";
+import { searchMachinetypes } from "@/server/repo";

 export const metadata = { title: "ZXDB Machine Types" };

--- a/src/app/zxdb/magazines/[id]/loading.tsx
+++ b/src/app/zxdb/magazines/[id]/loading.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from "react-bootstrap";
+
+export default function Loading() {
+  return (
+    <div className="d-flex justify-content-center align-items-center py-5">
+      <Spinner animation="border" variant="primary" />
+    </div>
+  );
+}
--- a/src/app/zxdb/magazines/[id]/page.tsx
+++ b/src/app/zxdb/magazines/[id]/page.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { getMagazine } from "@/server/repo/zxdb";
+import { getMagazine } from "@/server/repo";
+import { Link45deg, Archive } from "react-bootstrap-icons";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";

 export const metadata = { title: "ZXDB Magazine" };
@@ -28,7 +29,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
      <div className="text-secondary mb-3">Language: {mag.languageId}</div>

      <div className="mb-3 d-flex gap-2 flex-wrap">
-        <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/magazines">← Back to list</Link>
+        <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/magazines">&larr; Back to list</Link>
        {mag.linkSite && (
          <a className="btn btn-outline-secondary btn-sm" href={mag.linkSite} target="_blank" rel="noreferrer">
            Official site
@@ -42,6 +43,7 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
      ) : (
        <div className="table-responsive">
          <table className="table table-sm align-middle">
+            <caption className="visually-hidden">Magazine issues</caption>
            <thead>
              <tr>
                <th style={{ width: 200 }}>Issue</th>
@@ -71,13 +73,13 @@ export default async function Page({ params }: { params: Promise<{ id: string }>
                    <div className="d-flex gap-2">
                      {i.linkMask && (
                        <a className="btn btn-outline-secondary btn-sm" href={i.linkMask} target="_blank" rel="noreferrer" title="Link">
-                          <span className="bi bi-link-45deg" aria-hidden />
+                          <Link45deg aria-hidden />
                          <span className="visually-hidden">Link</span>
                        </a>
                      )}
                      {i.archiveMask && (
                        <a className="btn btn-outline-secondary btn-sm" href={i.archiveMask} target="_blank" rel="noreferrer" title="Archive">
-                          <span className="bi bi-archive" aria-hidden />
+                          <Archive aria-hidden />
                          <span className="visually-hidden">Archive</span>
                        </a>
                      )}
--- a/src/app/zxdb/magazines/page.tsx
+++ b/src/app/zxdb/magazines/page.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { listMagazines } from "@/server/repo/zxdb";
+import { listMagazines } from "@/server/repo";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";

 export const metadata = { title: "ZXDB Magazines" };
@@ -17,6 +17,14 @@ export default async function Page({
  const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);

  const data = await listMagazines({ q, page, pageSize: 20 });
+  const totalPages = Math.max(1, Math.ceil(data.total / data.pageSize));
+
+  function makeHref(p: number) {
+    const params = new URLSearchParams();
+    if (q) params.set("q", q);
+    params.set("page", String(p));
+    return `/zxdb/magazines?${params.toString()}`;
+  }

  return (
    <div>
@@ -54,6 +62,7 @@ export default async function Page({
        <div className="col-lg-9">
          <div className="table-responsive">
            <table className="table table-striped table-hover align-middle">
+              <caption className="visually-hidden">Magazines search results</caption>
              <thead>
                <tr>
                  <th>Title</th>
@@ -81,37 +90,21 @@ export default async function Page({
        </div>
      </div>

-      <Pagination page={data.page} pageSize={data.pageSize} total={data.total} q={q} />
-    </div>
-  );
-}
-
-function Pagination({ page, pageSize, total, q }: { page: number; pageSize: number; total: number; q: string }) {
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  if (totalPages <= 1) return null;
-  const makeHref = (p: number) => {
-    const params = new URLSearchParams();
-    if (q) params.set("q", q);
-    params.set("page", String(p));
-    return `/zxdb/magazines?${params.toString()}`;
-  };
-  return (
+      {totalPages > 1 && (
        <nav className="mt-3" aria-label="Pagination">
          <ul className="pagination">
            <li className={`page-item ${page <= 1 ? "disabled" : ""}`}>
-          <Link className="page-link" href={makeHref(Math.max(1, page - 1))}>
-            Previous
-          </Link>
+              <Link className="page-link" href={makeHref(Math.max(1, page - 1))}>Previous</Link>
            </li>
            <li className="page-item disabled">
              <span className="page-link">Page {page} of {totalPages}</span>
            </li>
            <li className={`page-item ${page >= totalPages ? "disabled" : ""}`}>
-          <Link className="page-link" href={makeHref(Math.min(totalPages, page + 1))}>
-            Next
-          </Link>
+              <Link className="page-link" href={makeHref(Math.min(totalPages, page + 1))}>Next</Link>
            </li>
          </ul>
        </nav>
+      )}
+    </div>
  );
 }
--- a/src/app/zxdb/page.tsx
+++ b/src/app/zxdb/page.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { Collection, BoxArrowDown, JournalText, People } from "react-bootstrap-icons";
 import TapeIdentifier from "./TapeIdentifier";

 export const metadata = {
@@ -19,8 +20,8 @@ export default async function Page() {
          <div className="row align-items-center g-4">
            <div className="col-lg-7">
              <div className="d-flex align-items-center gap-2 mb-3">
-                <span className="badge text-bg-dark">ZXDB</span>
-                <span className="badge text-bg-secondary">Explorer</span>
+                <span className="badge bg-dark">ZXDB</span>
+                <span className="badge bg-secondary">Explorer</span>
              </div>
              <h1 className="display-6 mb-3">ZXDB Explorer</h1>
              <p className="lead text-secondary mb-4">
@@ -30,14 +31,14 @@ export default async function Page() {
                <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/entries">Browse entries</Link>
                <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/releases">Latest releases</Link>
                <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/magazines">Magazine issues</Link>
-                <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/labels">People & labels</Link>
+                <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/labels">People &amp; labels</Link>
              </div>
            </div>
            <div className="col-lg-5">
              <div className="card border-0 shadow-sm">
                <div className="card-body">
                  <h5 className="card-title mb-3">Jump straight in</h5>
-                  <form className="d-flex flex-column gap-2" method="get" action="/zxdb/entries">
+                  <form method="get" action="/zxdb/entries" className="d-flex flex-column gap-2">
                    <div>
                      <label className="form-label small text-secondary">Search entries</label>
                      <input className="form-control" name="q" placeholder="Try: manic, doom, renegade..." />
@@ -50,7 +51,7 @@ export default async function Page() {
                        <option value="title_aliases_origins">Titles + Aliases + Origins</option>
                      </select>
                    </div>
-                    <button className="btn btn-primary">Search</button>
+                    <button className="btn btn-primary" type="submit">Search</button>
                  </form>
                </div>
              </div>
@@ -58,7 +59,8 @@ export default async function Page() {
          </div>
        </section>

-        <section className="row g-3">
+        <section>
+          <div className="row g-3">
            <div className="col-lg-8">
              <TapeIdentifier />
            </div>
@@ -68,6 +70,7 @@ export default async function Page() {
                The file stays in your browser &mdash; only its hash is sent.
              </p>
            </div>
+          </div>
        </section>

        <section>
@@ -81,10 +84,10 @@ export default async function Page() {
                <div className="card h-100 shadow-sm">
                  <div className="card-body">
                    <div className="d-flex align-items-center gap-3">
-                      <span className="bi bi-collection" style={{ fontSize: 28 }} aria-hidden />
+                      <Collection size={28} aria-hidden />
                      <div>
                        <h5 className="card-title mb-1">Entries</h5>
-                        <div className="card-text text-secondary">Search + filter titles</div>
+                        <p className="card-text text-secondary">Search + filter titles</p>
                      </div>
                    </div>
                  </div>
@@ -96,10 +99,10 @@ export default async function Page() {
                <div className="card h-100 shadow-sm">
                  <div className="card-body">
                    <div className="d-flex align-items-center gap-3">
-                      <span className="bi bi-box-arrow-down" style={{ fontSize: 28 }} aria-hidden />
+                      <BoxArrowDown size={28} aria-hidden />
                      <div>
                        <h5 className="card-title mb-1">Releases</h5>
-                        <div className="card-text text-secondary">Downloads + media</div>
+                        <p className="card-text text-secondary">Downloads + media</p>
                      </div>
                    </div>
                  </div>
@@ -111,10 +114,10 @@ export default async function Page() {
                <div className="card h-100 shadow-sm">
                  <div className="card-body">
                    <div className="d-flex align-items-center gap-3">
-                      <span className="bi bi-journal-text" style={{ fontSize: 28 }} aria-hidden />
+                      <JournalText size={28} aria-hidden />
                      <div>
                        <h5 className="card-title mb-1">Magazines</h5>
-                        <div className="card-text text-secondary">Issues + references</div>
+                        <p className="card-text text-secondary">Issues + references</p>
                      </div>
                    </div>
                  </div>
@@ -126,10 +129,10 @@ export default async function Page() {
                <div className="card h-100 shadow-sm">
                  <div className="card-body">
                    <div className="d-flex align-items-center gap-3">
-                      <span className="bi bi-people" style={{ fontSize: 28 }} aria-hidden />
+                      <People size={28} aria-hidden />
                      <div>
                        <h5 className="card-title mb-1">Labels</h5>
-                        <div className="card-text text-secondary">People + publishers</div>
+                        <p className="card-text text-secondary">People + publishers</p>
                      </div>
                    </div>
                  </div>
@@ -139,7 +142,8 @@ export default async function Page() {
          </div>
        </section>

-        <section className="row g-3">
+        <section>
+          <div className="row g-3">
            <div className="col-lg-7">
              <div className="card h-100 shadow-sm">
                <div className="card-body">
@@ -167,6 +171,7 @@ export default async function Page() {
                </div>
              </div>
            </div>
+          </div>
        </section>
      </div>
  );
--- a/src/app/zxdb/releases/ReleasesExplorer.tsx
+++ b/src/app/zxdb/releases/ReleasesExplorer.tsx
@@ -13,19 +13,11 @@ import FilterSection from "@/components/explorer/FilterSection";
 import MultiSelectChips from "@/components/explorer/MultiSelectChips";
 import Pagination from "@/components/explorer/Pagination";
 import useSearchFetch from "@/hooks/useSearchFetch";
+import type { PagedResult } from "@/types/zxdb";
+import { preferredMachineIds, parseMachineIds } from "@/utils/params";

-const preferredMachineIds = [27, 26, 8, 9];
 const PAGE_SIZE = 20;

-function parseMachineIds(value?: string) {
-  if (!value) return preferredMachineIds.slice();
-  const ids = value
-    .split(",")
-    .map((id) => Number(id.trim()))
-    .filter((id) => Number.isFinite(id) && id > 0);
-  return ids.length ? ids : preferredMachineIds.slice();
-}
-
 type Item = {
  entryId: number;
  releaseSeq: number;
@@ -34,19 +26,12 @@ type Item = {
  magrefCount: number;
 };

-type Paged<T> = {
-  items: T[];
-  page: number;
-  pageSize: number;
-  total: number;
-};
-
 export default function ReleasesExplorer({
  initial,
  initialUrlState,
  initialLists,
 }: {
-  initial?: Paged<Item>;
+  initial?: PagedResult<Item>;
  initialUrlState?: {
    q: string;
    page: number;
--- a/src/app/zxdb/releases/[entryId]/[releaseSeq]/ReleaseDetail.tsx
+++ b/src/app/zxdb/releases/[entryId]/[releaseSeq]/ReleaseDetail.tsx
@@ -2,6 +2,7 @@

 import { useState, useMemo } from "react";
 import Link from "next/link";
+import { Row, Col, Card, Table, Badge, Alert, Button } from "react-bootstrap";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
 import FileViewer from "@/components/FileViewer";

@@ -198,7 +199,7 @@ export default function ReleaseDetailClient({ data }: { data: ReleaseDetailData
    return Array.from(groups.entries()).sort((a, b) => a[0].localeCompare(b[0]));
  }, [data?.scraps]);

-  if (!data) return <div className="alert alert-warning">Not found</div>;
+  if (!data) return <Alert variant="warning">Not found</Alert>;

  const magazineGroups = groupMagazineRefs(data.magazineRefs);
  const otherReleases = data.entryReleases.filter((r) => r.releaseSeq !== data.release.releaseSeq);
@@ -216,18 +217,17 @@ export default function ReleaseDetailClient({ data }: { data: ReleaseDetailData

      <div className="d-flex align-items-center gap-2 flex-wrap">
        <h1 className="mb-0">Release #{data.release.releaseSeq}</h1>
-        <Link className="badge text-bg-secondary text-decoration-none" href={`/zxdb/entries/${data.entry.id}`}>
-          {data.entry.title}
+        <Link href={`/zxdb/entries/${data.entry.id}`} className="text-decoration-none">
+          <Badge bg="secondary">{data.entry.title}</Badge>
        </Link>
      </div>

-      <div className="row g-3 mt-2">
-        <div className="col-lg-4">
-          <div className="card shadow-sm mb-3">
-            <div className="card-body">
-              <h5 className="card-title">Release Summary</h5>
-              <div className="table-responsive">
-                <table className="table table-sm table-striped align-middle mb-0">
+      <Row className="g-3 mt-2">
+        <Col lg={4}>
+          <Card className="shadow-sm mb-3">
+            <Card.Body>
+              <Card.Title>Release Summary</Card.Title>
+              <Table size="sm" striped className="align-middle mb-0">
                  <tbody>
                    <tr>
                      <th style={{ width: 160 }}>Entry</th>
@@ -292,36 +292,35 @@ export default function ReleaseDetailClient({ data }: { data: ReleaseDetailData
                      <td>{data.release.book.pages ?? <span className="text-secondary">-</span>}</td>
                    </tr>
                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
+              </Table>
+            </Card.Body>
+          </Card>

-          <div className="card shadow-sm">
-            <div className="card-body">
-              <h5 className="card-title">Other Releases</h5>
+          <Card className="shadow-sm">
+            <Card.Body>
+              <Card.Title>Other Releases</Card.Title>
              {otherReleases.length === 0 && <div className="text-secondary">No other releases</div>}
              {otherReleases.length > 0 && (
                <div className="d-flex flex-wrap gap-2">
                  {otherReleases.map((r) => (
                    <Link
                      key={r.releaseSeq}
-                      className="badge text-bg-light text-decoration-none"
                      href={`/zxdb/releases/${data.entry.id}/${r.releaseSeq}`}
+                      className="text-decoration-none"
                    >
-                      #{r.releaseSeq}{r.year != null ? ` · ${r.year}` : ""}
+                      <Badge bg="light" text="dark">#{r.releaseSeq}{r.year != null ? ` · ${r.year}` : ""}</Badge>
                    </Link>
                  ))}
                </div>
              )}
-            </div>
-          </div>
-        </div>
+            </Card.Body>
+          </Card>
+        </Col>

-        <div className="col-lg-8">
-          <div className="card shadow-sm mb-3">
-            <div className="card-body">
-              <h5 className="card-title">Places (Magazines)</h5>
+        <Col lg={8}>
+          <Card className="shadow-sm mb-3">
+            <Card.Body>
+              <Card.Title>Places (Magazines)</Card.Title>
              {magazineGroups.length === 0 && <div className="text-secondary">No magazine references</div>}
              {magazineGroups.length > 0 && (
                <div className="d-flex flex-column gap-3">
@@ -350,8 +349,7 @@ export default function ReleaseDetailClient({ data }: { data: ReleaseDetailData
                              {issueGroup.items.length} reference{issueGroup.items.length === 1 ? "" : "s"}
                            </div>
                          </div>
-                          <div className="table-responsive mt-2">
-                            <table className="table table-sm table-striped align-middle">
+                          <Table size="sm" striped className="align-middle mt-2">
                              <thead>
                                <tr>
                                  <th style={{ width: 80 }}>Page</th>
@@ -370,26 +368,24 @@ export default function ReleaseDetailClient({ data }: { data: ReleaseDetailData
                                  </tr>
                                ))}
                              </tbody>
-                            </table>
-                          </div>
+                          </Table>
                        </div>
                      ))}
                    </div>
                  ))}
                </div>
              )}
-            </div>
-          </div>
+            </Card.Body>
+          </Card>

-          <div className="card shadow-sm mb-3">
-            <div className="card-body">
-              <h5 className="card-title">Downloads</h5>
+          <Card className="shadow-sm mb-3">
+            <Card.Body>
+              <Card.Title>Downloads</Card.Title>
              {groupedDownloads.length === 0 && <div className="text-secondary">No downloads</div>}
              {groupedDownloads.map(([type, items]) => (
                <div key={type} className="mb-4">
                  <h6 className="text-primary border-bottom pb-1 mb-2">{type}</h6>
-                  <div className="table-responsive">
-                    <table className="table table-sm table-striped align-middle">
+                  <Table size="sm" striped className="align-middle">
                      <thead>
                        <tr>
                          <th>Link</th>
@@ -458,22 +454,20 @@ export default function ReleaseDetailClient({ data }: { data: ReleaseDetailData
                          );
                        })}
                      </tbody>
-                    </table>
-                  </div>
+                  </Table>
                </div>
              ))}
-            </div>
-          </div>
+            </Card.Body>
+          </Card>

-          <div className="card shadow-sm mb-3">
-            <div className="card-body">
-              <h5 className="card-title">Scraps / Media</h5>
+          <Card className="shadow-sm mb-3">
+            <Card.Body>
+              <Card.Title>Scraps / Media</Card.Title>
              {groupedScraps.length === 0 && <div className="text-secondary">No scraps</div>}
              {groupedScraps.map(([type, items]) => (
                <div key={type} className="mb-4">
                  <h6 className="text-primary border-bottom pb-1 mb-2">{type}</h6>
-                  <div className="table-responsive">
-                    <table className="table table-sm table-striped align-middle">
+                  <Table size="sm" striped className="align-middle">
                      <thead>
                        <tr>
                          <th>Link</th>
@@ -544,20 +538,18 @@ export default function ReleaseDetailClient({ data }: { data: ReleaseDetailData
                          );
                        })}
                      </tbody>
-                    </table>
-                  </div>
+                  </Table>
                </div>
              ))}
-            </div>
-          </div>
+            </Card.Body>
+          </Card>

-          <div className="card shadow-sm mb-3">
-            <div className="card-body">
-              <h5 className="card-title">Issue Files</h5>
+          <Card className="shadow-sm mb-3">
+            <Card.Body>
+              <Card.Title>Issue Files</Card.Title>
              {data.files.length === 0 && <div className="text-secondary">No files linked</div>}
              {data.files.length > 0 && (
-                <div className="table-responsive">
-                  <table className="table table-sm table-striped align-middle">
+                <Table size="sm" striped className="align-middle">
                  <thead>
                    <tr>
                      <th>Type</th>
@@ -572,7 +564,7 @@ export default function ReleaseDetailClient({ data }: { data: ReleaseDetailData
                      const isHttp = f.link.startsWith("http://") || f.link.startsWith("https://");
                      return (
                        <tr key={f.id}>
-                            <td><span className="badge text-bg-secondary">{f.type.name}</span></td>
+                          <td><Badge bg="secondary">{f.type.name}</Badge></td>
                          <td>
                            {isHttp ? (
                              <a href={f.link} target="_blank" rel="noopener noreferrer">{f.link}</a>
@@ -587,13 +579,12 @@ export default function ReleaseDetailClient({ data }: { data: ReleaseDetailData
                      );
                    })}
                  </tbody>
-                  </table>
-                </div>
+                </Table>
              )}
-            </div>
-          </div>
-        </div>
-      </div>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>

      <div className="d-flex align-items-center gap-2">
        <Link className="btn btn-sm btn-outline-secondary" href={`/zxdb/releases/${data.entry.id}/${data.release.releaseSeq}`}>Permalink</Link>
--- a/src/app/zxdb/releases/[entryId]/[releaseSeq]/loading.tsx
+++ b/src/app/zxdb/releases/[entryId]/[releaseSeq]/loading.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from "react-bootstrap";
+
+export default function Loading() {
+  return (
+    <div className="d-flex justify-content-center align-items-center py-5">
+      <Spinner animation="border" variant="primary" />
+    </div>
+  );
+}
--- a/src/app/zxdb/releases/[entryId]/[releaseSeq]/page.tsx
+++ b/src/app/zxdb/releases/[entryId]/[releaseSeq]/page.tsx
@@ -1,16 +1,20 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
 import ReleaseDetailClient from "./ReleaseDetail";
-import { getReleaseDetail } from "@/server/repo/zxdb";
-
-export const metadata = {
-  title: "ZXDB Release",
-};
+import { getReleaseDetail } from "@/server/repo";

 export const revalidate = 3600;

+export async function generateMetadata({ params }: { params: Promise<{ entryId: string; releaseSeq: string }> }): Promise<Metadata> {
+  const { entryId, releaseSeq } = await params;
+  const data = await getReleaseDetail(Number(entryId), Number(releaseSeq));
+  if (!data) return { title: "Release Not Found | ZXDB" };
+  return { title: `${data.entry.title} #${releaseSeq} | ZXDB Release` };
+}
+
 export default async function Page({ params }: { params: Promise<{ entryId: string; releaseSeq: string }> }) {
  const { entryId, releaseSeq } = await params;
-  const entryIdNum = Number(entryId);
-  const releaseSeqNum = Number(releaseSeq);
-  const data = await getReleaseDetail(entryIdNum, releaseSeqNum);
+  const data = await getReleaseDetail(Number(entryId), Number(releaseSeq));
+  if (!data) notFound();
  return <ReleaseDetailClient data={data} />;
 }
--- a/src/app/zxdb/releases/page.tsx
+++ b/src/app/zxdb/releases/page.tsx
@@ -1,5 +1,7 @@
 import ReleasesExplorer from "./ReleasesExplorer";
-import { listCasetypes, listFiletypes, listLanguages, listMachinetypes, listSchemetypes, listSourcetypes, searchReleases } from "@/server/repo/zxdb";
+import { listCasetypes, listFiletypes, listLanguages, listMachinetypes, listSchemetypes, listSourcetypes, searchReleases } from "@/server/repo";
+import { parseIdList } from "@/utils/params";
+import { serialize } from "@/utils/serialize";

 export const metadata = {
  title: "ZXDB Releases",
@@ -7,16 +9,6 @@ export const metadata = {

 export const dynamic = "force-dynamic";

-function parseIdList(value: string | string[] | undefined) {
-  if (!value) return undefined;
-  const raw = Array.isArray(value) ? value.join(",") : value;
-  const ids = raw
-    .split(",")
-    .map((id) => Number(id.trim()))
-    .filter((id) => Number.isFinite(id) && id > 0);
-  return ids.length ? ids : undefined;
-}
-
 export default async function Page({ searchParams }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
  const sp = await searchParams;
  const hasParams = Object.values(sp).some((value) => value !== undefined);
@@ -47,20 +39,17 @@ export default async function Page({ searchParams }: { searchParams: Promise<{ [
    listCasetypes(),
  ]);

-  // Ensure the object passed to a Client Component is a plain JSON value
-  const initialPlain = JSON.parse(JSON.stringify(initial));
-
  return (
    <ReleasesExplorer
-      initial={initialPlain}
-      initialLists={{
-        languages: JSON.parse(JSON.stringify(langs)),
-        machinetypes: JSON.parse(JSON.stringify(machines)),
-        filetypes: JSON.parse(JSON.stringify(filetypes)),
-        schemetypes: JSON.parse(JSON.stringify(schemes)),
-        sourcetypes: JSON.parse(JSON.stringify(sources)),
-        casetypes: JSON.parse(JSON.stringify(cases)),
-      }}
+      initial={serialize(initial)}
+      initialLists={serialize({
+        languages: langs,
+        machinetypes: machines,
+        filetypes,
+        schemetypes: schemes,
+        sourcetypes: sources,
+        casetypes: cases,
+      })}
      initialUrlState={{ q, page, year: yearStr, sort, dLanguageId, dMachinetypeId: dMachinetypeIdStr, filetypeId: filetypeIdStr, schemetypeId, sourcetypeId, casetypeId, isDemo: isDemoStr }}
      initialUrlHasParams={hasParams}
    />
--- a/src/components/FileViewer.tsx
+++ b/src/components/FileViewer.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Modal, Button, Spinner } from "react-bootstrap";

 type FileViewerProps = {
@@ -20,8 +20,10 @@ export default function FileViewer({ url, title, onClose }: FileViewerProps) {

  const viewUrl = url.includes("?") ? `${url}&view=1` : `${url}?view=1`;

-  useState(() => {
+  useEffect(() => {
    if (isText) {
+      setLoading(true);
+      setError(null);
      fetch(viewUrl)
        .then((res) => {
          if (!res.ok) throw new Error("Failed to load file");
@@ -38,7 +40,7 @@ export default function FileViewer({ url, title, onClose }: FileViewerProps) {
    } else {
        setLoading(false);
    }
-  });
+  }, [viewUrl, isText]);

  return (
    <Modal show size="xl" onHide={onClose} centered scrollable>
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -8,13 +8,13 @@ export default function NavbarClient() {
    return (
        <Navbar expand="lg" bg="primary" data-bs-theme="dark" sticky="top" className="navbar">
            <Container fluid>
-                <Link className="navbar-brand" href="/">SpecNext Explorer</Link>
+                <Navbar.Brand as={Link} href="/">SpecNext Explorer</Navbar.Brand>
                <Navbar.Toggle aria-controls="navbarSupportedContent" />
                <Navbar.Collapse id="navbarSupportedContent">
                    <Nav className="me-auto mb-2 mb-lg-0">
-                        <Link className="nav-link" href="/">Home</Link>
-                        <Link className="nav-link" href="/registers">Registers</Link>
-                        <Link className="nav-link" href="/zxdb">ZXDB</Link>
+                        <Nav.Link as={Link} href="/">Home</Nav.Link>
+                        <Nav.Link as={Link} href="/registers">Registers</Nav.Link>
+                        <Nav.Link as={Link} href="/zxdb">ZXDB</Nav.Link>
                    </Nav>

                    <ThemeDropdown />
--- a/src/components/ThemeDropdown.tsx
+++ b/src/components/ThemeDropdown.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { useEffect, useState, useCallback } from "react";
-import * as Icon from "react-bootstrap-icons";
+import { SunFill, MoonStarsFill, CircleHalf, Check2 } from "react-bootstrap-icons";
 import { Nav, Dropdown } from "react-bootstrap";

 type Theme = "light" | "dark" | "auto";
@@ -13,7 +13,7 @@ const getCookie = (name: string) => {
 };

 const setCookie = (name: string, value: string) => {
-    document.cookie = `${name}=${encodeURIComponent(value)}; Path=/; Max-Age=31536000; SameSite=Lax; Domain=specnext.dev`;
+    document.cookie = `${name}=${encodeURIComponent(value)}; Path=/; Max-Age=31536000; SameSite=Lax`;
 };

 const prefersDark = () =>
@@ -62,12 +62,12 @@ export default function ThemeDropdown() {

    const isActive = (t: Theme) => theme === t;
    const ToggleIcon = !mounted
-        ? Icon.CircleHalf
+        ? CircleHalf
        : theme === "dark"
-            ? Icon.MoonStarsFill
+            ? MoonStarsFill
            : theme === "light"
-                ? Icon.SunFill
-                : Icon.CircleHalf;
+                ? SunFill
+                : CircleHalf;

    return (
        <Nav className="ms-md-auto">
@@ -78,19 +78,19 @@ export default function ThemeDropdown() {
                </Dropdown.Toggle>
                <Dropdown.Menu aria-labelledby="bd-theme-text">
                    <Dropdown.Item as="button" className="d-flex align-items-center" active={isActive("light")} onClick={() => choose("light")}>
-                        <Icon.SunFill />
+                        <SunFill />
                        <span className="ms-2">Light</span>
-                        {isActive("light") && <Icon.Check2 className="ms-auto" aria-hidden="true" />}
+                        {isActive("light") && <Check2 className="ms-auto" aria-hidden="true" />}
                    </Dropdown.Item>
                    <Dropdown.Item as="button" className="d-flex align-items-center" active={isActive("dark")} onClick={() => choose("dark")}>
-                        <Icon.MoonStarsFill />
+                        <MoonStarsFill />
                        <span className="ms-2">Dark</span>
-                        {isActive("dark") && <Icon.Check2 className="ms-auto" aria-hidden="true" />}
+                        {isActive("dark") && <Check2 className="ms-auto" aria-hidden="true" />}
                    </Dropdown.Item>
                    <Dropdown.Item as="button" className="d-flex align-items-center" active={isActive("auto")} onClick={() => choose("auto")}>
-                        <Icon.CircleHalf />
+                        <CircleHalf />
                        <span className="ms-2">Auto</span>
-                        {isActive("auto") && <Icon.Check2 className="ms-auto" aria-hidden="true" />}
+                        {isActive("auto") && <Check2 className="ms-auto" aria-hidden="true" />}
                    </Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
--- a/src/hooks/useSearchFetch.ts
+++ b/src/hooks/useSearchFetch.ts
@@ -1,13 +1,7 @@
 "use client";

 import { useCallback, useRef, useState } from "react";
-
-type Paged<T> = {
-  items: T[];
-  page: number;
-  pageSize: number;
-  total: number;
-};
+import type { PagedResult } from "@/types/zxdb";

 /**
 * Manages API search fetching with automatic request cancellation
@@ -19,14 +13,16 @@ type Paged<T> = {
 */
 export default function useSearchFetch<T>(
  endpoint: string,
-  initialData: Paged<T> | null = null,
+  initialData: PagedResult<T> | null = null,
  onExtra?: (json: Record<string, unknown>) => void,
 ) {
-  const [data, setData] = useState<Paged<T> | null>(initialData);
+  const [data, setData] = useState<PagedResult<T> | null>(initialData);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const abortRef = useRef<AbortController | null>(null);
  const fetchIdRef = useRef(0);
+  const onExtraRef = useRef(onExtra);
+  onExtraRef.current = onExtra;

  const fetch_ = useCallback(
    async (params: URLSearchParams) => {
@@ -55,7 +51,7 @@ export default function useSearchFetch<T>(
            pageSize: json.pageSize,
            total: json.total,
          });
-          onExtra?.(json);
+          onExtraRef.current?.(json);
        }
      } catch (e: unknown) {
        if (e instanceof DOMException && e.name === "AbortError") return;
@@ -71,11 +67,11 @@ export default function useSearchFetch<T>(
        }
      }
    },
-    [endpoint, onExtra],
+    [endpoint],
  );

  // Allow syncing SSR data without a fetch
-  const syncData = useCallback((d: Paged<T>) => {
+  const syncData = useCallback((d: PagedResult<T>) => {
    abortRef.current?.abort();
    setData(d);
    setLoading(false);
--- a/src/middleware.js
+++ b/src/middleware.js
@@ -1,12 +0,0 @@
-import { NextResponse } from 'next/server'
-
-export function middleware(request) {
-    const { method, nextUrl } = request
-
-    // Filter out internal Next.js assets if desired
-    if (!nextUrl.pathname.startsWith('/_next')) {
-        console.log(`${method} ${nextUrl.pathname}`)
-    }
-
-    return NextResponse.next()
-}
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -0,0 +1,11 @@
+import { NextResponse, NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  if (process.env.NODE_ENV === 'development') {
+    const { method, nextUrl } = request;
+    if (!nextUrl.pathname.startsWith('/_next')) {
+      console.log(`${method} ${nextUrl.pathname}`);
+    }
+  }
+  return NextResponse.next();
+}
--- a/src/server/repo/index.ts
+++ b/src/server/repo/index.ts
@@ -0,0 +1,3 @@
+// Barrel re-export — enables import from "@/server/repo" and
+// sets up for incremental per-domain splitting.
+export * from "./zxdb";
--- a/src/services/register.service.ts
+++ b/src/services/register.service.ts
@@ -1,20 +1,15 @@
-
+import { cache } from 'react';
 import { promises as fs } from 'fs';
 import path from 'path';
-import { Register } from '@/utils/register_parser';
-import { parseNextReg } from '@/utils/register_parser';
-
-let registers: Register[] = [];
+import { Register, parseNextReg } from '@/utils/register_parser';

 /**
- * Gets the registers from the in-memory cache, or loads them from the file if not already loaded.
- * @returns A promise that resolves to an array of Register objects.
+ * Gets all registers, with request-level deduplication via React cache().
+ * Multiple calls within the same server request (e.g. generateMetadata + page)
+ * share a single parse result.
 */
-export async function getRegisters(): Promise<Register[]> {
-  // if (registers.length === 0) {
+export const getRegisters = cache(async (): Promise<Register[]> => {
  const filePath = path.join(process.cwd(), 'data', 'nextreg.txt');
  const fileContent = await fs.readFile(filePath, 'utf8');
-    registers = await parseNextReg(fileContent);
-  // }
-  return registers;
-}
+  return parseNextReg(fileContent);
+});
--- a/src/types/zxdb.ts
+++ b/src/types/zxdb.ts
@@ -0,0 +1,25 @@
+/** Paginated API response wrapper */
+export type PagedResult<T> = {
+  items: T[];
+  page: number;
+  pageSize: number;
+  total: number;
+};
+
+/** Facet item returned by search APIs */
+export type FacetItem<T = number> = {
+  id: T;
+  name: string;
+  count: number;
+};
+
+/** Entry search facets */
+export type EntryFacets = {
+  genres: FacetItem<number>[];
+  languages: FacetItem<string>[];
+  machinetypes: FacetItem<number>[];
+  flags: { hasAliases: number; hasOrigins: number };
+};
+
+/** Entry search scope */
+export type EntrySearchScope = "title" | "title_aliases" | "title_aliases_origins";
--- a/src/utils/params.ts
+++ b/src/utils/params.ts
@@ -0,0 +1,29 @@
+/**
+ * Parse a comma-separated string of positive integer IDs.
+ * Accepts either a plain string or a string[] (from searchParams).
+ */
+export function parseIdList(value: string | string[] | undefined): number[] | undefined {
+  if (!value) return undefined;
+  const raw = Array.isArray(value) ? value.join(",") : value;
+  const ids = raw
+    .split(",")
+    .map((id) => Number(id.trim()))
+    .filter((id) => Number.isFinite(id) && id > 0);
+  return ids.length ? ids : undefined;
+}
+
+/** Default machine type IDs for entry/release searches */
+export const preferredMachineIds = [27, 26, 8, 9];
+
+/**
+ * Parse machine type IDs from a comma-separated string,
+ * falling back to preferredMachineIds when empty.
+ */
+export function parseMachineIds(value?: string): number[] {
+  if (!value) return preferredMachineIds.slice();
+  const ids = value
+    .split(",")
+    .map((id) => Number(id.trim()))
+    .filter((id) => Number.isFinite(id) && id > 0);
+  return ids.length ? ids : preferredMachineIds.slice();
+}
--- a/src/utils/register_helpers.ts
+++ b/src/utils/register_helpers.ts
@@ -0,0 +1,93 @@
+type RegisterLike = {
+  description: string;
+  text: string;
+  modes: { text: string }[];
+};
+
+/** Returns true if a line contains useful register info (not bitfield/access markers) */
+export function isInfoLine(line: string): boolean {
+  return (
+    line.length > 0 &&
+    !line.startsWith("//") &&
+    !line.startsWith("(R") &&
+    !line.startsWith("(W") &&
+    !line.startsWith("(R/W") &&
+    !line.startsWith("*") &&
+    !/^bits?\s+\d/i.test(line)
+  );
+}
+
+/** Build a single-line summary string for metadata descriptions */
+export function buildRegisterSummary(register: RegisterLike): string {
+  const trimLine = (line: string) => line.trim();
+
+  const modeLines = register.modes
+    .flatMap((mode) => mode.text.split("\n"))
+    .map(trimLine)
+    .filter(isInfoLine);
+  const textLines = register.text.split("\n").map(trimLine).filter(isInfoLine);
+  const descriptionLines = register.description.split("\n").map(trimLine).filter(isInfoLine);
+
+  const rawSummary = [...textLines, ...modeLines, ...descriptionLines]
+    .join(" ")
+    .replace(/\s+/g, " ")
+    .trim();
+
+  if (!rawSummary) return "Spectrum Next register details and bit-level behavior.";
+  if (rawSummary.length <= 180) return rawSummary;
+  return `${rawSummary.slice(0, 177).trimEnd()}...`;
+}
+
+/** Build deduplicated summary lines for OG image rendering */
+export function buildRegisterSummaryLines(register: RegisterLike): string[] {
+  const normalizeLines = (raw: string) => {
+    const lines: string[] = [];
+    const rawLines = raw.split("\n");
+    for (const rawLine of rawLines) {
+      const trimmed = rawLine.trim();
+      if (!trimmed) {
+        if (lines.length > 0 && lines[lines.length - 1] !== "") {
+          lines.push("");
+        }
+        continue;
+      }
+      if (isInfoLine(trimmed)) {
+        lines.push(trimmed);
+      }
+    }
+    return lines;
+  };
+
+  const textLines = normalizeLines(register.text);
+  const modeLines = register.modes.flatMap((mode) => normalizeLines(mode.text));
+  const descriptionLines = normalizeLines(register.description);
+
+  const combined: string[] = [];
+  const appendBlock = (block: string[]) => {
+    if (block.length === 0) return;
+    if (combined.length > 0 && combined[combined.length - 1] !== "") {
+      combined.push("");
+    }
+    combined.push(...block);
+  };
+
+  appendBlock(textLines);
+  appendBlock(modeLines);
+  appendBlock(descriptionLines);
+
+  const deduped: string[] = [];
+  const seen = new Set<string>();
+  for (const line of combined) {
+    if (!line) {
+      if (deduped.length > 0 && deduped[deduped.length - 1] !== "") {
+        deduped.push("");
+      }
+      continue;
+    }
+    if (seen.has(line)) continue;
+    seen.add(line);
+    deduped.push(line);
+  }
+
+  return deduped.length > 0 ? deduped : ["Spectrum Next register details and bit-level behavior."];
+}
--- a/src/utils/register_parser.ts
+++ b/src/utils/register_parser.ts
@@ -1,5 +1,6 @@
 import { parseDescriptionDefault } from "./register_parsers/reg_default";
 import { parseDescriptionF0 } from "./register_parsers/reg_f0";
+import { parseDescription44 } from "./register_parsers/reg_44";

 export interface RegisterBitwiseOperation {
  bits: string;
@@ -41,12 +42,43 @@ export interface Register {
  notes: Note[];
 }

+/**
+ * Detects a source line marking the whole register as restricted to certain
+ * board issues, e.g. "Issue 4 Only" or "Issues 4 and 5 Only". Matched loosely
+ * across wording so upstream rewording (the tbblue source has used both forms)
+ * keeps setting the flag rather than silently dropping the badge.
+ *
+ * Case-sensitive on purpose: register-level markers are capitalised, while an
+ * incidental per-bit caveat like "(issue 5 only)" (e.g. nextreg 0x81 bit 3) is
+ * lowercase and must not flag the entire register.
+ */
+export function isIssueRestricted(line: string): boolean {
+  return /Issues?\b.*\bOnly/.test(line);
+}
+
+/**
+ * True when a parsed RegisterDetail carries something worth rendering — a mode
+ * name, an access block, or mode-level text. Body-less registers (e.g. the
+ * "Reserved" entries 0xC7/0xCB/0xCF/0xFF) would otherwise contribute an empty
+ * mode that renders as a stray, contentless tab strip. Parsers call this before
+ * pushing a detail into reg.modes.
+ */
+export function detailHasContent(detail: RegisterDetail): boolean {
+  return Boolean(
+    detail.modeName ||
+    detail.read ||
+    detail.write ||
+    detail.common ||
+    (detail.text && detail.text.trim())
+  );
+}
+
 /**
 * Parses the content of the nextreg.txt file and returns an array of register objects.
 * @param fileContent The content of the nextreg.txt file.
 * @returns A promise that resolves to an array of Register objects.
 */
-export async function parseNextReg(fileContent: string): Promise<Register[]> {
+export function parseNextReg(fileContent: string): Register[] {
  const registers: Register[] = [];
  const paragraphs = fileContent.split(/\n\s*\n/);

@@ -64,6 +96,13 @@ export function processRegisterBlock(paragraph: string, registers: Register[]) {
  const lines = paragraph.trim().split('\n');
  const firstLine = lines[0];

+  // Skip commented-out register blocks. The header regex below is not anchored,
+  // so a disabled entry like "// 0xA3 (163) => ..." would otherwise match and
+  // leak a phantom register into the output.
+  if (firstLine.trim().startsWith('//')) {
+    return;
+  }
+
  const registerMatch = firstLine.match(/([0-9a-fA-F,x]+)\s*\((.*?)\)\s*=>\s*(.*)/);

  if (!registerMatch) {
@@ -134,6 +173,9 @@ export function processRegisterBlock(paragraph: string, registers: Register[]) {
      case '0xF0':
        parseDescriptionF0(reg, description);
        break;
+      case '0x44':
+        parseDescription44(reg, description);
+        break;
      default:
        parseDescriptionDefault(reg, description);
        break;
--- a/src/utils/register_parsers/reg_44.ts
+++ b/src/utils/register_parsers/reg_44.ts
@@ -0,0 +1,91 @@
+// Special-case parser for 0x44 (Palette Value, 9 bit colour).
+// The 9-bit colour is written with two consecutive byte writes, each carrying
+// its own bit layout. The source nests these under "1st write:" / "2nd write:"
+// headers (two leading spaces, trailing colon) with their bit definitions
+// indented beneath (four leading spaces):
+//
+//   (R/W)
+//     Two consecutive writes are needed to write the 9 bit colour
+//     1st write:
+//       bits 7:0 = RRRGGGBB
+//     2nd write:
+//       bits 7:1 = Reserved, must be 0
+//       ...
+//
+// Each write becomes its own mode with a single Read/Write access block so the
+// two distinct bit layouts render as separate tables. Two-space prose outside a
+// write header is register-level commentary; six-space lines continue the
+// preceding bit definition.
+import { Register, RegisterAccess, RegisterDetail, isIssueRestricted } from "@/utils/register_parser";
+
+export const parseDescription44 = (reg: Register, description: string) => {
+  const descriptionLines = description.split('\n');
+  reg.modes = reg.modes || [];
+
+  let currentDetail: RegisterDetail | null = null;
+  let currentAccess: RegisterAccess | null = null;
+
+  const finishDetail = () => {
+    if (currentDetail && currentAccess) {
+      currentDetail.common = currentAccess;
+      reg.modes.push(currentDetail);
+    }
+    currentDetail = null;
+    currentAccess = null;
+  };
+
+  for (const line of descriptionLines) {
+    reg.source.push(line);
+    reg.search += line.toLowerCase() + " ";
+
+    const trimmedLine = line.trim();
+    if (!trimmedLine) continue;
+    if (trimmedLine.startsWith('//')) continue;
+    if (isIssueRestricted(line)) reg.issue_4_only = true;
+
+    const spaces_at_start = line.match(/^(\s*)/)?.[0].length || 0;
+
+    // The lone "(R/W)" marker just confirms the access type; both writes are R/W.
+    if (trimmedLine.startsWith('(R/W')) continue;
+
+    // A write header: "1st write:", "2nd write:", etc. starts a new mode.
+    if (spaces_at_start <= 2 && /^\d+(st|nd|rd|th)\s+write:?$/i.test(trimmedLine)) {
+      finishDetail();
+      currentDetail = { read: undefined, write: undefined, common: undefined, text: '' };
+      currentDetail.modeName = trimmedLine.replace(/:$/, '');
+      currentAccess = { operations: [], notes: [] };
+      continue;
+    }
+
+    const bitMatch = trimmedLine.match(/^(bits?|bit)\s+([\d:-]+)\s*=\s*(.*)/);
+
+    // Bit definitions live under a write header at deeper indentation.
+    if (currentAccess && spaces_at_start >= 4 && bitMatch) {
+      currentAccess.operations.push({
+        bits: bitMatch[2],
+        description: bitMatch[3].trim(),
+      });
+      continue;
+    }
+
+    // Six-space (or deeper) prose continues the previous bit definition.
+    if (currentAccess && spaces_at_start >= 6 && currentAccess.operations.length > 0) {
+      const ops = currentAccess.operations;
+      ops[ops.length - 1].description += `\n${trimmedLine}`;
+      continue;
+    }
+
+    // Four-space prose inside a write block is access-level description.
+    if (currentAccess && spaces_at_start >= 4) {
+      currentAccess.description = currentAccess.description
+        ? `${currentAccess.description}\n${trimmedLine}`
+        : trimmedLine;
+      continue;
+    }
+
+    // Anything shallower (two-space prose outside a write block) is register commentary.
+    reg.text += `${trimmedLine}\n`;
+  }
+
+  finishDetail();
+};
--- a/src/utils/register_parsers/reg_default.ts
+++ b/src/utils/register_parsers/reg_default.ts
@@ -1,5 +1,9 @@
-import {Register, RegisterAccess, RegisterDetail, Note} from "@/utils/register_parser";
+import {Register, RegisterAccess, RegisterDetail, Note, detailHasContent, isIssueRestricted} from "@/utils/register_parser";

+// Default parser for the common register format: optional (R) / (W) / (R/W)
+// access blocks, each holding "bit(s) N = description" rows, with footnotes
+// (*, **, ...) that may span multiple indented lines, plus free prose. Produces
+// a single RegisterDetail (mode) per register.
 export const parseDescriptionDefault = (reg: Register, description: string) => {
    const descriptionLines = description.split('\n');
    let currentAccess: 'read' | 'write' | 'common' | null = null;
@@ -10,13 +14,11 @@ export const parseDescriptionDefault = (reg: Register, description: string) => {
    // Footnote multiline state
    let inFootnote = false;
    let footnoteBaseIndent = 0;
-    // let footnoteTarget: 'global' | 'access' | null = null;
    let currentFootnote: Note | null = null;

    const endFootnoteIfActive = () => {
        inFootnote = false;
        footnoteBaseIndent = 0;
-        // footnoteTarget = null;
        currentFootnote = null;
    };

@@ -30,7 +32,7 @@ export const parseDescriptionDefault = (reg: Register, description: string) => {
        reg.search += line.toLowerCase() + " ";
        const spaces_at_start = line.match(/^(\s*)/)?.[0].length || 0;

-        if (line.includes('Issue 4 Only')) reg.issue_4_only = true;
+        if (isIssueRestricted(line)) reg.issue_4_only = true;

        // Handle multiline footnote continuation
        if (inFootnote) {
@@ -73,7 +75,8 @@ export const parseDescriptionDefault = (reg: Register, description: string) => {
            currentAccess = 'common';
            continue;
        }
-        // New top-level text block (no leading spaces)
+        // A line with no leading whitespace (line === its own trimmed form)
+        // starts a new top-level text block, so close any open access block.
        if (line.startsWith(trimmedLine)) {
            if (currentAccess) {
                detail[currentAccess] = accessData;
@@ -89,10 +92,8 @@ export const parseDescriptionDefault = (reg: Register, description: string) => {
                const note: Note = { ref: noteMatch[1], text: noteMatch[2] };
                if (currentAccess) {
                    accessData.notes.push(note);
-                    // footnoteTarget = 'access';
                } else {
                    reg.notes.push(note);
-                    // footnoteTarget = 'global';
                }
                currentFootnote = note;
                inFootnote = true;
@@ -103,7 +104,6 @@ export const parseDescriptionDefault = (reg: Register, description: string) => {

        if (currentAccess) {
            const bitMatch = trimmedLine.match(/^(bits?|bit)\s+([\d:-]+)\s*=\s*(.*)/);
-            // const valueMatch = !line.match(/^\s+/) && trimmedLine.match(/^([01\s]+)\s*=\s*(.*)/);

            if (bitMatch) {
                let bitDescription = bitMatch[3];
@@ -118,13 +118,9 @@ export const parseDescriptionDefault = (reg: Register, description: string) => {
                    description: bitDescription,
                    footnoteRef: footnoteRef,
                });
-            // } else if (valueMatch) {
-            //     console.error("VALUE MATCH",valueMatch);
-            //     accessData.operations.push({
-            //         bits: valueMatch[1].trim().replace(/\s/g, ''),
-            //         description: valueMatch[2].trim(),
-            //     });
            } else if (trimmedLine) {
+                // Prose indented exactly two spaces inside an access block is
+                // register-level commentary rather than part of the bit table.
                if(spaces_at_start == 2) {
                    reg.text += `${line}\n`;
                    continue;
@@ -151,7 +147,10 @@ export const parseDescriptionDefault = (reg: Register, description: string) => {
    if (currentAccess) {
        detail[currentAccess] = accessData;
    }
-    // Push the parsed detail into modes
+    // Push the parsed detail into modes, unless it is empty — body-less
+    // registers (e.g. the "Reserved" entries) would otherwise add a blank mode.
    reg.modes = reg.modes || [];
+    if (detailHasContent(detail)) {
        reg.modes.push(detail);
+    }
 };
--- a/src/utils/register_parsers/reg_f0.ts
+++ b/src/utils/register_parsers/reg_f0.ts
@@ -5,7 +5,7 @@
 // - Lines with three or more leading spaces (>=3) belong to the current mode.
 // - A line with exactly two spaces followed by '*' is a parent (register-level) note, not a mode note.
 // - Inside access blocks for F0, lines starting with '*' are headings for description (not notes).
-import { Register, RegisterAccess, RegisterDetail } from "@/utils/register_parser";
+import { Register, RegisterAccess, RegisterDetail, detailHasContent, isIssueRestricted } from "@/utils/register_parser";

 export const parseDescriptionF0 = (reg: Register, description: string) => {
  const descriptionLines = description.split('\n');
@@ -37,7 +37,10 @@ export const parseDescriptionF0 = (reg: Register, description: string) => {
          // finalize previous access block into detail
          detail[currentAccess] = accessData;
        }
+        // Skip the initial blank detail that precedes the first mode header.
+        if (detailHasContent(detail)) {
          reg.modes.push(detail);
+        }
        detail = {read: undefined, write: undefined, common: undefined, text: ''};
        detail.modeName = trimmedLine;

@@ -47,7 +50,7 @@ export const parseDescriptionF0 = (reg: Register, description: string) => {
      }
    }

-    if (line.includes('Issue 4 Only')) reg.issue_4_only = true;
+    if (isIssueRestricted(line)) reg.issue_4_only = true;


    if (trimmedLine.startsWith('//')) continue;
@@ -110,20 +113,17 @@ export const parseDescriptionF0 = (reg: Register, description: string) => {
        }
      }
    } else if (trimmedLine) {
-      if (line.match(/^\s+/) && accessData.operations.length > 0) {
-        accessData.operations[accessData.operations.length - 1].description += `\n${line}`;
-      } else {
-        if (!accessData.description) {
-          accessData.description = '';
-        }
-        accessData.description += `\n${trimmedLine}`;
-      }
+      // Prose outside any access block (the leading "R/W Issues 4 and 5 Only -
+      // (soft reset = 0x80)" line) is register-level commentary.
+      reg.text += `${trimmedLine}\n`;
    }
  }
  if (currentAccess) {
    detail[currentAccess] = accessData;
  }

-  // Push the parsed detail into modes
+  // Push the final mode's detail into modes (if it carries content).
+  if (detailHasContent(detail)) {
    reg.modes.push(detail);
+  }
 };
--- a/src/utils/serialize.ts
+++ b/src/utils/serialize.ts
@@ -0,0 +1,8 @@
+/**
+ * Deep-clone a value through JSON round-trip.
+ * Strips non-serializable properties (e.g. Drizzle decimal wrappers)
+ * so the result is safe to pass from Server Components to Client Components.
+ */
+export function serialize<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value));
+}