Agentic UI: Improve working timer units to use more than seconds and add new transition animation

[shaunandrews]

Related issues

• None

How AI was used in this PR

AI helped prototype several motion treatments, implement the selected per-digit reel, add formatter coverage, verify the production UI in light, dark, and RTL layouts, and capture the review media. The resulting code and media were reviewed during implementation.

Proposed Changes

• Make the Studio Code elapsed timer easier to scan with compact hour, minute, and second units, while always retaining seconds (for example, 1m 0s and 1h 0s).
• Animate only the digit columns that change using a short upward reel, keeping unchanged digits and unit labels stationary.
• Size the digit viewport to the status line-height so resting and moving numerals are not clipped.
• Preserve a stable, complete value for assistive technology, retain left-to-right timer ordering in RTL layouts, and respect reduced-motion preferences.

Review guide

• Focus on whether the per-second reel feels subtle enough for a continuously visible status indicator.
• Watch the 9s to 10s transition: the ones column should roll from 9 to 0 independently as the tens column appears.
• Check minute and hour boundaries to confirm seconds remain visible as 0s.

Testing Instructions

1. Start a Studio Code session and confirm the timer is visible immediately as 0s.
2. Observe the timer from 4s through 12s and confirm only changed digit columns animate.
3. Confirm the tops and bottoms of every numeral remain visible before, during, and after each transition.
4. Confirm boundary values render as 59s, 1m 0s, 1m 1s, 59m 59s, and 1h 0s.
5. Verify the indicator remains legible in both light and dark themes.
6. Verify an RTL locale keeps the elapsed value in hour-minute-second order.
7. Enable reduced motion and confirm the digit changes occur without the reel animation.

Animation

The lossless 2× capture below runs from 4s through 12s. It includes the independent 9s to 10s digit transition.

H.264 video version

Minute and hour boundaries

Both lossless 2× captures include the unit change and the always-present 0s value.

Minute boundary: 58s → 1m 2s	Hour boundary: 59m 58s → 1h 2s

Longer format examples

1m 20s	15m 8s	1h 27m 46s

Screenshots

Light	Dark

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?
• Have you linted your changes?
• Have you added or updated tests for your changes?
• Have you tested your changes in both light and dark mode?
• Have you updated the documentation, if applicable?

[Copilot]

Pull request overview

Updates the UI Classic “ThinkingIndicator” elapsed timer to display compact hour/minute/second units (while always keeping seconds visible) and adds per-digit reel animation + accessibility support for RTL and assistive technology.

Changes:

• Added elapsed time formatting utilities (getElapsedTimeParts, formatElapsedTime) and a digit-by-digit animated renderer for the timer.
• Updated styling to support per-digit reel transitions, fixed digit viewport sizing, and reduced-motion behavior.
• Added unit tests covering elapsed time formatting.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
apps/ui/src/ui-classic/components/session-view/thinking-indicator/style.module.css	Adds layout + per-digit reel animation styles and reduced-motion handling for the new timer UI.
apps/ui/src/ui-classic/components/session-view/thinking-indicator/index.tsx	Replaces the simple seconds counter with a formatted (h/m/s) timer and per-digit animation + VisuallyHidden AT label + RTL ordering control.
apps/ui/src/ui-classic/components/session-view/thinking-indicator/index.test.ts	Adds formatter unit tests for the new elapsed time string formatting.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.