feat(playground): the stack-and-heap lens draws traces in 2D and 3D

[mnaimfaizy]

PR 7 of the ADR 0004 build plan. The Playground runs tracer v2 and draws its traces with the shared stack-and-heap views, in 2D and 3D, in the dark palette.

Changes

• Tracer v2 is wired in. The sandbox runs instrumented code with the tracer runtime and reports a trace. The step limit ends the run with one Console note and keeps the steps so far. TypeScript lines are mapped back to the learner's source. Code the tracer refuses says why there are no steps.
• The old tracer is gone: services/instrumentCode.ts, instrumentation/JsInstrumenter.ts, StateSnapshot.ts and the old types. useTimeline is now useTrace, TimelinePlayer is now StepControls.
• Stack-and-heap lens (lenses/StackHeapLens.tsx, stackHeapLensModel.ts): places the whole trace once, pins the heap floor so nothing jumps, takes focus from the step, marks unreachable objects and never shows a garbage-collection phase. 2D is the default; 3D is lazy and falls back to 2D.
• Limits: 5 frame boxes (global, a "N more frames" placeholder, the top 3) and 9 heap objects. Over 9, unreachable objects are hidden with a note; still over, a "Too large to draw" message with the counts.
• Removed lenses (owner decision): Event Loop (returns with the event loop PR), Data Structures and Streams. Nothing imports React Flow any more, so @xyflow/react is removed with its 19 transitive lockfile entries, its CSS import and its manualChunks rule.
• Python keeps stepping with values only: frames and values, no heap objects.
• Shared: ViewToggle, View3DBoundary and useViewChoice are extracted from the Stack ↔ Heap story section and used by both; Viewer3DToolbar and the 3D hint take an optional theme. The 3D view lists a frame's slots one per line when it holds more than two (the story's largest frame), capped at 6 lines.
• Dark palette: region stroke, floor and plinth brightened; the 3D floor was invisible. Light values are unchanged.
• Layout: the lens pane is the widest by default (30 / 48 / 22), and the step panel hides its top-frame list while a lens draws the step.

Evidence

• Type check, lint, 541 tests in 47 files, the build and npm audit pass; three.js is not in the entry graph.
• Seen at /playground, 1440×900, dark, with code that aliases an array, keeps a closure and drops an object: 2D and 3D both draw the shared array once, the closure's scope with its counter, and the dropped object as unreachable. A recursion 8 deep shows the placeholder frame; a step with 15 objects shows the too-large message.
• Story unchanged: the 3D builder compared every label's markup and position on all 10 beats before and after.

Known limits

• 9 heap objects is small: an array of 14 objects is already too large to draw.
• In 3D, a middle frame with more than two slots stays on one cut line.
• The lens needs about 760×520 for 3D; a smaller pane scrolls.
• Python steps show state before their line runs; a rejected promise shows no line.
• Not checked: reduced motion in the app, Firefox, Safari.

🤖 Generated with Claude Code