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

apps/web/src/components/DesignSystemsSection.tsx

@@ -2,13 +2,15 @@ import { Dialog, DialogFooter, DialogTitle } from '@open-design/components';
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import type { Dispatch, FormEvent, SetStateAction } from 'react';
 import { useT } from '../i18n';
+import { designSystemImportErrorKey } from '../runtime/design-system-import-error';
 import type { AppConfig, DesignSystemGenerationJob, DesignSystemSummary } from '../types';
 import {
   fetchDesignSystems,
   importGitHubDesignSystem,
   importLocalDesignSystem,
   importShadcnDesignSystem,
   updateDesignSystemDraft,
+  type SkillImportError,
 } from '../providers/registry';
 import { DesignSystemPreviewModal } from './DesignSystemPreviewModal';
 import { Icon } from './Icon';
@@ -71,7 +73,7 @@ export function DesignSystemsSection({
   const [importMessage, setImportMessage] = useState<string | null>(null);
   const [importedDesignSystem, setImportedDesignSystem] = useState<DesignSystemSummary | null>(null);
   const [highlightedDesignSystemId, setHighlightedDesignSystemId] = useState<string | null>(null);
-  const [importError, setImportError] = useState<string | null>(null);
+  const [importError, setImportError] = useState<SkillImportError | null>(null);
 
   useEffect(() => {
     fetchDesignSystems().then(setDesignSystems);
@@ -239,7 +241,7 @@ export function DesignSystemsSection({
           : await importLocalDesignSystem({ baseDir: importTarget, ...importOptions });
     setImporting(false);
     if ('error' in result) {
-      setImportError(result.error.message);
+      setImportError(result.error);
       return;
     }
     setDesignSystems((current) => {
@@ -276,6 +278,8 @@ export function DesignSystemsSection({
     });
   }
 
+  const importErrorKey = importError ? designSystemImportErrorKey(importError) : null;
+
   return (
     <section className="settings-section settings-design-systems">
       <div className="library-section-header">
@@ -451,7 +455,15 @@ export function DesignSystemsSection({
                 </div>
               </div>
             </div>
-            {importError ? <p className="library-install-error">{importError}</p> : null}
+            {importError ? (
+              <p className="library-install-error">
+                {importErrorKey ? t(importErrorKey) : importError.message}
+                <details className="library-install-error-detail">
+                  <summary>{t('settings.designSystemsImportErrorDetails')}</summary>
+                  <code>{importError.message}</code>
+                </details>
+              </p>
+            ) : null}
             {importMessage ? (
               <p className="library-install-status">
                 <span>{t('settings.designSystemsImportedStatus', { title: importMessage })}</span>

apps/web/src/i18n/locales/ar.ts

@@ -3430,6 +3430,9 @@ export const ar: Dict = {
   'settings.designSystemsImportProject': 'استيراد من المشروع',
   'settings.designSystemsImportedStatus': 'تم استيراد {title}',
   'settings.designSystemsViewImported': 'عرض نظام التصميم المستورد',
+  'settings.designSystemsImportErrorInvalid': 'تعذر استيراد نظام التصميم. تحقق من المسار أو عنوان URL وحاول مرة أخرى.',
+  'settings.designSystemsImportErrorInternal': 'تعذر استيراد نظام التصميم بسبب خطأ داخلي. حاول مرة أخرى.',
+  'settings.designSystemsImportErrorDetails': 'التفاصيل',
   'settings.designSystemsCategory': 'الفئة',
   'settings.designSystemsAllCategories': 'كل الفئات',
   'settings.designSystemsShowInHomeGallery': 'إظهار في معرض الصفحة الرئيسية',

apps/web/src/i18n/locales/de.ts

@@ -3430,6 +3430,9 @@ export const de: Dict = {
   'settings.designSystemsImportProject': 'Aus Projekt importieren',
   'settings.designSystemsImportedStatus': '{title} importiert',
   'settings.designSystemsViewImported': 'Importiertes Design-System anzeigen',
+  'settings.designSystemsImportErrorInvalid': 'Design-System konnte nicht importiert werden. Überprüfen Sie den Pfad oder die URL und versuchen Sie es erneut.',
+  'settings.designSystemsImportErrorInternal': 'Das Design-System konnte aufgrund eines internen Fehlers nicht importiert werden. Bitte versuchen Sie es erneut.',
+  'settings.designSystemsImportErrorDetails': 'Details',
   'settings.designSystemsCategory': 'Kategorie',
   'settings.designSystemsAllCategories': 'Alle Kategorien',
   'settings.designSystemsShowInHomeGallery': 'In Home-Galerie anzeigen',

apps/web/src/i18n/locales/en.ts

@@ -3468,6 +3468,9 @@ export const en: Dict = {
   'settings.designSystemsImportProject': 'Import from project',
   'settings.designSystemsImportedStatus': 'Imported {title}',
   'settings.designSystemsViewImported': 'View imported design system',
+  'settings.designSystemsImportErrorInvalid': 'Couldn\'t import design system. Check the path or URL and try again.',
+  'settings.designSystemsImportErrorInternal': 'Couldn\'t import design system due to an internal error. Please try again.',
+  'settings.designSystemsImportErrorDetails': 'Details',
   'settings.designSystemsCategory': 'Category',
   'settings.designSystemsAllCategories': 'All categories',
   'settings.designSystemsShowInHomeGallery': 'Show in home gallery',

apps/web/src/i18n/locales/es-ES.ts

@@ -3430,6 +3430,9 @@ export const esES: Dict = {
   'settings.designSystemsImportProject': 'Importar desde proyecto',
   'settings.designSystemsImportedStatus': '{title} importado',
   'settings.designSystemsViewImported': 'Ver sistema de diseño importado',
+  'settings.designSystemsImportErrorInvalid': 'No se pudo importar el sistema de diseño. Compruebe la ruta o la URL e inténtelo de nuevo.',
+  'settings.designSystemsImportErrorInternal': 'No se pudo importar el sistema de diseño debido a un error interno. Inténtelo de nuevo.',
+  'settings.designSystemsImportErrorDetails': 'Detalles',
   'settings.designSystemsCategory': 'Categoría',
   'settings.designSystemsAllCategories': 'Todas las categorías',
   'settings.designSystemsShowInHomeGallery': 'Mostrar en la galería de inicio',

apps/web/src/i18n/locales/fa.ts

@@ -3430,6 +3430,9 @@ export const fa: Dict = {
   'settings.designSystemsImportProject': 'درون‌ریزی از پروژه',
   'settings.designSystemsImportedStatus': '{title} درون‌ریزی شد',
   'settings.designSystemsViewImported': 'مشاهده سیستم طراحی درون‌ریزی‌شده',
+  'settings.designSystemsImportErrorInvalid': 'سیستم طراحی وارد نشد. مسیر یا URL را بررسی کرده و دوباره امتحان کنید.',
+  'settings.designSystemsImportErrorInternal': 'به دلیل خطای داخلی، سیستم طراحی وارد نشد. لطفاً دوباره امتحان کنید.',
+  'settings.designSystemsImportErrorDetails': 'جزئیات',
   'settings.designSystemsCategory': 'دسته‌بندی',
   'settings.designSystemsAllCategories': 'همه دسته‌بندی‌ها',
   'settings.designSystemsShowInHomeGallery': 'نمایش در گالری خانه',

apps/web/src/i18n/locales/fr.ts

@@ -3430,6 +3430,9 @@ export const fr: Dict = {
   'settings.designSystemsImportProject': 'Importer depuis le projet',
   'settings.designSystemsImportedStatus': '{title} importé',
   'settings.designSystemsViewImported': 'Voir le système de design importé',
+  'settings.designSystemsImportErrorInvalid': 'Impossible d’importer le design system. Vérifiez le chemin ou l’URL et réessayez.',
+  'settings.designSystemsImportErrorInternal': 'Impossible d’importer le design system en raison d’une erreur interne. Veuillez réessayer.',
+  'settings.designSystemsImportErrorDetails': 'Détails',
   'settings.designSystemsCategory': 'Catégorie',
   'settings.designSystemsAllCategories': 'Toutes les catégories',
   'settings.designSystemsShowInHomeGallery': 'Afficher dans la galerie d’accueil',

apps/web/src/i18n/locales/hu.ts

@@ -3430,6 +3430,9 @@ export const hu: Dict = {
   'settings.designSystemsImportProject': 'Importálás projektből',
   'settings.designSystemsImportedStatus': '{title} importálva',
   'settings.designSystemsViewImported': 'Importált designrendszer megtekintése',
+  'settings.designSystemsImportErrorInvalid': 'A designrendszer importálása nem sikerült. Ellenőrizze az elérési utat vagy az URL-t, és próbálja újra.',
+  'settings.designSystemsImportErrorInternal': 'A designrendszer importálása belső hiba miatt nem sikerült. Kérjük, próbálja újra.',
+  'settings.designSystemsImportErrorDetails': 'Részletek',
   'settings.designSystemsCategory': 'Kategória',
   'settings.designSystemsAllCategories': 'Minden kategória',
   'settings.designSystemsShowInHomeGallery': 'Megjelenítés a kezdő galériában',

apps/web/src/i18n/locales/id.ts

@@ -3430,6 +3430,9 @@ export const id: Dict = {
   'settings.designSystemsImportProject': 'Impor dari proyek',
   'settings.designSystemsImportedStatus': '{title} diimpor',
   'settings.designSystemsViewImported': 'Lihat sistem desain yang diimpor',
+  'settings.designSystemsImportErrorInvalid': 'Tidak dapat mengimpor sistem desain. Periksa jalur atau URL dan coba lagi.',
+  'settings.designSystemsImportErrorInternal': 'Tidak dapat mengimpor sistem desain karena kesalahan internal. Silakan coba lagi.',
+  'settings.designSystemsImportErrorDetails': 'Detail',
   'settings.designSystemsCategory': 'Kategori',
   'settings.designSystemsAllCategories': 'Semua kategori',
   'settings.designSystemsShowInHomeGallery': 'Tampilkan di galeri beranda',

apps/web/src/i18n/locales/it.ts

@@ -3430,6 +3430,9 @@ export const it: Dict = {
   'settings.designSystemsImportProject': 'Importa dal progetto',
   'settings.designSystemsImportedStatus': '{title} importato',
   'settings.designSystemsViewImported': 'Vedi design system importato',
+  'settings.designSystemsImportErrorInvalid': 'Impossibile importare il design system. Controlla il percorso o l’URL e riprova.',
+  'settings.designSystemsImportErrorInternal': 'Impossibile importare il design system a causa di un errore interno. Riprova.',
+  'settings.designSystemsImportErrorDetails': 'Dettagli',
   'settings.designSystemsCategory': 'Categoria',
   'settings.designSystemsAllCategories': 'Tutte le categorie',
   'settings.designSystemsShowInHomeGallery': 'Mostra nella galleria iniziale',

apps/web/src/i18n/locales/ja.ts

@@ -3430,6 +3430,9 @@ export const ja: Dict = {
   'settings.designSystemsImportProject': 'プロジェクトからインポート',
   'settings.designSystemsImportedStatus': '{title} をインポートしました',
   'settings.designSystemsViewImported': 'インポートしたデザインシステムを表示',
+  'settings.designSystemsImportErrorInvalid': 'デザインシステムをインポートできませんでした。パスまたはURLを確認して、もう一度お試しください。',
+  'settings.designSystemsImportErrorInternal': '内部エラーのため、デザインシステムをインポートできませんでした。もう一度お試しください。',
+  'settings.designSystemsImportErrorDetails': '詳細',
   'settings.designSystemsCategory': 'カテゴリー',
   'settings.designSystemsAllCategories': 'すべてのカテゴリー',
   'settings.designSystemsShowInHomeGallery': 'ホームギャラリーに表示',

apps/web/src/i18n/locales/ko.ts

@@ -3430,6 +3430,9 @@ export const ko: Dict = {
   'settings.designSystemsImportProject': '프로젝트에서 가져오기',
   'settings.designSystemsImportedStatus': '{title} 가져옴',
   'settings.designSystemsViewImported': '가져온 디자인 시스템 보기',
+  'settings.designSystemsImportErrorInvalid': '디자인 시스템을 가져올 수 없습니다. 경로 또는 URL을 확인하고 다시 시도하세요.',
+  'settings.designSystemsImportErrorInternal': '낸부 오류로 인해 디자인 시스템을 가져올 수 없습니다. 다시 시도하세요.',
+  'settings.designSystemsImportErrorDetails': '세부 정보',
   'settings.designSystemsCategory': '카테고리',
   'settings.designSystemsAllCategories': '모든 카테고리',
   'settings.designSystemsShowInHomeGallery': '홈 갤러리에 표시',

apps/web/src/i18n/locales/pl.ts

@@ -3430,6 +3430,9 @@ export const pl: Dict = {
   'settings.designSystemsImportProject': 'Importuj z projektu',
   'settings.designSystemsImportedStatus': 'Zaimportowano {title}',
   'settings.designSystemsViewImported': 'Pokaż zaimportowany system projektowy',
+  'settings.designSystemsImportErrorInvalid': 'Nie można zaimportować systemu projektowego. Sprawdź ścieżkę lub adres URL i spróbuj ponownie.',
+  'settings.designSystemsImportErrorInternal': 'Nie można zaimportować systemu projektowego z powodu błędu wewnętrznego. Spróbuj ponownie.',
+  'settings.designSystemsImportErrorDetails': 'Szczegóły',
   'settings.designSystemsCategory': 'Kategoria',
   'settings.designSystemsAllCategories': 'Wszystkie kategorie',
   'settings.designSystemsShowInHomeGallery': 'Pokaż w galerii głównej',

apps/web/src/i18n/locales/pt-BR.ts

@@ -3430,6 +3430,9 @@ export const ptBR: Dict = {
   'settings.designSystemsImportProject': 'Importar do projeto',
   'settings.designSystemsImportedStatus': '{title} importado',
   'settings.designSystemsViewImported': 'Ver design system importado',
+  'settings.designSystemsImportErrorInvalid': 'Não foi possível importar o design system. Verifique o caminho ou a URL e tente novamente.',
+  'settings.designSystemsImportErrorInternal': 'Não foi possível importar o design system devido a um erro interno. Tente novamente.',
+  'settings.designSystemsImportErrorDetails': 'Detalhes',
   'settings.designSystemsCategory': 'Categoria',
   'settings.designSystemsAllCategories': 'Todas as categorias',
   'settings.designSystemsShowInHomeGallery': 'Mostrar na galeria inicial',

apps/web/src/i18n/locales/ru.ts

@@ -3430,6 +3430,9 @@ export const ru: Dict = {
   'settings.designSystemsImportProject': 'Импортировать из проекта',
   'settings.designSystemsImportedStatus': 'Импортировано: {title}',
   'settings.designSystemsViewImported': 'Открыть импортированную дизайн-систему',
+  'settings.designSystemsImportErrorInvalid': 'Не удалось импортировать дизайн-систему. Проверьте путь или URL и попробуйте снова.',
+  'settings.designSystemsImportErrorInternal': 'Не удалось импортировать дизайн-систему из-за внутренней ошибки. Попробуйте снова.',
+  'settings.designSystemsImportErrorDetails': 'Подробности',
   'settings.designSystemsCategory': 'Категория',
   'settings.designSystemsAllCategories': 'Все категории',
   'settings.designSystemsShowInHomeGallery': 'Показывать в домашней галерее',

apps/web/src/i18n/locales/th.ts

@@ -3430,6 +3430,9 @@ export const th: Dict = {
   'settings.designSystemsImportProject': 'นำเข้าจากโปรเจกต์',
   'settings.designSystemsImportedStatus': 'นำเข้า {title} แล้ว',
   'settings.designSystemsViewImported': 'ดูระบบออกแบบที่นำเข้า',
+  'settings.designSystemsImportErrorInvalid': 'ไม่สามารถนำเข้าระบบออกแบบได้ ตรวจสอบเส้นทางหรือ URL แล้วลองอีกครั้ง',
+  'settings.designSystemsImportErrorInternal': 'ไม่สามารถนำเข้าระบบออกแบบได้เนื่องจากข้อผิดพลาดภายใน โปรดลองอีกครั้ง',
+  'settings.designSystemsImportErrorDetails': 'รายละเอียด',
   'settings.designSystemsCategory': 'หมวดหมู่',
   'settings.designSystemsAllCategories': 'ทุกหมวดหมู่',
   'settings.designSystemsShowInHomeGallery': 'แสดงในแกลเลอรีหน้าแรก',

apps/web/src/i18n/locales/tr.ts

@@ -3430,6 +3430,9 @@ export const tr: Dict = {
   'settings.designSystemsImportProject': 'Projeden içe aktar',
   'settings.designSystemsImportedStatus': '{title} içe aktarıldı',
   'settings.designSystemsViewImported': 'İçe aktarılan tasarım sistemini görüntüle',
+  'settings.designSystemsImportErrorInvalid': 'Tasarım sistemi içe aktarılamadı. Yolu veya URL\'yi kontrol edip tekrar deneyin.',
+  'settings.designSystemsImportErrorInternal': 'Dahili bir hata nedeniyle tasarım sistemi içe aktarılamadı. Lütfen tekrar deneyin.',
+  'settings.designSystemsImportErrorDetails': 'Ayrıntılar',
   'settings.designSystemsCategory': 'Kategori',
   'settings.designSystemsAllCategories': 'Tüm kategoriler',
   'settings.designSystemsShowInHomeGallery': 'Ana galeride göster',

apps/web/src/i18n/locales/uk.ts

@@ -3430,6 +3430,9 @@ export const uk: Dict = {
   'settings.designSystemsImportProject': 'Імпортувати з проєкту',
   'settings.designSystemsImportedStatus': 'Імпортовано {title}',
   'settings.designSystemsViewImported': 'Переглянути імпортовану дизайн-систему',
+  'settings.designSystemsImportErrorInvalid': 'Не вдалося імпортувати дизайн-систему. Перевірте шлях або URL і спробуйте ще раз.',
+  'settings.designSystemsImportErrorInternal': 'Не вдалося імпортувати дизайн-систему через внутрішню помилку. Спробуйте ще раз.',
+  'settings.designSystemsImportErrorDetails': 'Деталі',
   'settings.designSystemsCategory': 'Категорія',
   'settings.designSystemsAllCategories': 'Усі категорії',
   'settings.designSystemsShowInHomeGallery': 'Показувати в домашній галереї',

apps/web/src/i18n/locales/zh-CN.ts

@@ -3682,6 +3682,9 @@ export const zhCN: Dict = {
   "settings.designSystemsImportProject": "从项目导入",
   "settings.designSystemsImportedStatus": "已导入 {title}",
   "settings.designSystemsViewImported": "查看导入的设计系统",
+  "settings.designSystemsImportErrorInvalid": "无法导入设计系统。请检查路径或 URL 后重试。",
+  "settings.designSystemsImportErrorInternal": "由于内部错误，无法导入设计系统。请重试。",
+  "settings.designSystemsImportErrorDetails": "详细信息",
   "settings.designSystemsCategory": "分类",
   "settings.designSystemsAllCategories": "所有分类",
   "settings.designSystemsShowInHomeGallery": "在首页 Gallery 中显示",

apps/web/src/i18n/locales/zh-TW.ts

@@ -3691,6 +3691,9 @@ export const zhTW: Dict = {
   "settings.designSystemsImportProject": "從專案匯入",
   "settings.designSystemsImportedStatus": "已匯入 {title}",
   "settings.designSystemsViewImported": "查看匯入的設計系統",
+  "settings.designSystemsImportErrorInvalid": "無法匯入設計系統。請檢查路徑或 URL 後重試。",
+  "settings.designSystemsImportErrorInternal": "由於內部錯誤，無法匯入設計系統。請重試。",
+  "settings.designSystemsImportErrorDetails": "詳細資訊",
   "settings.designSystemsCategory": "分類",
   "settings.designSystemsAllCategories": "所有分類",
   "settings.designSystemsShowInHomeGallery": "在首頁 Gallery 中顯示",

apps/web/src/i18n/types.ts

@@ -603,6 +603,9 @@ export interface Dict {
   'settings.designSystemsImportProject': string;
   'settings.designSystemsImportedStatus': string;
   'settings.designSystemsViewImported': string;
+  'settings.designSystemsImportErrorInvalid': string;
+  'settings.designSystemsImportErrorInternal': string;
+  'settings.designSystemsImportErrorDetails': string;
   'settings.designSystemsCategory': string;
   'settings.designSystemsAllCategories': string;
   'settings.designSystemsShowInHomeGallery': string;

apps/web/src/runtime/design-system-import-error.ts

@@ -0,0 +1,18 @@
+/**
+ * Maps a daemon design-system-import error code to its i18n key.
+ *
+ * The daemon returns `{ error: { code, message } }` where `message` is
+ * always English. This helper lets the UI show a localized summary for
+ * known codes while keeping the raw detail (paths, URLs) under a
+ * <details> disclosure.
+ *
+ * Returns `null` for unknown or missing codes — the caller should fall
+ * back to the raw `error.message` (pre-#2686 behavior).
+ */
+export function designSystemImportErrorKey(
+  error: { code?: string },
+): 'settings.designSystemsImportErrorInvalid' | 'settings.designSystemsImportErrorInternal' | null {
+  if (error.code === 'INTERNAL_ERROR') return 'settings.designSystemsImportErrorInternal';
+  if (error.code === 'BAD_REQUEST') return 'settings.designSystemsImportErrorInvalid';
+  return null;
+}