Add a Petdex browser tab to the Codex Pet picker

It works. Search proxy returns petdex’s 30-pet page in <1.5 s, the click-to-pick flow validates the 1536×1872 spritesheet locally before commit, and saving lands a fully-shaped org.simocracy.sim on the user’s ePDS with spriteKind="codexPet", the slim petManifest, and the spritesheet blob. The senate & profile pages render the new otter sprite. After cleanup, every collection on the test PDS goes back to 0 records.

Pass · Browse → pick → save → PDS round-trip

The full smoke-test path landed a real org.simocracy.sim on a fresh certified.one PDS:

{
  "$type":      "org.simocracy.sim",
  "name":       "Petdex Smoke Boba",
  "spriteKind": "codexPet",
  "petManifest": {
    "id":          "boba",
    "displayName": "Boba",
    "description": "A tiny otter sipping bubble tea while keeping you company in Codex."
  },
  "image":    { "$type": "blob", "mimeType": "image/png",  "size":   26103 },
  "petSheet": { "$type": "blob", "mimeType": "image/webp", "size": 1931458 }
}

The simocracy indexer also reflects it within seconds (at://did:plc:chek6tibulc4ujr4mishea5i/org.simocracy.sim/3mlcbbqpzx22u).

Pass · Infinite scroll — cursor pages append cleanly

Initial review caught the grid stopping at 30 pets. Fixed in the polish pass with cursor-driven pagination. Stress test:

cursor=0  → first 30 pets
cursor=30 → fired by IntersectionObserver as the sentinel approaches view
cursor=60 → … rinse repeat through 1,177 pets…
nextCursor=null → sentinel renders “— end of petdex —” and the IO disconnects

Stale-page guard: a requestSeqRef counter increments on every reset (search query change). In-flight pages whose seq doesn’t match the current one are dropped on arrival, so a slow first-page response can’t clobber a fresh search.

Pass · Hover-triggered idle animation

First review noted the cards looked flat. Polish pass adds an idle-loop animation that runs only on hover so the picker doesn’t pre-load 30 × 1.9 MB spritesheets just for browsing:

onMouseEnter → loadPetSheet(proxyUrl) // module-level cache, dedup'd
             → drawPetFrame(canvas, sheet, “idle”, 0)  // first paint asap
             → renderPetAnimated(canvas, url, “idle”)  // rAF loop on durations
onMouseLeave → cleanup() stops rAF + setCanvasReady(false)
             → static <img> fades back to opacity:1 (120 ms)

Verified by sampling canvas.toDataURL().length at 400 ms intervals during hover — lengths oscillate (e.g. 7950 → 7610 → 7950) confirming distinct frames are landing. Subsequent hovers on the same pet are instant because loadPetSheet caches per URL.

Pass · Thumb letterbox bars cropped

Petdex’s thumb pipeline is sharp.resize(80, 80, { fit: “contain”, kernel: “nearest” }) over a 192×208 source cell, which leaves ~3 px of transparent letterbox on each side (sprite is taller than wide). The card now wraps the <img> in overflow: hidden and applies transform: scaleX(80 / 73.8) ≈ scaleX(1.084), pushing the bars off-cell. The hover canvas paints the same 192×208 source cell into the same square shape, so the visual stretch matches frame-for-frame and the swap is a no-op shape-wise.

Pass · Proxy hosts & size limits enforced

Direct curl tests against the running dev server:

# in-allowlist hosts succeed
/api/petdex/proxy?url=https%3A%2F%2Fpetdex.crafter.run%2Fapi%2Fpets%2Fboba%2Fthumb        → 200 image/webp 1978 B
/api/petdex/proxy?url=https%3A%2F%2Fpub-944…r2.dev%2Fcurated%2Fboba%2Fspritesheet.webp → 200 image/webp 1931458 B

# off-allowlist host rejected
/api/petdex/proxy?url=https%3A%2F%2Fexample.com                                          → 400

The 8 MB cap (via Content-Length) plus redirect: "error" means a future malicious petdex deploy can’t turn this into an open egress proxy or a fetch-redirect SSRF.