feat(studio): glowing instanced RotarySlider dial (C2)

[ZuluYokohama]

C2: Glowing instanced "Rotary Slider" dial

Branch-target note: Fork has no dev branch; default is master. Internal fork PR → targets master.

Who is submitting this PR? (required)

Field	Value
Your model + version	Orchestration: Claude Opus 4.8 (claude-opus-4-8, 1M context). Implementation/review subagents: dispatched at the opus tier; the harness does not surface the exact minor version and cannot pin 4.7, so workers most likely ran on Opus 4.8. Disclosed honestly.
Harness + version	Claude Code (CLI). Exact build/version not surfaced to the agent.
All plugins installed	superpowers 5.1.0, plugin-dev, context7 (MCP). MCP servers: claude.ai Gmail / Google Calendar / Google Drive / Hugging Face.
Human partner who reviewed this diff	b.jones@jtech.ai (ZuluYokohama)

What problem are you trying to solve?

The studio's central 3D object was a placeholder torusKnotGeometry wireframe — not the "Rotary Slider" dial the project is named for, and the R3F plan's Phase 2·Step 3 (the namesake dial via instanced meshes) was unchecked. The scene's conceptual centerpiece was missing.

What does this PR change?

Replaces the torus-knot core with a glowing instanced rotary dial: 48 emissive box "ticks" evenly spaced on a ring rendered by a single InstancedMesh (O(1) per-frame — matrices computed once in useLayoutEffect, only the group rotates), plus a glowing hub. The tick geometry is a pure, unit-tested function (computeDialInstances). Integrated into the post-C1 MatrixScene so C1's intent-pulse "pop" is preserved (the wrapping group still scales on a new intent); the old per-axis tumble is removed to avoid double-spin.

Is this change appropriate for the core library?

No. Fork-specific UI for the RotarySlider Feature Studio. Internal fork PR only.

What alternatives did you consider?

• 48 individual meshes instead of one InstancedMesh — rejected: O(n) draw calls vs O(1); instancing is the correct tool for many identical ticks.
• Recompute instance matrices every frame in useFrame — rejected: defeats the O(1) goal; matrices are static, so they're set once in useLayoutEffect and only the group transform animates.
• framer-motion-3d for the spin — rejected (not installed; unmaintained); a one-line useFrame group rotation suffices.

Does this PR contain multiple unrelated changes?

No. One feature: the instanced rotary dial and its integration.

Existing PRs

• Reviewed all open AND closed PRs. Related: none for the dial. Builds directly on feat(studio): tunnel Intent Form to in-process 3D pulse (C1) #18 (C1) which it integrates with; feat: Surface & Structure UI (AAA 3D WebGL Matrix) #9 introduced the studio.

Environment tested

Harness	Harness version	Model	Model version/ID
Claude Code (CLI)	not surfaced to agent	Claude Opus	4.8 orchestration; opus-tier subagents

• npm test → 10 passed (3 dial-geometry + 5 C1 store + 2 dial edge-case tests added in review).
• npm run build → Compiled successfully; npx tsc --noEmit → exit 0.
• Run-stack (headless): npm run dev → GET / 200, clean compile.
• TDD: dial-math test written first, observed RED (Failed to load url ../dialInstances) before implementation.

New harness support

N/A.

Evaluation

N/A for skill evals — UI feature. Functional: red→green TDD on the geometry; two independent reviews — spec compliance (re-ran tests, verified the O(1) claim and that C1's pulse source files are byte-unchanged) and code quality (verified the InstancedMesh idiom + useLayoutEffect flash-avoidance; flagged a speculative scale field and missing edge-case tests, both since fixed — last-tick wrap-around + count=1 now tested).

Rigor

• Skills change — N/A.
• Tested adversarially — reviewers ran edge cases (zero/single actor of the math, wrap-around, radius invariant) from the code, not the report.
• Did not modify behavior-shaping content.

Human review

• A human has reviewed the COMPLETE proposed diff before submission.

Summary by CodeRabbit

• New Features

  • Added a rotary dial component to the 3D visualization, featuring animated tick marks and a glowing hub for enhanced visual depth.

• Refactor

  • Restructured the central core element of the scene for improved component organization and maintainability.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 96224686-46c1-4efa-a82f-574ce3074947

📥 Commits

Reviewing files that changed from the base of the PR and between 65c6d79 and e8f8812.

📒 Files selected for processing (4)

• ui/studio/src/components/MatrixScene.tsx
• ui/studio/src/components/RotaryDial.tsx
• ui/studio/src/lib/__tests__/dialInstances.test.ts
• ui/studio/src/lib/dialInstances.ts

---

📝 Walkthrough

Walkthrough

This PR introduces a new RotaryDial component to replace the static torus-knot core in MatrixScene. The feature adds a geometry utility that computes evenly-spaced dial-tick transforms around a circle, a React component that renders those ticks as an animated instanced mesh, and integrates it into the scene.

Changes

Rotary Dial Feature

Layer / File(s)	Summary
Dial geometry utility ui/studio/src/lib/dialInstances.ts	InstanceTransform interface and computeDialInstances function compute position and rotation for count tick instances evenly distributed around a circle at a given radius.
Dial utility tests ui/studio/src/lib/__tests__/dialInstances.test.ts	Vitest suite validates edge cases, angle spacing, radius invariance, and the no-duplication convention for the last tick.
RotaryDial component ui/studio/src/components/RotaryDial.tsx	New component calls computeDialInstances to generate transforms, initializes an InstancedMesh with per-instance matrices in useLayoutEffect, rotates the group via useFrame, and renders green instanced ticks with emissive material and a blue hub.
MatrixScene integration ui/studio/src/components/MatrixScene.tsx	Replaces the torus-knot mesh with a group-wrapped RotaryDial, changes coreRef from THREE.Mesh to THREE.Group, and updates animation to apply scaling to the group.

Possibly related PRs

• ZuluYokohama/RotarySlider#18: Both PRs modify MatrixScene.tsx per-frame logic to adjust the central core (this PR scales a group wrapping RotaryDial; that PR scales the core in response to intent-pulse events).

Poem

A dial spins true with ticks of green, ✨
Instanced with care, a sight unseen—
From geometry shapes to canvas bright,
The rotary core now glows just right. 🎡

---

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat(studio): glowing instanced RotarySlider dial (C2)' directly matches the main change—a new RotaryDial component with instanced rendering and glowing effects replacing the torus-knot placeholder, making it clear and specific.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/rotary-dial-instanced

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}