Files
open-design/apps
64510b790b fix(web): translate Design Files refresh strings instead of hardcoding English (#1254) (#1300)
* fix(web): translate Design Files / live artifact refresh strings instead of hardcoding English

When the app language was set to Chinese, the Design Files refresh
flow showed Chinese for the surrounding chrome but kept English for
every label and message originating in describeRefreshStatus,
describeEventPhase, and the refresh-event timeline body of
LiveArtifactRefreshHistoryPanel. Same-screen mixed-language UX, the
exact symptom reported in #1254.

Root cause: those three sites bypassed i18n entirely. describeRefreshStatus
returned hardcoded English label + description strings for the
running / succeeded / failed / idle / never statuses;
describeEventPhase returned hardcoded Started / Succeeded / Failed
labels; the timeline body inlined "Refresh started…",
"<n> source(s) updated", and "Refresh failed." string literals; and
the empty-timeline copy ("No refresh activity yet in this session.
Trigger Refresh to record a timeline…") was hardcoded too.

Fix: thread the existing TranslateFn through both helpers, swap every
hardcoded string for a t() lookup, and pull the empty-timeline copy
and the failure-fallback through the same path. Added 13 new keys
under liveArtifact.refresh.* — statusRunning, the five
*Description keys, three event-phase labels (eventStarted/Succeeded/Failed),
eventStartedDetail, sourcesUpdatedOne/Many with an {n} placeholder,
and timelineEmpty. Status labels for succeeded / failed / ready / never
already had keys (statusSucceeded / statusFailed / statusReady /
statusNever) so those are reused unchanged.

Locales: full Chinese translations added to zh-CN.ts (the locale
directly named in the issue). The other 16 locales pick up English
fallbacks through their existing ...en spread, so the locale-key
alignment test stays green; native translations for those locales
can land via the usual locale-team passes without re-touching the
source code.

* fix(web): cover the rest of the refresh panel under i18n + add a zh-CN render test

Lefarcen's review on #1254 / PR #1300 surfaced that the first pass
only translated three helpers (describeRefreshStatus,
describeEventPhase, session timeline body) and left the rest of the
panel in English. Under a Chinese UI the panel still mixed
languages, which was exactly the regression the issue was filed for.

This commit threads t() through every user-visible refresh-panel
string the user would see in the Chinese flow:

- Hero block: "Last refreshed" label + "Never" empty state.
- Created / Last updated facts + their "Unknown" empty label.
- Persisted refresh history header, hint, empty-state copy.
- Persisted timeline status badge: succeeded / running / failed /
  cancelled / skipped now resolve through describePersistedStatus,
  which uses an exhaustive switch off LiveArtifactRefreshLogEntry's
  status union so a future contract addition trips tsc.
- Session activity header, hint.
- Document source header, hint, Type / Tool / Connector field
  labels.
- Advanced debug metadata summary + note line.
- "just now" relative-time fallback in the persisted timeline.

22 new i18n keys total (23 with the new
heroLastRefreshedNever distinct from statusNever); zh-CN strings
authored alongside the English source, every other locale picks
them up via its existing ...en spread and the locale-key alignment
test stays green.

Intentionally untranslated surfaces: raw daemon payloads inside
the <details> debug panel (event.step / refreshId / error.message
and the JSON.stringify dump), since those are agent / connector
identifiers and stack-trace style strings, not localised copy.
The debug summary heading itself is translated; if the
debug section should be hidden in localised primary flows, that
is a separate UX call worth its own issue.

Test coverage: new render test wraps LiveArtifactRefreshHistoryPanel
in I18nProvider initial="zh-CN" and pins the Chinese rendering of
every translated label, plus negative assertions that the formerly
hardcoded English literals are NOT present in the markup. With the
no-provider fallback returning English, the existing static-markup
tests can't observe the regression this PR is meant to fix; the
zh-CN render test is the only one that would have caught the
original gap and will catch the next one.

Validated: pnpm guard, pnpm --filter @open-design/web typecheck,
locales.test.ts (5/5), FileViewer.test.tsx (69/69, +1 new zh-CN
test), full web suite (92 files, 841 tests).

* fix(web): route formatRelativeTime through Intl.RelativeTimeFormat so units localise

Lefarcen's second pass on PR #1300 caught the remaining hardcoded
English path: formatRelativeTime() still emitted units like `5s ago`
and `45m ago`, so Chinese users would see those strings inside the
otherwise-translated refresh panel. The function now takes the
active locale + TranslateFn and routes through
Intl.RelativeTimeFormat with style: 'narrow', numeric: 'always'.
That preserves the historical `5s ago` shape for English while
producing locale-correct output for every other locale (zh-CN gets
`5秒前` / `45分前`, with the right past / future suffix and word
order).

The `just now` carve-out (abs < 5s) keeps using
t('liveArtifact.refresh.justNow') since Intl's narrow output for
zero-delta reads awkwardly. A try/catch around the RTF constructor
falls back to 'en' if the runtime rejects the locale, so the
function is safe on engines with limited ICU data.

Callsites threaded through:
- LiveArtifactRefreshHistoryPanel hero metric (`lastRefreshedAt`)
- Session timeline event row (`event.startedAt`)
- Session timeline event time (`event.at`)
- LiveArtifactRefreshFact for the created / last-updated facts;
  the component now accepts optional `locale` + `t` props and the
  panel passes them in.

Test coverage extension:
- The existing zh-CN render test sets a real lastRefreshedAt
  (now - 45s) and real session-event timestamps, then asserts the
  Chinese past-tense suffix `前` appears AND the legacy English
  `Xs ago` / `Xm ago` shapes do NOT. That was the gap lefarcen
  pointed at: setting `lastRefreshedAt: undefined` couldn't see
  the regression because no relative-time formatting ran.
- Added a small second test for the lastRefreshedAt-undefined
  empty hero so the original `从未` coverage still pins.

Validated: pnpm guard, pnpm --filter @open-design/web typecheck,
FileViewer.test.tsx (70/70, +1 new test), locales.test.ts (5/5),
full web suite (92 files, 842 tests).

---------

Co-authored-by: Nagendhra <nagendhra405@gmail.com>
2026-05-12 10:38:07 +08:00
..