Render solver stats as right-aligned fixed-width header with hover JSON

[seveibar]

Motivation

• Make solver runtime stats compact and stable in the debugger header so rapidly-changing numeric values don't shift the toolbar layout.
• Keep a compact, single-line summary visible while providing access to the full structured stats when needed.
• Provide an example solver that emits steadily-changing stats so the behavior can be observed in the demo page.

Description

• Added stat formatting and sizing helpers in lib/react/GenericSolverToolbar.tsx and render the stats as a right-aligned, single-line strip constrained with max-w-[120ch] to truncate cleanly instead of pushing the toolbar layout.
• Each stat is shown in a fixed-width monospace box sized from the key length (room reserved for the value) using width: ${segment.widthCh}ch, and the full solver.stats object is shown as multiline JSON in a hover pre tooltip (group-hover:block).
• Updated the example solver at site/ExampleSolver.ts to expose changing counters (samples, accepted, uphill) and surface one of those counters in the visualization text so the new UI behavior is visible in the demo.

Testing

• Ran formatter with bun run format and applied formatting changes successfully.
• Typechecked the project with bunx tsc --noEmit with no errors.
• Ran the test suite with bun test tests and all tests passed (15 pass, 0 fail).

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
solver-utils	Ready	Preview, Comment	Mar 21, 2026 7:22pm

[tscircuitbot]

---

Thank you for your contribution! 🎉

PR Rating: ⭐⭐⭐
Impact: Major

Track your contributions and see the leaderboard at: tscircuit Contribution Tracker

---