Direct vehicle manipulation: click-select, drag-to-move, drag-to-rotate

[upgradedev]

Summary

Adds direct manipulation of vehicles on the review-adjust schematic, per the SmartDraw-style reference: click a vehicle to select it, drag to move it, drag a dedicated handle to rotate it. Strictly additive: the existing dropdown/ClockPicker controls are untouched and remain the accessible fallback.

The constrained vocabulary is the whole point of this repo (tests/security/, 46 tests, its own pen-test CI job), so every gesture snaps to, and can only ever write, one of the SceneGraph's existing legal enum values:

• Move -> Movement.approach (N/E/S/W), snapped from the drag vector by angleToApproach.
• Rotate -> Impact.clock_position (1..12), snapped by angleToClock, matching ClockPicker's own angle convention.

Both pure snap functions (frontend/src/lib/manipulate.ts) are total functions: every real-number input, including huge/tiny/non-finite ones, maps to a member of the closed enum. No continuous coordinate is ever written to the scene.

Why a new panel, not a hit-layer on the existing schematic

The SceneGraph has no continuous position field by design (src/claimscene/scene.py) — every geometric position is derived server-side by LayoutEngine, which the browser never runs, and /cases/preview-schematic returns only svg/warnings/contact_point/vehicle_count/road (no per-vehicle coordinates). The schematic is also deliberately rendered through <img src="data:image/svg+xml...">, specifically so a hostile SVG string can never execute script (see SchematicView.tsx's own comment). So VehiclePlacementPanel.tsx draws its own small, self-contained road template and vehicle markers (real <button>s over a decorative aria-hidden SVG, the same pattern ClockPicker already uses) in its own coordinate system, rendered above the untouched, still-authoritative SchematicPreview. This keeps the hardened <img> path completely alone and avoids ever drifting out of sync with the Python physics engine.

Requirement 7 (approval receipt), verified not assumed

src/claimscene/evaluation.py::diff_scenes is a generic, backend-side, per-field comparison that emits fixed rows including movements.{vid}.approach and impacts.{vid}.clock_position — it has no idea how the confirmed scene was edited. Every gesture here calls exactly the same patchMovement/setImpact pure helpers the dropdowns and ClockPicker already use, so the diff captures these edits automatically. Verified with: parity tests asserting a drag and the equivalent keyboard action both call onChange with output that's deep-equal to patchMovement(...)/setImpact(...), plus an e2e test proving a drag on the panel updates the same dropdown that a manual edit would.

Interaction model

• Select: pointerdown on a vehicle marker (click or tap). Escape or a click on empty canvas deselects.
• Move: drag the marker; candidate compass targets highlight live; releases past a 6px threshold commit the nearest of N/E/S/W. Keyboard: arrow keys on the focused marker.
• Rotate: a separate handle appears once selected (never nested inside the marker button — axe's nested-interactive is a serious violation); dragging it snaps through the 12 clock positions with a live readout. Keyboard: [/] or shift+arrow on the marker itself (no need to leave the marker), or plain arrows/[/] once tabbed to the handle; Backspace/Delete clears back to "not struck".
• Touch: touch-action: none on both draggable elements; both are 44x44px targets (verified at 375px).
• AI-proposed vs human-confirmed: dashed ghost marker/handle when the frozen proposedScene differs from the live scene, mirroring the dashed/solid convention SchematicPreview already established.

Bugs found (and fixed) by testing against a real browser

jsdom can't synthesize real click-after-mismatched-pointer-target behavior, so these only surfaced running Playwright against a real browser locally:

1. A real browser fires a synthetic click targeting the nearest common ancestor of the pointerdown/pointerup elements when they differ — which happens here because the marker snaps to its candidate slot mid-drag. That synthetic click was reaching the canvas and immediately undoing a just-completed selection. Fixed with a one-shot suppression flag, consumed by the very next click.
2. That flag could leak past its own gesture if a drag ended without any click ever reaching the canvas (e.g. released outside the panel), silently swallowing the reviewer's next unrelated background click. Fixed by clearing it at the start of every new gesture, with a regression test.

Test plan

• frontend/src/lib/manipulate.test.ts (35 tests): dense table-driven + fuzz tests proving both snap functions are total and always legal, including the round-trip with ClockPicker's own angle convention.
• frontend/src/components/VehiclePlacementPanel.test.tsx (49 tests): selection, deselect (Escape/background click), move via pointer/keyboard (all 4 directions, below-threshold-is-a-click, pointercancel, non-primary-mouse-button ignored, touch pointerType), rotate via pointer/keyboard (drag, brackets, shift+arrow, Backspace clear, pointercancel), keyboard/pointer parity (byte-identical resulting scene), out-of-range-drag-never-illegal (both move and rotate), AI-proposed ghosting, multi-vehicle fan-out, vehicle-removed-while-selected, all 5 road layouts, and the two click-suppression regressions above.
• ReviewStep.test.tsx (+1 test, existing tests unmodified): the panel and the dropdowns read/write the same shared scene.
• journey.spec.ts / a11y.spec.ts / responsive.spec.ts (+4 Playwright tests, existing tests unmodified): full click-select/drag-move/drag-rotate/keyboard journey with dropdown/ClockPicker agreement; zero serious/critical axe violations with a vehicle selected; >=44px tap targets + touch-action: none + no horizontal overflow at 375px.
• npx tsc --noEmit, npx vitest run --coverage (208 tests, 97.76%/90.93%/89.58%/97.76% stmts/branches/funcs/lines, all above the 90/90/85/85 gate), npm run build all clean.
• All 4 new Playwright specs + the pre-existing (unmodified) full journey test + the pre-existing review-step a11y test verified passing individually against a real browser (system Edge, since the sandbox's disk space couldn't fit a fresh Playwright chromium download) — this is how both bugs above were actually caught.

No backend/schema files touched. No em-dashes in user-facing copy.

🤖 Generated with Claude Code