[plainprogrammer]

Summary

Implements spec 004 Design System, Accounts, Adding Cards and the Collection Grid (v2.1.3) per its plan and data model.

• Design system installed. Tokens, c-* components, self-hosted fonts, logos, docs and previews from the Collector design-system export are in app/assets/stylesheets/collector/, app/assets/fonts/collector/, app/assets/images/collector/ and docs/design-system/, plus the collector-design-system Claude Code skill and the CLAUDE.md UI section.
  • App-specific patterns live in collector/additions.css, so a future re-export can replace the export's files wholesale.
  • Each app pattern has a doc in docs/design-system/components/ (16 new: StatusMessage, Form, AuthPage, TileAdd, FinishBadge, …).
• App shell. On desktop the header has Collection and Search, plus an avatar menu. On phones a tab bar shows Collection, Search and More. Detail pages (the card page, and the lot add/edit/remove pages) use a back link. The theme follows the OS, and the logo swaps in dark mode.
• Accounts and access.
  • Users, accounts (one each) and sessions are hand-written in the Rails 8 authentication pattern, with bcrypt and no mailer.
  • Every page requires sign-in except sign-in, sign-up and /up.
  • Sign-in is rate-limited per email + client address (COLLECTOR_TRUSTED_PROXIES). The session cookie is secure over HTTPS (COLLECTOR_HTTPS).
• First run and administration.
  • On an empty instance the first visitor becomes admin. After that, sign-up is closed by default and admins can open it.
  • Admins manage users: add, edit, reset passwords, and delete with a confirmation page. The last admin can't be demoted.
  • bin/rails "collector:user[email]" creates an admin or resets a password.
  • The README warns operators to secure an instance before exposing or upgrading it.
• Collection model.
  • Lot (core, tenant-scoped by account_id) merges copies with the same printing, finish, condition and price paid. A unique lot_key index enforces this, and a lot holds at most 9,999 copies.
  • The finish and condition vocabulary comes from MTG::Collecting through a Catalog.collecting registry, so the core stays collectible-agnostic.
  • Price paid is stored in minor units. The currency comes from COLLECTOR_CURRENCY (default USD), and an unknown code fails boot.
• Search. Results are grouped as tiles showing owned counts, with printings you don't own faded. Quick Add updates the page in place through a Turbo morph refresh, with no reload and the scroll position kept. It works without JavaScript through a 303 redirect. All 002 search behaviours are kept except the ones AC-6.5 supersedes.
• Card page (ItemPage).
  • Details, Owned, Your copies (edit and remove each lot), Printings (Shown and Retired tags, quick add) and a paper-format legality list.
  • Mana costs use Collector's own pips with spoken labels.
  • Add a copy takes quantity, finish, condition and price.
• Collection grid. One tile per printing, with the total quantity and a single finish badge. It filters by name in place and shows "N of M items". It's paginated at 120 and shows empty states.

Screenshots

Captured from a development server against the full English Scryfall catalog (106,636 printings) and a seeded collection, using headless Firefox. Phone shots are 390px: they're rendered in a fixed-width frame because headless Firefox won't open a window narrower than 500px.

Collection grid	Collection filtered ("bolt")

Search: owned counts, faded unowned, quick add	After quick add: in-place status

Card page (desktop)	Card page (dark)

Phone: collection	Phone: search	Phone: card page	Phone: More

Add a copy	Users and sign-up	Sign in	Collection (dark)

Verification

• bin/ci passed (it's the pre-push hook): RuboCop, Brakeman (0 warnings), bundler-audit, importmap audit, and RSpec with 329 examples, 0 failures. The system specs were stable over repeated runs.
• The spec-alignment review (SDD Mode B, 3 rounds) ended SPEC-ALIGNED, with no unresolved acceptance criteria.
• Migrations roll back and re-apply cleanly against a 002 database, and schema.rb is unchanged afterwards. zeitwerk:check passes, and production boots with USD; COLLECTOR_CURRENCY=XYZ fails boot as intended.
• Manual walkthrough at 1280px and 390px, light and dark, against the design-system previews. It found and fixed four issues (commits 073bb82, 04e6682, 09b5e9c, 395ed95):
  • a shared face image shown twice
  • stylized English printed_name on tiles
  • set · number wrapping on phones
  • no spacing above forms
• Performance (the NFR): with 5,000 lots and the full catalog, in development mode, /collection took 54–106 ms, and search took 177–255 ms warm (425 ms cold).
• collector:user was checked against a real database: after it created the first admin, the first-run redirect stopped.

Notes for review

• Upgrading existing instances: an upgraded instance has no users, and the first visitor becomes admin. The README's "Before you expose Collector" and upgrade notes cover this.
• Spec changes during execution (v2.1.0 → v2.1.3) are recorded in the spec changelog, and controller rulings are in the commit bodies (Ruling: lines).
• Known follow-ups (not in scope):
  • Bulk and table views, and export/import.
  • Focus rings and touch targets were checked only by eye.
• Added after review:
  • 19ea114: a shared card image, or the placeholder when there's no image, names every face it covers.
  • 1869546: the Claude pre-commit RuboCop hook now also lints files staged by git add in the same command, and tracked changes for commit -a.

🤖 Generated with Claude Code