spb/autoscholar

1# Visual redesign report — AutoScholar.ai (2026-10-30)23Branch `redesign` (worktree `~/Desktop/Cluster/autoscholar-redesign`). Scope: `apps/web` UI only; APIs, auth, server helpers, packages and services untouched.45## Audit findings (before)6See docs/DESIGN_SYSTEM.md §Audit and `tests/e2e/screenshots/redesign/before/` (375/390/430/768/1024/1440, full-page and above-the-fold). Measured: 19 px horizontal overflow at 768 px on all pages; two-row mobile header; results below the fold on `/research` at every phone width; identical stage blocks on `/methodology`; prose-only `/about`.78## What changed9- **Design system**: new tokens (graphite/ivory/stone, oxide accent, cobalt scientific secondary), separate dark theme, fluid type scale, surfaces, controls, chips, badges, skeletons, motion with reduced-motion support, safe-area and `dvh` handling. Fonts: Newsreader + Geist + Geist Mono, self-hosted.10- **Header**: one compact row on every width; accessible drawer (dialog, focus trap, Escape, scroll lock) with search; desktop inline nav + search field; sticky with scroll shadow; `aria-current` on the current page.11- **Homepage**: new hero ("Research you can check, not just read") with an abstract evidence-ledger motif, real counts only (papers from the DB, gate and stage counts from the code), featured paper + latest grid, discipline explorer with live counts, pipeline strip, principles, MacLustr section with a cluster motif, honest empty state.12- **Library**: search + sort row; desktop facet sidebar; mobile filter bottom sheet with active-filter count and removable chips; dense publication rows (ID, date, version, discipline, type, title, excerpt, keywords, PDF/TeX/code/data indicators, status). Plain GET forms (work without JS).13- **Paper page**: PublicationMetadata header on a muted band with the artifacts panel; abstract with drop cap and KaTeX; numbered key findings; methods/results/limitations; "on this page" nav; pdf.js **PaperReader** (page navigation, zoom-to-width, full-screen, download, keyboard paging, loading/error/fallback, version pill); figures as ScientificFigure cards; two-column numbered references; code/data/results panels; **ResearchProvenance** (gates summary, stages, models, digests, gate-by-gate evidence, warnings); CitationPanel; version history and notices; related papers; mobile sticky Read/PDF bar.14- **Supporting pages**: Methodology (intro band, three principles, vertical timeline with progressive disclosure, modes grid, standards list), About (seven numbered editorial sections with in-page nav), Infrastructure (hero + motif, five-layer architecture, MacLustr section), Transparency (numbered hard gates grid, soft-gate chips, corrections/limitations), Topics/Series (card links), legal pages (reading column), 404.15- **Admin**: responsive shell (sidebar on desktop, compact top bar + drawer on mobile), split-screen login, overview with status tiles, active-research progress bars, worker and security panels, horizontally scrollable tables, mobile run cards. No logic or security changes.1617## Verification18- `pnpm --filter @autoscholar/web build` ✓ · `tsc --noEmit` 0 errors · `pnpm exec biome check .` clean.19- Playwright e2e (existing 25 tests, selectors kept): **25/25 passed** against the redesigned build (axe wcag2a/aa on 11 pages: 0 serious/critical; dark mode; keyboard; search/filters/empty state; paper page, PDF route, citations, JSON-LD; feeds/sitemap/robots/headers; all admin security assertions).20- Overflow check (`tests/e2e/shots.mjs`): no horizontal overflow at 375/390/430/768/1024/1440 on home, research, methodology, about, paper, infrastructure (before: +19 px at 768 on every page).21- Lighthouse 12 (Playwright Chromium, mobile emulation, simulated slow 4G):2223| Page | Perf | A11y | Best practices | SEO | LCP | CLS | TBT | FCP |24|---|---|---|---|---|---|---|---|---|25| `/` | 93 | 100 | 96 | 63* | 3.2 s | 0 | 20 ms | 0.9 s |26| `/research` | 92 | 98 | 93 | 66* | 3.4 s | 0 | 10 ms | 0.9 s |27| `/research/[slug]` | 92 | 100 | 96 | 54* | 3.4 s | 0 | 10 ms | 0.9 s |28| `/` desktop preset | 100 | — | — | — | 0.7 s | 0 | 0 ms | — |2930\* SEO fails only `is-crawlable` because the local build runs with `STAGING_MODE=1` (noindex). Mobile LCP is above the 2.5 s target under Lighthouse's throttling because of the serif web font swap (see UI-NOTES.md for options); CLS and TBT/INP targets are met.3132## Screenshots33`tests/e2e/screenshots/redesign/before/` and `.../after/` — `{home,research,methodology,about,paper,infrastructure}-{375,390,430,768,1024,1440}.png` (full page) and `-fold.png` (first screen), plus `admin-{overview,runs,new,maclustr}-{width}.png`.3435## Open issues36- Mobile-simulated LCP (font swap) — see UI-NOTES.md.37- Route-level `loading.tsx` skeletons were removed (they broke 404 status codes); skeleton styles remain for in-page Suspense use.38- No real paper existed locally during the redesign; the staging sample exercises every component, but figure galleries, references and code/data panels should be reviewed once a real paper is published.39