anomalyco / anomalyco/opencode

bug(ui): AnimatedNumber renders multi-digit numbers reversed in RTL locales

Open
#43,643 0 comments 0 reactions 1 assignee View on GitHub

@Brendonovich is already working on this.

Since Aug 20, 2026.

Dominant language
TypeScript
Stars
209k
Forks
27.5k
PR merge metrics
PR metrics pending

Description

Description

Problem

When the UI language is set to an RTL locale (e.g. Arabic), multi-digit numbers
rendered by AnimatedNumber appear reversed: 16 displays as 61.

Visible in:

  • tool-count labels, e.g. "16 قراءة" (packages/session-ui/src/components/tool-count-label.tsx)
  • todo progress numbers (packages/app/src/pages/session/composer/session-todo-dock.tsx)

Root cause

AnimatedNumber reverses the digit array in DOM order and relies on
flex-direction: row-reverse to restore the visual order. But row-reverse
resolves against the inherited direction context, and
packages/app/src/context/language.tsx sets
document.documentElement.dir = "rtl" for RTL locales. In that context
row-reverse resolves to left-to-right, so the intentionally reversed digits
stay visually reversed.

Expected

Numbers must render in correct order regardless of document direction.

Plugins

No response

OpenCode version

No response

Steps to reproduce

No response

Screenshot and/or share link

No response

Operating System

No response

Terminal

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.