web: surface round phase and reveal countdown in the jury UI

[karagozemin]

Summary

The demo UI in apps/web should clearly display the current round phase (Open / Reveal / Settled) and a countdown to the target Drand round R.

Motivation

Users cannot currently tell at a glance when a round will unseal, which is the core value proposition of the product.

Acceptance criteria

• Phase badge driven by classifyRoundPhase.
• Countdown that updates live and handles the past-R state.
• Works offline against the canonical demo trace.
• Component-level test for phase/countdown rendering.

[Tanvi-Kuwar]

Hi! I'd like to work on this issue. Could you please assign it to me? Thanks!

[Heazzy500]

Hello, I’ve gone through the requirements and I’m confident I can implement a proper solution that matches the acceptance criteria. Kindly assign this issue to me.

[sebas11042]

Hi, I’d like to work on this issue.

I reviewed the acceptance criteria and the expected behavior for the jury UI. My approach would be to:

1. Use classifyRoundPhase as the single source of truth for the Open, Reveal, and Settled states.
2. Add a clear phase badge to the relevant jury interface.
3. Implement a live countdown to the target Drand round with proper interval cleanup.
4. Handle the past-round state gracefully once the target round has been reached or passed.
5. Ensure the feature works offline using the canonical demo trace.
6. Add component-level tests covering phase rendering, countdown updates, and the past-R state.

I’ll follow the existing apps/web component and testing patterns and keep the PR focused on the requested UI behavior.

Thanks!