@agent-native/core 0.96.0 → 0.98.0

package/corpus/templates/slides/app/components/editor/ImageDropPromptPopover.tsx

@@ -2,10 +2,10 @@ import { appBasePath, sendToAgentChat, useT } from "@agent-native/core/client";
 import { IconLoader2, IconX } from "@tabler/icons-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { toast } from "@/hooks/use-toast";
 import {
   buildImageDropAgentPayload,
   readFileAsDataUrl,
@@ -169,16 +169,13 @@ export default function ImageDropPromptPopover({
       }
 
       onClose();
-      toast({
-        title: t("raw.sentToAgent"),
+      toast.success(t("raw.sentToAgent"), {
         description: file.name,
       });
     } catch (err) {
-      toast({
-        title: t("raw.imageUploadFailed"),
+      toast.error(t("raw.imageUploadFailed"), {
         description:
           err instanceof Error ? err.message : t("raw.imageUploadGenericError"),
-        variant: "destructive",
       });
     } finally {
       setUploading(false);

package/corpus/templates/slides/app/components/editor/PromptDialog.tsx

@@ -1,8 +1,7 @@
 import { appBasePath, PromptComposer, useT } from "@agent-native/core/client";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
-
-import { toast } from "@/hooks/use-toast";
+import { toast } from "sonner";
 
 import { GoogleDocImportHint } from "./GoogleDocImportHint";
 
@@ -151,13 +150,11 @@ export default function PromptPopover({
         const uploaded = await uploadFiles(files);
         onSubmit(enrichedText, uploaded);
       } catch (error) {
-        toast({
-          title: t("raw.uploadFailed"),
+        toast.error(t("raw.uploadFailed"), {
           description:
             error instanceof Error
               ? error.message
               : t("raw.uploadAttachedFailed"),
-          variant: "destructive",
         });
       }
     },

package/corpus/templates/slides/app/components/presentation/PresentationView.tsx

@@ -515,8 +515,10 @@ export default function PresentationView({
           <div
             className="h-full bg-[#609FF8]"
             style={{
-              width: `${((currentIndex + 1) / safeSlides.length) * 100}%`,
-              transition: "width 0.3s",
+              transform: `scaleX(${(currentIndex + 1) / safeSlides.length})`,
+              transformOrigin: "left",
+              transition: "transform 0.3s cubic-bezier(0.2, 0, 0, 1)",
+              width: "100%",
             }}
           />
         </div>

package/corpus/templates/slides/app/components/visual-editor/CanvasCommentPins.tsx

@@ -271,8 +271,9 @@ export function CanvasCommentPins({
       console.error("[CanvasCommentPins] failed to send to agent:", err);
     }
     updatePin(pin.id, { submitted: true });
-    // Auto-clear after a short delay so the user sees the pin "fly away"
-    setTimeout(() => removePin(pin.id), 1500);
+    // Keep the acknowledgement visible just long enough to register, without
+    // making a routine submit feel delayed.
+    setTimeout(() => removePin(pin.id), 220);
   };
 
   if (!active && pins.length === 0) return null;
@@ -313,7 +314,7 @@ export function CanvasCommentPins({
             className={cn(
               "fixed z-[55]",
               pin.submitted &&
-                "transition-all duration-1000 opacity-0 -translate-y-4",
+                "-translate-y-2 opacity-0 transition-[transform,opacity] duration-200 ease-out motion-reduce:translate-y-0 motion-reduce:duration-150",
             )}
             style={{ left, top }}
           >

package/corpus/templates/slides/app/context/DeckContext.tsx

@@ -134,6 +134,7 @@ export interface Deck {
 interface DeckContextType {
   decks: Deck[];
   loading: boolean;
+  loadError: boolean;
   createDeck: (
     title?: string,
     options?: { noDefaultSlides?: boolean; designSystemId?: string | null },
@@ -708,6 +709,36 @@ async function fetchDecksFromAPI(): Promise<Deck[] | null> {
   }
 }
 
+/**
+ * Fetch a minimal id-only deck listing (`light: "true"`) for cheap add/remove
+ * diffing. Never downloads deck bodies — see `list-decks.ts`. Returns `null`
+ * on any failure so callers can skip the diff instead of wiping local state.
+ */
+async function fetchDeckListLightFromAPI(): Promise<{ id: string }[] | null> {
+  try {
+    const result = await callAction<DeckListActionResult>(
+      "list-decks",
+      { light: "true" },
+      { method: "GET" },
+    );
+    if (!Array.isArray(result?.decks)) {
+      console.warn("Failed to fetch deck list: invalid action response");
+      return null;
+    }
+    return result.decks
+      .filter(
+        (deck): deck is { id: string } =>
+          !!deck &&
+          typeof deck === "object" &&
+          typeof (deck as { id?: unknown }).id === "string",
+      )
+      .map((deck) => ({ id: deck.id }));
+  } catch (err) {
+    console.error("Failed to fetch deck list:", err);
+    return null;
+  }
+}
+
 async function fetchDeckFromAPI(id: string): Promise<Deck | null> {
   try {
     const result = await callAction<unknown>(
@@ -919,6 +950,7 @@ export const defaultSlideContent: Record<SlideLayout, string> = {
 export function DeckProvider({ children }: { children: ReactNode }) {
   const [decks, setDecks] = useState<Deck[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState(false);
   const decksRef = useRef<Deck[]>([]);
 
   // Per-user inverse-op undo/redo. `canUndo`/`canRedo` are React state kept in
@@ -1070,29 +1102,43 @@ export function DeckProvider({ children }: { children: ReactNode }) {
   // Re-fetch the deck list and diff it against local state (added/removed
   // decks). Shared by the fallback poll and the SSE resync-on-reconnect path
   // below so both pull from one implementation of "what changed".
+  //
+  // Uses the `light` (id-only) listing — this runs every 15s and previously
+  // downloaded every deck's full slide JSON just to diff ids, even though
+  // existing decks' content was thrown away unused. Only genuinely NEW decks
+  // (rare — usually zero per poll) get a follow-up full fetch so DeckCard can
+  // still render an immediate preview for them.
   const refetchDeckListIfChanged = useCallback(async () => {
-    const fresh = await fetchDecksFromAPI();
+    const fresh = await fetchDeckListLightFromAPI();
     // A null result means the fetch failed (network error or non-2xx). Skip
     // the diff so we don't wipe local state on a transient failure.
     if (fresh === null) return;
+    setLoadError(false);
     const pending = pendingCreateIdsRef.current;
     const currentDecks = decksRef.current;
     const currentIds = new Set(currentDecks.map((d) => d.id));
     const freshIds = new Set(fresh.map((d) => d.id));
     // Check if deck list changed (added or removed). Optimistic decks still
     // in flight are preserved (not treated as removed).
-    const added = fresh.filter((d) => !currentIds.has(d.id));
+    const addedIds = fresh
+      .filter((d) => !currentIds.has(d.id))
+      .map((d) => d.id);
     const removed = currentDecks.filter(
       (d) => !freshIds.has(d.id) && !pending.has(d.id),
     );
-    if (added.length === 0 && removed.length === 0) return;
+    if (addedIds.length === 0 && removed.length === 0) return;
+
+    const addedDecks = (
+      await Promise.all(addedIds.map((id) => fetchDeckFromAPI(id)))
+    ).filter((d): d is Deck => d !== null);
+
     lastExternalUpdateRef.current = Date.now();
     setDecks((prev) => {
       const prevIds = new Set(prev.map((d) => d.id));
       // Only add decks that aren't already in prev (prevents duplicates when
       // the closure's deck snapshot is stale compared to `prev`).
       let next = prev.filter((d) => freshIds.has(d.id) || pending.has(d.id));
-      for (const a of added) {
+      for (const a of addedDecks) {
         if (!prevIds.has(a.id)) next = [...next, a];
       }
       return next;
@@ -1188,10 +1234,14 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       requestedOpenDeckId !== currentOpenDeckIdFromWindow() ||
       loaded === null
     ) {
+      if (requestId === deckBaselineRequestIdRef.current) {
+        setLoadError(loaded === null);
+      }
       return;
     }
     lastExternalUpdateRef.current = Date.now();
     resetDeckBaseline(loaded);
+    setLoadError(false);
   }, [resetDeckBaseline]);
 
   // Load decks from API on mount
@@ -1212,6 +1262,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       const initial = loaded ?? [];
       lastExternalUpdateRef.current = Date.now(); // Don't save initial load back
       resetDeckBaseline(initial);
+      setLoadError(loaded === null);
       setLoading(false);
     });
   }, [resetDeckBaseline]);
@@ -1969,6 +2020,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       value={{
         decks,
         loading,
+        loadError,
         createDeck,
         ensureDeckPersisted,
         duplicateDeck,

package/corpus/templates/slides/app/i18n/ar-SA.ts

@@ -331,6 +331,8 @@ const messages = {
     hideResolved: "إخفاء المحلول",
     showResolved: "إظهار {{count}} محلولة",
     noCommentsYet: "لا توجد تعليقات بعد",
+    loadFailed: "تعذر تحميل التعليقات",
+    retry: "إعادة المحاولة",
     clickToAddComment: "انقر لإضافة تعليق",
     selectSlideToAdd: "حدد شريحة لإضافة تعليق",
   },
@@ -561,6 +563,10 @@ const messages = {
     chooseAnotherFile: "اختيار ملف آخر",
   },
   home: {
+    loadFailed: "تعذر تحميل المحتوى",
+    loadFailedDescription:
+      "لا يزال المحتوى المحفوظ متاحًا. تحقق من الاتصال وأعد المحاولة.",
+    retry: "إعادة المحاولة",
     decksTitle: "العروض",
     newDeck: "عرض جديد",
     deckLengthQuestion: "ما طول هذا العرض؟",

package/corpus/templates/slides/app/i18n/de-DE.ts

@@ -334,6 +334,8 @@ const messages = {
     hideResolved: "Gelöste ausblenden",
     showResolved: "{{count}} gelöste anzeigen",
     noCommentsYet: "Noch keine Kommentare",
+    loadFailed: "Kommentare konnten nicht geladen werden",
+    retry: "Erneut versuchen",
     clickToAddComment: "Klicken, um einen Kommentar hinzuzufügen",
     selectSlideToAdd: "Wähle eine Folie aus, um einen hinzuzufügen",
   },
@@ -555,6 +557,10 @@ const messages = {
     chooseAnotherFile: "Andere Datei wählen",
   },
   home: {
+    loadFailed: "Inhalte konnten nicht geladen werden",
+    loadFailedDescription:
+      "Ihre gespeicherten Inhalte sind weiterhin verfügbar. Prüfen Sie die Verbindung und versuchen Sie es erneut.",
+    retry: "Erneut versuchen",
     decksTitle: "Decks",
     newDeck: "Neues Deck",
     deckLengthQuestion: "Wie lang soll dieses Deck sein?",

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -329,6 +329,8 @@ const messages = {
     hideResolved: "Hide resolved",
     showResolved: "Show {{count}} resolved",
     noCommentsYet: "No comments yet",
+    loadFailed: "Couldn't load comments",
+    retry: "Retry",
     clickToAddComment: "Click to add a comment",
     selectSlideToAdd: "Select a slide to add one",
   },
@@ -545,6 +547,10 @@ const messages = {
     chooseAnotherFile: "Choose another file",
   },
   home: {
+    loadFailed: "Couldn't load your content",
+    loadFailedDescription:
+      "Your saved content is still available. Check the connection and try again.",
+    retry: "Retry",
     decksTitle: "Decks",
     newDeck: "New Deck",
     deckLengthQuestion: "How long should this deck be?",

package/corpus/templates/slides/app/i18n/es-ES.ts

@@ -336,6 +336,8 @@ const messages = {
     hideResolved: "Ocultar resueltos",
     showResolved: "Mostrar {{count}} resueltos",
     noCommentsYet: "Aún no hay comentarios",
+    loadFailed: "No se pudieron cargar los comentarios",
+    retry: "Reintentar",
     clickToAddComment: "Haz clic para añadir un comentario",
     selectSlideToAdd: "Selecciona una diapositiva para añadir uno",
   },
@@ -561,6 +563,10 @@ const messages = {
     chooseAnotherFile: "Elegir otro archivo",
   },
   home: {
+    loadFailed: "No se pudo cargar el contenido",
+    loadFailedDescription:
+      "El contenido guardado sigue disponible. Comprueba la conexión e inténtalo de nuevo.",
+    retry: "Reintentar",
     decksTitle: "Decks",
     newDeck: "Nuevo deck",
     deckLengthQuestion: "¿Qué longitud debe tener este deck?",

package/corpus/templates/slides/app/i18n/fr-FR.ts

@@ -340,6 +340,8 @@ const messages = {
     hideResolved: "Masquer les résolus",
     showResolved: "Afficher {{count}} résolus",
     noCommentsYet: "Aucun commentaire pour le moment",
+    loadFailed: "Impossible de charger les commentaires",
+    retry: "Réessayer",
     clickToAddComment: "Cliquez pour ajouter un commentaire",
     selectSlideToAdd: "Sélectionnez une diapositive pour en ajouter un",
   },
@@ -565,6 +567,10 @@ const messages = {
     chooseAnotherFile: "Choisir un autre fichier",
   },
   home: {
+    loadFailed: "Impossible de charger votre contenu",
+    loadFailedDescription:
+      "Votre contenu enregistré est toujours disponible. Vérifiez la connexion et réessayez.",
+    retry: "Réessayer",
     decksTitle: "Decks",
     newDeck: "Nouveau deck",
     deckLengthQuestion: "Quelle longueur doit faire ce deck ?",

package/corpus/templates/slides/app/i18n/hi-IN.ts

@@ -327,6 +327,8 @@ const messages = {
     hideResolved: "हल किए गए छिपाएं",
     showResolved: "{{count}} हल किए गए दिखाएं",
     noCommentsYet: "अभी कोई टिप्पणी नहीं",
+    loadFailed: "टिप्पणियाँ लोड नहीं हो सकीं",
+    retry: "फिर कोशिश करें",
     clickToAddComment: "टिप्पणी जोड़ने के लिए क्लिक करें",
     selectSlideToAdd: "एक टिप्पणी जोड़ने के लिए स्लाइड चुनें",
   },
@@ -539,6 +541,10 @@ const messages = {
     chooseAnotherFile: "दूसरी फ़ाइल चुनें",
   },
   home: {
+    loadFailed: "आपका कॉन्टेंट लोड नहीं हो सका",
+    loadFailedDescription:
+      "आपका सहेजा गया कॉन्टेंट अभी भी उपलब्ध है। कनेक्शन जाँचें और फिर कोशिश करें।",
+    retry: "फिर कोशिश करें",
     decksTitle: "डेक",
     newDeck: "नया डेक",
     deckLengthQuestion: "यह डेक कितना लंबा होना चाहिए?",

package/corpus/templates/slides/app/i18n/ja-JP.ts

@@ -331,6 +331,8 @@ const messages = {
     hideResolved: "解決済みを非表示",
     showResolved: "{{count}} 件の解決済みを表示",
     noCommentsYet: "まだコメントはありません",
+    loadFailed: "コメントを読み込めませんでした",
+    retry: "再試行",
     clickToAddComment: "クリックしてコメントを追加",
     selectSlideToAdd: "追加するにはスライドを選択してください",
   },
@@ -541,6 +543,10 @@ const messages = {
     chooseAnotherFile: "別のファイルを選択",
   },
   home: {
+    loadFailed: "コンテンツを読み込めませんでした",
+    loadFailedDescription:
+      "保存済みのコンテンツはそのままです。接続を確認して再試行してください。",
+    retry: "再試行",
     decksTitle: "デッキ",
     newDeck: "新しいデッキ",
     deckLengthQuestion: "このデッキの長さはどれくらいにしますか？",

package/corpus/templates/slides/app/i18n/ko-KR.ts

@@ -329,6 +329,8 @@ const messages = {
     hideResolved: "해결됨 숨기기",
     showResolved: "해결됨 {{count}}개 표시",
     noCommentsYet: "아직 댓글 없음",
+    loadFailed: "댓글을 불러올 수 없습니다",
+    retry: "다시 시도",
     clickToAddComment: "클릭하여 댓글 추가",
     selectSlideToAdd: "추가하려면 슬라이드를 선택하세요",
   },
@@ -536,6 +538,10 @@ const messages = {
     chooseAnotherFile: "다른 파일 선택",
   },
   home: {
+    loadFailed: "콘텐츠를 불러올 수 없습니다",
+    loadFailedDescription:
+      "저장된 콘텐츠는 그대로 있습니다. 연결을 확인하고 다시 시도하세요.",
+    retry: "다시 시도",
     decksTitle: "덱",
     newDeck: "새 덱",
     deckLengthQuestion: "이 덱은 얼마나 길어야 하나요?",

package/corpus/templates/slides/app/i18n/pt-BR.ts

@@ -331,6 +331,8 @@ const messages = {
     hideResolved: "Ocultar resolvidos",
     showResolved: "Mostrar {{count}} resolvidos",
     noCommentsYet: "Ainda não há comentários",
+    loadFailed: "Não foi possível carregar os comentários",
+    retry: "Tentar novamente",
     clickToAddComment: "Clique para adicionar um comentário",
     selectSlideToAdd: "Selecione um slide para adicionar um",
   },
@@ -556,6 +558,10 @@ const messages = {
     chooseAnotherFile: "Escolher outro arquivo",
   },
   home: {
+    loadFailed: "Não foi possível carregar seu conteúdo",
+    loadFailedDescription:
+      "Seu conteúdo salvo continua disponível. Verifique a conexão e tente novamente.",
+    retry: "Tentar novamente",
     decksTitle: "Decks",
     newDeck: "Novo deck",
     deckLengthQuestion: "Qual deve ser o tamanho deste deck?",

package/corpus/templates/slides/app/i18n/zh-CN.ts

@@ -325,6 +325,8 @@ const messages = {
     hideResolved: "隐藏已解决",
     showResolved: "显示 {{count}} 条已解决",
     noCommentsYet: "还没有评论",
+    loadFailed: "无法加载评论",
+    retry: "重试",
     clickToAddComment: "点击添加评论",
     selectSlideToAdd: "选择幻灯片以添加评论",
   },
@@ -531,6 +533,9 @@ const messages = {
     chooseAnotherFile: "选择其他文件",
   },
   home: {
+    loadFailed: "无法加载内容",
+    loadFailedDescription: "您保存的内容仍然可用。请检查连接并重试。",
+    retry: "重试",
     decksTitle: "幻灯片",
     newDeck: "新建幻灯片",
     deckLengthQuestion: "这份幻灯片需要多长？",

package/corpus/templates/slides/app/i18n/zh-TW.ts

@@ -320,6 +320,8 @@ const messages = {
     hideResolved: "隱藏已解決",
     showResolved: "顯示 {{count}} 條已解決",
     noCommentsYet: "還沒有評論",
+    loadFailed: "無法載入評論",
+    retry: "重試",
     clickToAddComment: "點選新增評論",
     selectSlideToAdd: "選取幻燈片以新增評論",
   },
@@ -526,6 +528,9 @@ const messages = {
     chooseAnotherFile: "選取其他檔案",
   },
   home: {
+    loadFailed: "無法載入內容",
+    loadFailedDescription: "您儲存的內容仍然可用。請檢查連線並重試。",
+    retry: "重試",
     decksTitle: "幻燈片",
     newDeck: "新建幻燈片",
     deckLengthQuestion: "這份幻燈片需要多長？",

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -35,6 +35,7 @@ import {
 } from "react";
 import type { ComponentType } from "react";
 import { useParams, useSearchParams, useNavigate } from "react-router";
+import { toast } from "sonner";
 
 import { SlideCommentsPanel } from "@/components/comments/SlideCommentsPanel";
 import { AnimationsPanel } from "@/components/editor/AnimationsPanel";
@@ -51,7 +52,6 @@ import { QuestionFlow } from "@/components/editor/QuestionFlow";
 import SlideEditor from "@/components/editor/SlideEditor";
 import { TweaksPanel } from "@/components/editor/TweaksPanel";
 import { Button } from "@/components/ui/button";
-import { ToastAction } from "@/components/ui/toast";
 import { useDecks } from "@/context/DeckContext";
 import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import { useDeckDesignSystem } from "@/hooks/use-deck-design-system";
@@ -61,7 +61,6 @@ import {
   useSlideComments,
   type CommentThread,
 } from "@/hooks/use-slide-comments";
-import { toast } from "@/hooks/use-toast";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 import { getPreset } from "@/lib/design-systems";
 import { exportDeckAsPdf } from "@/lib/export-pdf-client";
@@ -396,18 +395,15 @@ export default function DeckEditor() {
         if (updatedContent !== targetSlide.content) {
           updateSlide(id, targetSlide.id, { content: updatedContent });
         }
-        toast({
-          title: t("deckEditor.imageAdded"),
+        toast.success(t("deckEditor.imageAdded"), {
           description: file.name,
         });
       } catch (error) {
-        toast({
-          title: t("deckEditor.imageUploadFailed"),
+        toast.error(t("deckEditor.imageUploadFailed"), {
           description:
             error instanceof Error
               ? error.message
               : t("deckEditor.imageUploadError"),
-          variant: "destructive",
         });
       }
     },
@@ -482,25 +478,14 @@ export default function DeckEditor() {
         );
       })();
       deleteSlide(deckId, slideId);
-      const t = toast({
-        title: `${slideTitle} deleted`,
+      toast(`${slideTitle} deleted`, {
         description: `Press ${shortcutLabel("cmd+z")} or click Undo to restore.`,
-        action: (
-          <ToastAction
-            altText="Undo delete"
-            data-undo-button
-            onClick={() => {
-              undo();
-              t.dismiss();
-            }}
-          >
-            Undo
-          </ToastAction>
-        ),
+        duration: 6000,
+        action: {
+          label: "Undo",
+          onClick: () => undo(),
+        },
       });
-      // Auto-dismiss after 6 seconds (shadcn toast's TOAST_REMOVE_DELAY is
-      // intentionally enormous, so we trigger it manually).
-      setTimeout(() => t.dismiss(), 6000);
     },
     [deck, deleteSlide, undo],
   );
@@ -841,23 +826,19 @@ export default function DeckEditor() {
           try {
             const slideIds = deck.slides.map((s) => s.id);
             if (slideIds.length === 0) {
-              toast({
-                title: t("deckEditor.exportFailed"),
+              toast.error(t("deckEditor.exportFailed"), {
                 description: t("deckEditor.deckHasNoSlides"),
-                variant: "destructive",
               });
               return;
             }
             await exportDeckAsPdf(deck.title, slideIds, deck.aspectRatio);
           } catch (err) {
             console.error("[pdf-export] failed:", err);
-            toast({
-              title: t("deckEditor.exportFailed"),
+            toast.error(t("deckEditor.exportFailed"), {
               description:
                 err instanceof Error
                   ? err.message
                   : t("deckEditor.pdfRenderFailed"),
-              variant: "destructive",
             });
           }
         }}

package/corpus/templates/slides/app/pages/DesignSystems.tsx

@@ -3,7 +3,12 @@ import {
   useSetHeaderActions,
   useSetPageTitle,
 } from "@agent-native/toolkit/app-shell";
-import { IconPlus, IconPalette } from "@tabler/icons-react";
+import {
+  IconAlertTriangle,
+  IconPalette,
+  IconPlus,
+  IconRefresh,
+} from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 
 import { DesignSystemCard } from "@/components/design-system/DesignSystemCard";
@@ -15,7 +20,7 @@ import type { DesignSystemData } from "../../shared/api";
 
 export default function DesignSystems() {
   const t = useT();
-  const { designSystems, isLoading, refetch } = useDesignSystems();
+  const { designSystems, isLoading, error, refetch } = useDesignSystems();
   const [showSetup, setShowSetup] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
 
@@ -97,6 +102,22 @@ export default function DesignSystems() {
               ))}
             </div>
           </>
+        ) : error ? (
+          <div className="flex min-h-[360px] items-center justify-center">
+            <div className="flex max-w-sm flex-col items-center gap-3 text-center">
+              <IconAlertTriangle className="size-7 text-destructive/70" />
+              <div>
+                <h2 className="font-medium">{t("home.loadFailed")}</h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {t("home.loadFailedDescription")}
+                </p>
+              </div>
+              <Button variant="outline" onClick={() => void refetch()}>
+                <IconRefresh className="size-4" />
+                {t("home.retry")}
+              </Button>
+            </div>
+          </div>
         ) : designSystems.length === 0 ? (
           <EmptyState
             onCreateNew={() => {