Thermodynamic view: link engine sections to an interactive Brayton and Otto cycle diagram

[PouyanJay]

The models show where the parts are and how they move, but not why the engine produces work. A thermodynamic view links each section of the engine to the point on its cycle diagram where the gas is, so the geometry and the physics are read together.

What is needed

An interactive cycle diagram alongside the 3D view:

• A Brayton cycle (pressure against volume, and temperature against entropy) for the four turbine engines.
• An Otto cycle for the V8 and inline-four, tied to the crank angle of the animation.
• A cycle for the rotary drawn against rotor angle.
• Hovering or selecting a component highlights the matching segment of the diagram, and hovering a segment highlights the component and, for the turbines, the corresponding stretch of the airflow overlay.
• A short explanation for each segment: what changes, what stays roughly constant, and where the useful work comes from.

Success criteria

• Every engine has a diagram with named states and segments, and every segment maps to at least one component id.
• For the piston engines the moving point on the diagram is driven by the same crank angle as the 3D animation, so pausing the mechanism pauses the point.
• Diagram values are labelled as illustrative. The app must not present them as measured data for a real engine, in line with the "About the geometry" note in the help dialog.
• Diagrams are SVG, scale with the panel, and are readable in both the dark and light themes.
• Axes, states and segments have accessible names, and the diagram can be navigated with the keyboard.
• Copy contains no em dashes or en dashes.
• A unit test checks that each engine's cycle data is closed (the last state returns to the first) and that every referenced component id exists.

Suggested approach

• Store cycle data with the catalog: an array of states with normalised pressure, volume, temperature and entropy, plus segments { from, to, kind: 'isentropic' | 'isobaric' | 'isochoric' | 'heat-in' | 'heat-out', parts: PartId[], text }. Normalised values are enough; the goal is shape and correspondence, not numbers.
• Draw the diagram with plain SVG in React. The vendored chart components in components/ui/chart.tsx are built for data series and would fight the curved segments; a hand-written SVG with a small path helper for isentropes will be smaller and clearer.
• Put the diagram in a collapsible panel on the right, below the view tools, and stack it under the console on narrow screens. It should be off by default and remembered per device like the theme is.
• Wire hover both ways through the existing selected state and a new hoverPart state in ViewerState, so the 3D highlight logic does not change.
• For the piston engines, expose the current crank angle from the scene through the existing stats callback so the diagram can place its moving point without a second animation loop.

Out of scope

Real thermodynamic calculations, user-editable parameters, and efficiency numbers.

Touchpoints

lib/engine/engine-data.ts, app/page.tsx, components/engine/engine-scene.tsx, a new diagram component under components/engine/