`.yolo-task.md`

88 lines
# 4Square YOLO — keep refining features

You are working in `~/Projects/4square-agentabrams`. The app is live at
https://4square.agentabrams.com (admin/DWShowroom2026), backed by pm2 process
`4square-agentabrams` on port 9702 (local) and Kamatera (proxied via nginx).

## Current state
- Left rail: 104 of Steve's live domains from CNCP, in headliner order then
  alphabetical. 20 of them are wired into `/api/site-products` proxy
  (TSD catalog + 19 DW microsites).
- Right panel: search input + dense product grid (120 items/load).
- Moodboard: 4-square design board at the bottom, drag from grid to slot,
  slot↔slot swap, localStorage persistence. All verified end-to-end.
- Resizable left/main splitter, mobile stacks vertically, collapsible
  moodboard.

## Priorities (do in this order, ship each one independently)

1. **Wire MORE sites — coverage.** Probe the remaining ~84 unwired domains
   in `public/data/sites.json` for any product endpoint. Try in order:
     - `/api/products` (already done — those are already wired)
     - `/products.json` (Shopify storefront default)
     - `/collections/all/products.json` (Shopify Section API)
     - `/api/items`
     - `/api/catalog`
     - JSON-LD `<script type="application/ld+json">` embedded on the
       homepage (parse + extract Product schemas)
   Run probes in parallel (Promise.all batches of 10). For each domain
   that returns valid JSON with at least one item carrying an image URL,
   add it to `wiredSites` map in `server.js` AND add a `source` block in
   `public/data/sites.json`. Don't break the existing 20 wired sites.

2. **Export the moodboard as a PNG.** Add an "Export PNG" button next to
   "Reset moodboard" in the header. Implementation: an offscreen 2048x2048
   canvas, draw the 4 slots in a 2x2 grid with 32px padding + slot label
   text overlay (Steve's site name + tile title). Save via
   `canvas.toBlob` + `<a download>`. Skip slots that are empty.
   Watermark "4Square · Agent Abrams" bottom-right small.

3. **Shareable URL.** Encode the 4-slot layout as a compact URL hash
   so Steve can send a moodboard link to a client. Hash format:
   `#l=BASE64-encoded-JSON(layout)`. On page load, if `location.hash`
   starts with `#l=`, decode and seed `layout` BEFORE rendering. Add a
   "Share Link" button that copies the current URL+hash to clipboard
   and flashes "copied ✓".

4. **Infinite scroll** on the right panel. Replace the single 120-item
   load with IntersectionObserver-based pagination. Track `offset` per
   site. Append, don't replace.

5. **Per-site sort options** for sites whose backend supports sort
   params (most DW microsites accept `?sort=newest|price-asc|price-desc`).
   Add a small Sort `<select>` next to the search bar — visible only
   when the active site supports it (detect via probing `?sort=newest`
   returns different first-item id than `?sort=price-asc`).

6. **Swap slot image without clearing first.** When user drags a tile
   onto a FILLED slot, instead of swapping with another slot, REPLACE
   the slot's contents with the dragged tile. (Slot↔slot drags stay
   swap.) Update the dnd handler to differentiate `kind: 'tile'` (replace)
   vs `kind: 'slot'` (swap). Already partially in place — verify it works
   and add a tiny "replaced" toast.

7. **Slot grid layout options.** Add a small selector "Layout:" with
   options 2x2 (default), 3x3 (9 slots), 1x4 (linear row), 4x1 (linear
   column). Layout choice persists in localStorage. Storage key bumps
   to `…layout.v2` to avoid stomping the v1 4-slot data.

## Ground rules

- Each priority is its own commit. Each commit gets its own deploy via
  `bash ~/Projects/_shared/scripts/deploy.sh`. Verify with a curl smoke
  test against https://4square.agentabrams.com after each deploy.
- Use the same `admin/DWShowroom2026` credentials in curl tests.
- Don't touch `~/Projects/thesetdecorator/` — it's a different project.
- Don't modify DNS records, don't touch Cloudflare, don't send mail,
  don't run pm2 `save` (that already happened).
- After each feature lands, append a one-line entry to `.yolo-log.md`
  in the project root: `[<ISO timestamp>] <commit-sha> <feature>`.
- If you hit a blocker that needs Steve's input, write it to
  `.yolo-blocked.md` and move to the next priority — don't loop on
  the same problem.
- Keep diffs small. Don't reformat unrelated files.
- Run `pm2 restart 4square-agentabrams` locally after each Edit so the
  Mac2 dev server reflects changes for verification.

Start with priority #1 (wire more sites). Go.