Feedback after going through the site and the repo

[Drimdave]

I spent a while with PC Anatomy on the live site and in the repo. I cloned it, and the type check, lint, all 64 tests and the build pass. These are roughly in the order I'd tackle them.

three.js is in the main bundle

ARCHITECTURE.md says the 3D engine is imported lazily so the interface paints first. In the production build, though, the entry chunk is 1.17 MB (327 KB gzipped) and has all of three in it.

It comes from three imports. app/stage-tools.tsx, app/use-explorer.ts and lib/explorer-state.ts pull airflowShown, hasAirflow and AirflowMode from lib/airflow.ts, and that file imports three and BufferGeometryUtils at the top. So three comes along for the ride.

To test it, I moved airflowLevels, hasAirflow, AirflowMode and airflowShown into a separate lib/airflow-policy.ts that only imports from levels.ts, and pointed those three files at it. The entry chunk went down to 178 KB gzipped, about 45% smaller, and three moved into the lazy stage-runtime chunk. A bundle size check in CI would catch it if it creeps back.

Mobile header

At 375px wide, the "Created by Yoseph" pill covers the "Toggle systems" button, which is the only way to open the navigation on a phone.

Touch

A tap uses the open intent in lib/scene.ts, so tapping a part that can be opened takes you straight into it. The detail card is only reachable through contextmenu, and as far as I know iOS Safari doesn't reliably fire that on a long press. I only read the code and didn't try it on an iPhone, so please check. One way around it is to have a tap select the part and show the card, and let the "Take apart" button in the panel do the opening.

Deep links

The URL is always pc-anatomy.com/ because navigation lives in state. If the scale and selection went into the URL (the disassembly amount too, maybe; a hash or query string would do), people could share a link straight to the RTX 5090's SM and the back button would work. Search engines could also find the roughly 300 components that currently sit behind one URL, and you'd see page views per component. Of everything here, this is the one I'd prioritize for the product. When people share something like this, they tend to share a specific part.

First visit

Landing on the site, there's a lot on screen. "Left-click to open, right-click to inspect" only appears in the hover tooltip, and most people never right-click on a website. Even a one-time hint like "Click a part to open it, or press Auto" would make a difference.

Inventory labels

At 100% the parts are laid out nicely, but I couldn't tell what most of them were without hovering. Labels, or a list next to the stage that highlights the matching part, would make that end of the slider much better for learning.

[Yoosseph]

Hey, thanks a lot for this! Really appreciate you actually cloning it and digging through the code, not just clicking around the site.

I went through all of it in #29:

Good catch on the bundle. I had no idea three.js was sneaking into the main chunk through the airflow import. Split it out like you suggested and it’s down from 340 to 192 KB gzipped. Also added a size check to CI so it can’t creep back.
Fixed the header on phones, the byline doesn’t cover the menu button anymore.
Tapping a part now opens its card instead of diving straight in, and you take it apart from there.
Deep links are in! Every scale and part has its own URL now and the back button works. Agree this was the big one.
Added a small hint on the first visit, and the parts get name labels when everything’s laid out at 100%.

Thanks again!