fix(web): localize design-system import errors (#2686) by arseniy-gl · Pull Request #6075 · nexu-io/open-design

arseniy-gl · 2026-07-25T16:23:57Z

Why

When a design system import fails, the daemon returns an English error message and the Settings form shows it as-is. Every non-English locale (zh-CN, ru, fr, de, and 15 others) sees English text inside an otherwise fully localized UI. The issue was reported by a Chinese user, but the bug affects all 19 locales.

I found this while looking for a good first issue after my first contribution (#5836). The scope matched what @lefarcen described in the issue: a UI-side fix that maps the daemon error code to a localized key.

What users will see

When a design system import fails (local path, GitHub URL, or shadcn reference), the Settings form now shows a localized error message instead of the raw English text from the daemon.
The raw daemon message (with the actual path or URL) is still available under a Details disclosure for diagnostics.
English locale is unchanged — it shows the same localized English text.
Unknown error codes (not BAD_REQUEST or INTERNAL_ERROR) fall back to the raw message, same as before.

Surface area

UI
Keyboard shortcut
CLI / env var
API / contract
Extension point
i18n keys — 3 new keys (designSystemsImportErrorInvalid, designSystemsImportErrorInternal, designSystemsImportErrorDetails) added to types.ts and all 19 locale files
New top-level dependency
Default behavior change — import error text is now localized and wrapped in a details disclosure instead of shown as raw English
None

Screenshots

No new UI surface — the change is in the error text that appears in the existing import form. The layout and controls are unchanged.

Bug fix verification

Test path: apps/web/tests/components/DesignSystemsSection.test.tsx — new describe block "import error localization (issue Chinese UI still shows English error messages in the design system import flow #2686)"
Did the test go red on main and green on this branch? yes
- On main: the test fails because the raw English text local project path must be a directory is rendered in the Chinese UI
- On this branch: the test passes — the Chinese summary "无法导入设计系统" is shown, and the raw detail is under <details>
Unit test for the code-to-key mapping: apps/web/tests/runtime/design-system-import-error.test.ts

Validation

pnpm --filter @open-design/web typecheck — clean (catches missing locale entries via the typed Dict)
pnpm --filter @open-design/web test — 4768 passed, 439 files
pnpm guard — only pre-existing apps/telemetry-worker ENOENT failure (same as main, verified via stash)

Adjacent issues

The same raw-English-error pattern exists in apps/web/src/components/SkillsSection.tsx:360,394 (setDraftError(result.error.message) without localization). That is a separate surface with its own error categories — out of scope for this PR. I will file a follow-up issue.

lefarcen · 2026-07-25T16:25:40Z

Thanks @arseniy-gl — good catch localizing the import failure summary while still keeping the raw daemon detail available for debugging. I'll route the PR through the usual triage steps now and keep the thread updated if anything needs action from your side.

…or shown in zh-CN A failing test in DesignSystemsSection.test.tsx anchors the bug: when the daemon rejects a design-system import (e.g. BAD_REQUEST from a local path check), the Settings form renders the raw `result.error.message` (English) directly in the Chinese UI. The fix will route the error envelope through a localized formatter (formatDesignSystemImportError) that maps `code` → i18n key and keeps the raw detail under a <details> disclosure. Refs nexu-io#2686.

The daemon returns English error messages for design-system import failures, and the Settings form rendered them raw — so every non-English locale saw English text in an otherwise localized UI. The fix routes the error envelope through `designSystemImportErrorKey`, which maps `code` (`BAD_REQUEST` / `INTERNAL_ERROR`) to a new i18n key. The localized summary replaces the raw English as the user-facing message, while the raw daemon detail (paths, URLs) remains accessible under a <details> disclosure for diagnostics. - New runtime helper: `apps/web/src/runtime/design-system-import-error.ts` - 3 new i18n keys across all 19 locales - Component change: `DesignSystemsSection.tsx` stores the full error envelope (with `code`) instead of just the message string - Red spec: `DesignSystemsSection.test.tsx` proves the raw English is no longer the primary visible text in zh-CN - Unit tests for the code-to-key mapping Fixes nexu-io#2686

PerishCode

The error-code mapping and raw diagnostic disclosure are well scoped, and the added tests cover the intended localized summary behavior. I found two merge-safe issues in the changed UI and locale ranges that should be corrected.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

PerishCode · 2026-07-30T04:27:33Z

+            {importError ? (
+              <p className="library-install-error">
+                {importErrorKey ? t(importErrorKey) : importError.message}
+                <details className="library-install-error-detail">


Use a flow-content container for the error block instead of nesting <details> inside <p>. A <details> element is not permitted paragraph content, so this markup triggers React's invalid DOM-nesting warning and can be reparsed differently when serialized or hydrated. Change the outer element to a <div className="library-install-error"> (and wrap the summary text in a span or paragraph if its styling needs a text node) while keeping the disclosure as its sibling child.
_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

PerishCode · 2026-07-30T04:27:34Z

  'settings.designSystemsImportedStatus': '{title} 가져옴',
  'settings.designSystemsViewImported': '가져온 디자인 시스템 보기',
+  'settings.designSystemsImportErrorInvalid': '디자인 시스템을 가져올 수 없습니다. 경로 또는 URL을 확인하고 다시 시도하세요.',
+  'settings.designSystemsImportErrorInternal': '낸부 오류로 인해 디자인 시스템을 가져올 수 없습니다. 다시 시도하세요.',


Correct the Korean word for “internal” from 낸부 to 내부. The current typo is directly user-visible in the newly localized internal-error message and makes the sentence read incorrectly; the value should begin 내부 오류로 인해 ....
_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

lefarcen · 2026-07-30T04:36:44Z

Hey @arseniy-gl — @PerishCode left two concrete fixes on the current head that are worth addressing before the next pass: the <details> block should not sit inside a <p>, and the new Korean internal-error string has a typo (낸부 → 내부). Once those are updated, this should be in better shape for re-review.

💡 To drive this PR to merge hands-free, paste this to your AI coding agent (Claude Code / Codex / opencode / Cursor …):
Take over nexu-io/open-design#6075 until it merges — read https://raw.githubusercontent.com/nexu-io/looper/main/skills/pr-takeover/SKILL.md and follow it.

- Replace <p> wrapper with <div> around import error block to avoid invalid <details> nesting inside <p> - Fix Korean internal error message: 낸부 → 낸부 (U+B0B8 → U+B0B4)

arseniy-gl mentioned this pull request Jul 25, 2026

Chinese UI still shows English error messages in the design system import flow #2686

Open

lefarcen added the size/M PR changes 100-300 lines label Jul 25, 2026

lefarcen requested a review from PerishCode July 25, 2026 16:26

lefarcen added risk/medium Medium risk: regular code changes type/bugfix Bug fix skip-validation Maintainer override: bot will not auto-add needs-validation on this PR. labels Jul 25, 2026

arseniy-gl added 2 commits July 27, 2026 20:29

arseniy-gl force-pushed the fix/i18n-design-system-import-error branch from 9363ae7 to 8cf1434 Compare July 27, 2026 17:31

PerishCode reviewed Jul 30, 2026

View reviewed changes

lefarcen marked this pull request as draft July 30, 2026 17:52

fix(web): address review — fix HTML nesting and Korean typo

5c666d7

- Replace <p> wrapper with <div> around import error block to avoid invalid <details> nesting inside <p> - Fix Korean internal error message: 낸부 → 낸부 (U+B0B8 → U+B0B4)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(web): localize design-system import errors (#2686) - #6075

fix(web): localize design-system import errors (#2686)#6075
arseniy-gl wants to merge 3 commits into
nexu-io:mainfrom
arseniy-gl:fix/i18n-design-system-import-error

arseniy-gl commented Jul 25, 2026

Uh oh!

lefarcen commented Jul 25, 2026

Uh oh!

PerishCode left a comment

Uh oh!

PerishCode Jul 30, 2026

Uh oh!

PerishCode Jul 30, 2026

Uh oh!

lefarcen commented Jul 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

arseniy-gl commented Jul 25, 2026

Why

What users will see

Surface area

Screenshots

Bug fix verification

Validation

Adjacent issues

Uh oh!

lefarcen commented Jul 25, 2026

Uh oh!

PerishCode left a comment

Choose a reason for hiding this comment

Uh oh!

PerishCode Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

PerishCode Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

lefarcen commented Jul 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants