simocracy-v2 · gathering-ftc-layout-parity

Gathering worlds — FtC SF layout parity

A production-build audit of every event/gathering world route confirmed that generic gathering buildings and right-side building sidebars now use the same placement contract as /ftc-sf.

Date: 2026-04-24 · pass · Target: local production build of simocracy-v2@94cf72d

Headline result

4/4

Gathering/event world routes matched

720px

Desktop sidebar width at 1440px viewport

Shared FtC-style building placement path

Layout blockers

Pass. The FtC SF reference, both dynamic event-detail routes, the canonical Senate route, and the Senate event-card route all render an edge-to-edge world canvas and a right sidebar with the same measured geometry. The generic gathering canvas also now draws, collides, clicks, and outlines the building through the same FtC-style placement helper.

Screen recording

The WebM below is the full browser tour captured with agent-browser record. It opens the FtC SF reference, then visits the Events gallery and every gathering/event world route, clicking the building on each generic gathering page to reveal the sidebar.

Runtime measurements

Route	Canvas rect	Building sidebar rect after click	Result
`/ftc-sf` reference	`x=0 y=56 w=1440 h=836`	`x=720 y=56 w=720 h=836`	match
`/events/.../3mk6xwaltgs22` Flourishing Floor Digital Twin Experiment	`x=0 y=56 w=1440 h=836`	`x=720 y=56 w=720 h=836`	match
`/events/.../3miucq2jbzo2s` GainForest Data Council	`x=0 y=56 w=1440 h=836`	`x=720 y=56 w=720 h=836`	match
`/senate`	`x=0 y=56 w=1440 h=836`	`x=720 y=56 w=720 h=836`	match
`/events/.../3mijiollfqs2i` Senate event-card route	`x=0 y=56 w=1440 h=836`	`x=720 y=56 w=720 h=836`	match

Raw measurement notes are saved as assets/layout-audit.json.

Walkthrough screenshots

FtC SF page with the tower on the left and the overview sidebar on the right

01FtC SF reference: tower drawn at the left and overview sidebar occupying the right half.

Events gallery showing four event cards under test

02Events gallery: four relevant routes in scope — Senate event card, FtC SF, Flourishing Floor, and Data Council.

Flourishing Floor event after clicking the building, with the sidebar on the right half

03Flourishing Floor: building click opens the FtC-style right-half sidebar.

GainForest Data Council event after clicking the building, with the sidebar on the right half

04GainForest Data Council: same building placement and sidebar geometry.

Canonical Senate route after clicking the building, with the sidebar on the right half

05Canonical /senate: same GatheringWorld alignment after the wrapper update.

Senate event-detail route after clicking the building, with the sidebar on the right half

06Senate event-card route: the dynamic event detail path also matches.

Findings

Building placement now shares the FtC SF rule

GatheringWorld passes backgroundPlacement="ftc-tower" into useWalkingAvatars. That mode uses the FtC rule: fit the image within 95% of canvas width and 70% of canvas height, place it at x=0, and center it vertically.

Draw, collision, click, and highlight are unified

The same computeBgPlacement output is used for canvas drawing, collision-map generation, the no-collision-map click fallback, and selected-building outline rendering. This avoids the common bug where a building looks aligned but clicks/collisions use stale bounds.

Sidebars match FtC SF geometry

Generic gathering info sidebars now use absolute top-0 right-0 bottom-0 w-full md:w-1/2 with the same glass panel, border, and slide-in treatment used by FtC SF sidebars. At the 1440×900 audit viewport, every tested sidebar measured x=720 y=56 w=720 h=836.

No layout blockers found

The matching criteria passed for every event/gathering world route available from the Events gallery. Project-wide lint still has unrelated pre-existing backlog, but npx tsc --noEmit, npx eslint hooks/useWalkingAvatars.ts, and npm run build all passed for this change.

Reproducing

Build under testgit checkout 94cf72d && npm run build && npm run start Viewportagent-browser set viewport 1440 900 Video commandagent-browser record start assets/layout-parity-tour.webm http://127.0.0.1:3000/ftc-sf, then visit each route and click the building at 180,460. TypeScriptnpx tsc --noEmit passed. Focused lintnpx eslint hooks/useWalkingAvatars.ts passed. Production buildnpm run build passed. Assetsassets/layout-parity-tour.webm, assets/*.png, assets/layout-audit.json