feat(hub-ui): translate the hub UI and add a language setting

[antfubot]

Refs #398

What

• Every user-facing string in @devframes/hub-ui renders through a small in-house t() (src/client/i18n) with typed keys from en.json. Ten locales ship: en, zh-CN, zh-TW, ja, ko, es, fr, de, pt-BR, ru. English is the fallback.
• Settings > Appearance gets a Language select (native <select>, so it works inside the shadow root). The pick persists per browser under devframes-locale, like the color scheme. Auto follows the host default, then navigator.languages.
• createUi({ locale }) publishes a host default as ConnectionMeta.configs.ui.locale. The running UI writes the language it resolved back into the connection it publishes on its window (__DEVFRAME_CONNECTION__ / __DEVFRAME_CONNECTION_META__), so a same-origin frame reads the effective language from connectionMeta.configs.ui.locale at boot.
• devframe/client exports storeConnection so the hub UI can refresh the published connection after mutating its meta.
• Storybook gets a Language toolbar toggle. Docs: locale option and how to add a language in the hub-initiate guide; a t() rule in .agents/06-design-system.md.

Translations

The non-English files are machine quality and marked for native review. The i18n test keeps every file in lockstep with en.json (same keys, same {slot} placeholders), so a missing or renamed key fails CI.

Deferred

• @antfu/design FormSelect teleports its list to document.body, which escapes the shadow root. Filed upstream as FormSelect: dropdown teleports to document.body and loses styles inside a shadow root antfu/design#30; the picker moves to it once fixed.
• Live locale sync into already-mounted frames (frames read the locale once at boot).

---

Created with the help of an agent.

[coldtea-pr-lens]

◈ PR Lens

🟢 +2 new · 🟠 ~3 changed · 🔴 -0 removed · 1 flow · 14 files · commit 0fadd97

Architecture

5 components touched across 2 lanes.

Play the interactive walkthrough

Inside the changed components — 2 views

Component view — Hub UI Localization Engine

Internal localization engine, message catalogs, and UI translation integration

Component view — Locale State & Connection Publishing

Reactive locale watcher and cross-frame connection storage synchronization

Data flow

Changing UI language and synchronizing frames

Follow each request, response and payload

View

• Architecture lens
• Data flow lens
• Expand every detail

Tip

Untick Architecture lens or Data flow lens under View to hide a diagram, or tick Expand every detail to open every section. The comment redraws in a few seconds

🪧 More tips

• Run npx skills add coldteadotai/pr-lens, then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
• Run npx @coldtea/pr-lens-cli analyze --base origin/main on a branch, then npx @coldtea/pr-lens-cli render .pr-lens/graph.json. Same lenses, your own model key, before the pull request exists
• Click the link under each diagram to open it on a canvas you can zoom, pan and step through
• The diagrams are links. Click one to open it on the canvas, then press W or click play to walk through the change
• Open a diagram on the canvas, then press W or click play to walk through the change one step at a time
• The CLI's render reads .github/pr-lens.yml and applies your renames, exclusions and lane pins at draw time
• Set github.comment.collapsed: true in .github/pr-lens.yml to fold the comment behind one View architecture and data flow row. Drawing still runs as before
• Set github.draw: on-demand in .github/pr-lens.yml and PR Lens stops drawing pull requests on its own. Comment @pr-lens draw on a pull request when you want that one drawn
• Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and your model provider's key as its api-key to run PR Lens from your own CI. Any /chat/completions endpoint works
• Push a commit and the drawing stays, with a note that it is out of date. Tick Redraw in the note to draw the new head
• Switch GitHub to dark mode and the diagrams follow. The moving dots are this pull request's data in motion

---

Thanks for using PR Lens! It's built by Coldtea, free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Bluesky
• Mastodon
• Reddit
• LinkedIn

[vercel]

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

Project	Deployment	Actions	Updated
devframe	Ready	Preview	Sep 30, 2026 9:21am UTC