@agent-native/core 0.96.0 → 0.98.0

package/corpus/templates/slides/.agents/skills/frontend-design/SKILL.md

@@ -48,7 +48,7 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 
 - **Typography**: Use the product's existing type system first. For net-new public pages, choose characterful but readable type and keep sizing appropriate to the surface.
 - **Color and theme**: Use semantic tokens and CSS variables. Avoid one-note palettes and default purple/blue gradients unless the brand demands them.
-- **Motion**: Prefer purposeful transitions and small state changes. Use CSS transitions/keyframes unless the app already uses a motion library.
+- **Motion**: Prefer purposeful transitions and small state changes. Use CSS transitions/keyframes unless the app already uses a motion library. Never `transition-all` — list the properties that actually change (e.g. `transition-[opacity,transform]`). Use the shared easing tokens defined in `packages/core/src/styles/agent-native.css` instead of hand-typing curves: `var(--ease-drawer)` (260ms, drawers/app chrome), `var(--ease-collapse)` (200ms, expand/collapse), `var(--ease-out-strong)` (snappy entrances) — in Tailwind, `ease-[var(--ease-collapse)]`. Enter/exit with ease-out, never `ease-in`. Overlays that zoom in must set the Radix origin var (e.g. `origin-[--radix-popover-content-transform-origin]`). Animate `transform`/`opacity`, not width/height/padding/box-shadow. Gate looping or large-movement animations with `motion-reduce:`. Command palettes and keyboard-triggered actions get no animation.
 - **Composition**: Match the workflow. Operational apps should be dense and scannable; marketing or portfolio pages can be more immersive.
 - **Visual assets**: Websites, games, and object-focused pages need real or generated media when images help users understand the subject.
 - **Responsive fit**: Text must not overflow buttons, cards, tabs, sidebars, or fixed-format tools. Use stable dimensions for boards, grids, toolbars, and counters.

package/corpus/templates/slides/actions/delete-slide-comment.ts

@@ -0,0 +1,49 @@
+import { defineAction } from "@agent-native/core";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
+import { assertAccess } from "@agent-native/core/sharing";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+
+export default defineAction({
+  description:
+    "Delete a slide comment. Authors can delete their own comments; otherwise editor access is required.",
+  schema: z.object({
+    id: z.string().describe("Comment ID"),
+    deckId: z.string().optional().describe("Deck ID"),
+  }),
+  run: async (args) => {
+    const db = getDb();
+    const [comment] = await db
+      .select({
+        deckId: schema.slideComments.deckId,
+        authorEmail: schema.slideComments.authorEmail,
+      })
+      .from(schema.slideComments)
+      .where(eq(schema.slideComments.id, args.id))
+      .limit(1);
+
+    if (!comment || (args.deckId && comment.deckId !== args.deckId)) {
+      throw new Error(`Comment not found: ${args.id}`);
+    }
+
+    const userEmail = getRequestUserEmail();
+    if (comment.authorEmail === userEmail) {
+      await assertAccess("deck", comment.deckId, "viewer");
+    } else {
+      await assertAccess("deck", comment.deckId, "editor");
+    }
+
+    await db
+      .delete(schema.slideComments)
+      .where(
+        and(
+          eq(schema.slideComments.id, args.id),
+          eq(schema.slideComments.deckId, comment.deckId),
+        ),
+      );
+
+    return { ok: true };
+  },
+});

package/corpus/templates/slides/actions/list-decks.ts

@@ -23,6 +23,14 @@ export default defineAction({
       .enum(["true", "false"])
       .optional()
       .describe("Set to 'true' for full frontend deck payloads"),
+    light: z
+      .enum(["true", "false"])
+      .optional()
+      .describe(
+        "Set to 'true' for a minimal id/title/updatedAt/visibility listing " +
+          "used for cheap add/remove diffing (e.g. background polling). " +
+          "Never reads the deck body — no slides, no slideCount.",
+      ),
     createdBy: z
       .enum(["all", "me"])
       .optional()
@@ -56,6 +64,26 @@ export default defineAction({
       args.createdBy === "me" && ownerEmail
         ? and(visibleDecks, eq(schema.decks.ownerEmail, ownerEmail))
         : visibleDecks;
+
+    if (args.light === "true") {
+      // Column-projected listing for cheap add/remove diffing (the client's
+      // background poll and SSE-reconnect resync). The `data` column holds
+      // each deck's entire slide JSON and can be large — never select it
+      // here. Callers that need slide content use `includeSlides: "true"` or
+      // fetch the specific deck via `get-deck`.
+      const rows = await db
+        .select({
+          id: schema.decks.id,
+          title: schema.decks.title,
+          updatedAt: schema.decks.updatedAt,
+          visibility: schema.decks.visibility,
+        })
+        .from(schema.decks)
+        .where(where)
+        .orderBy(desc(schema.decks.updatedAt));
+      return { count: rows.length, decks: rows };
+    }
+
     const rows = await db
       .select()
       .from(schema.decks)

package/corpus/templates/slides/actions/update-slide-comment.ts

@@ -0,0 +1,93 @@
+import { defineAction } from "@agent-native/core";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
+import { assertAccess } from "@agent-native/core/sharing";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+
+export default defineAction({
+  description:
+    "Update a slide comment. Resolving or reopening a comment applies to the full thread.",
+  schema: z.object({
+    id: z.string().describe("Comment ID"),
+    deckId: z.string().optional().describe("Deck ID"),
+    content: z.string().optional().describe("New comment text"),
+    resolved: z.coerce.boolean().optional().describe("Resolved state"),
+  }),
+  run: async (args) => {
+    const db = getDb();
+    const [comment] = await db
+      .select({
+        deckId: schema.slideComments.deckId,
+        threadId: schema.slideComments.threadId,
+        authorEmail: schema.slideComments.authorEmail,
+      })
+      .from(schema.slideComments)
+      .where(eq(schema.slideComments.id, args.id))
+      .limit(1);
+
+    if (!comment || (args.deckId && comment.deckId !== args.deckId)) {
+      throw new Error(`Comment not found: ${args.id}`);
+    }
+
+    const userEmail = getRequestUserEmail();
+    // Resolving or reopening changes state for the whole thread (every
+    // author's comments), not just the caller's own row, so it always
+    // requires editor access — matching content's update-comment action.
+    if (
+      args.resolved === true ||
+      args.resolved === false ||
+      comment.authorEmail !== userEmail
+    ) {
+      await assertAccess("deck", comment.deckId, "editor");
+    } else {
+      await assertAccess("deck", comment.deckId, "viewer");
+    }
+
+    const updatedAt = new Date().toISOString();
+
+    if (args.resolved === true) {
+      await db
+        .update(schema.slideComments)
+        .set({ resolved: true, updatedAt })
+        .where(
+          and(
+            eq(schema.slideComments.deckId, comment.deckId),
+            eq(schema.slideComments.threadId, comment.threadId),
+          ),
+        );
+      return { ok: true, resolved: true };
+    }
+
+    if (args.resolved === false) {
+      await db
+        .update(schema.slideComments)
+        .set({ resolved: false, updatedAt })
+        .where(
+          and(
+            eq(schema.slideComments.deckId, comment.deckId),
+            eq(schema.slideComments.threadId, comment.threadId),
+          ),
+        );
+      return { ok: true, resolved: false };
+    }
+
+    // Both resolve and reopen return early above, so only content edits remain.
+    if (args.content === undefined) {
+      return { ok: true };
+    }
+
+    await db
+      .update(schema.slideComments)
+      .set({ content: args.content, updatedAt })
+      .where(
+        and(
+          eq(schema.slideComments.id, args.id),
+          eq(schema.slideComments.deckId, comment.deckId),
+        ),
+      );
+
+    return { ok: true };
+  },
+});

package/corpus/templates/slides/actions/view-screen.ts

@@ -222,8 +222,16 @@ export default defineAction({
     }
 
     // ─── List view: user is on the deck list ─────────────────────────────
+    // Project only the columns this summary reads. `decks.data` holds each
+    // deck's entire slide JSON and can be large — never select it for a
+    // plain list. Mirrors the light-mode projection in list-decks.ts; call
+    // list-decks or open a specific deck for slide counts / content.
     const rows = await db
-      .select()
+      .select({
+        id: schema.decks.id,
+        title: schema.decks.title,
+        ownerEmail: schema.decks.ownerEmail,
+      })
       .from(schema.decks)
       .where(accessFilter(schema.decks, schema.deckShares))
       .orderBy(desc(schema.decks.updatedAt));
@@ -257,12 +265,12 @@ export default defineAction({
       lines.push(`(no decks — use create-deck to make one)`);
     } else {
       for (const row of filteredRows) {
-        const data = JSON.parse(row.data);
-        const slideCount = Array.isArray(data?.slides) ? data.slides.length : 0;
-        lines.push(
-          `- id=${row.id}  title="${row.title ?? data?.title ?? "(untitled)"}"  slides=${slideCount}`,
-        );
+        lines.push(`- id=${row.id}  title="${row.title ?? "(untitled)"}"`);
       }
+      lines.push(``);
+      lines.push(
+        `(slide counts omitted here for performance — call list-decks or open a deck to see slide content)`,
+      );
     }
     return lines.join("\n");
   },

package/corpus/templates/slides/app/components/comments/SlideCommentsPanel.tsx

@@ -5,6 +5,8 @@ import {
   IconTrash,
   IconMessageCircle,
   IconChevronDown,
+  IconAlertTriangle,
+  IconRefresh,
 } from "@tabler/icons-react";
 import { useState, useRef, useEffect } from "react";
 
@@ -435,13 +437,15 @@ export function SlideCommentsPanel({
   onClose,
 }: SlideCommentsPanelProps) {
   const t = useT();
-  const { data: threads = [] } = useSlideComments(deckId, slideId);
+  const commentsQuery = useSlideComments(deckId, slideId);
+  const threads = commentsQuery.data ?? [];
   const [showResolved, setShowResolved] = useState(false);
   const [addingComment, setAddingComment] = useState(false);
 
   const activeThreads = threads.filter((t) => !t.resolved);
   const resolvedThreads = threads.filter((t) => t.resolved);
   const visibleThreads = showResolved ? threads : activeThreads;
+  const showLoadError = commentsQuery.isError && threads.length === 0;
 
   // When pending comment arrives, cancel any manual "add comment" mode
   useEffect(() => {
@@ -504,15 +508,33 @@ export function SlideCommentsPanel({
           />
         )}
 
+        {showLoadError && (
+          <div className="flex flex-col items-center gap-2 rounded-lg border border-dashed border-destructive/30 bg-destructive/5 px-3 py-8 text-center">
+            <IconAlertTriangle className="size-5 text-destructive/70" />
+            <p className="text-xs text-muted-foreground">
+              {t("comments.loadFailed")}
+            </p>
+            <button
+              type="button"
+              onClick={() => void commentsQuery.refetch()}
+              className="inline-flex h-7 items-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-accent"
+            >
+              <IconRefresh className="size-3.5" />
+              {t("comments.retry")}
+            </button>
+          </div>
+        )}
+
         {/* Thread list */}
-        {visibleThreads.map((thread) => (
-          <ThreadCard
-            key={thread.threadId}
-            thread={thread}
-            deckId={deckId ?? ""}
-            slideId={slideId ?? ""}
-          />
-        ))}
+        {!showLoadError &&
+          visibleThreads.map((thread) => (
+            <ThreadCard
+              key={thread.threadId}
+              thread={thread}
+              deckId={deckId ?? ""}
+              slideId={slideId ?? ""}
+            />
+          ))}
 
         {/* Resolved toggle */}
         {resolvedThreads.length > 0 && (
@@ -527,7 +549,8 @@ export function SlideCommentsPanel({
         )}
 
         {/* Empty state */}
-        {!showInput &&
+        {!showLoadError &&
+          !showInput &&
           visibleThreads.length === 0 &&
           (deckId && slideId ? (
             <button

package/corpus/templates/slides/app/components/deck/MermaidRenderer.tsx

@@ -1,32 +1,48 @@
 import DOMPurify from "dompurify";
-import mermaid from "mermaid";
 import { useEffect, useRef, useState } from "react";
 
-let initialized = false;
-let idCounter = 0;
+// `mermaid` pulls in d3 and its layout engine, which is a heavy chunk that
+// every deck view would otherwise ship even when no slide has a diagram.
+// Load it lazily and only once, the first time a mermaid slide actually
+// renders — mirrors the shiki lazy-load pattern in
+// packages/core/src/client/blocks/library/HighlightedCode.tsx.
+type MermaidModule = typeof import("mermaid");
 
-function initMermaid() {
-  if (initialized) return;
-  initialized = true;
-  mermaid.initialize({
-    startOnLoad: false,
-    securityLevel: "strict",
-    theme: "dark",
-    themeVariables: {
-      darkMode: true,
-      background: "transparent",
-      primaryColor: "#1a1a2e",
-      primaryTextColor: "#e0e0e0",
-      primaryBorderColor: "#00E5FF",
-      lineColor: "#00E5FF",
-      secondaryColor: "#16213e",
-      tertiaryColor: "#0f3460",
-      fontFamily: "Poppins, sans-serif",
-    },
-    flowchart: { curve: "basis" },
-  });
+let mermaidLoader: Promise<MermaidModule["default"]> | null = null;
+function loadMermaid(): Promise<MermaidModule["default"]> {
+  if (!mermaidLoader) {
+    mermaidLoader = import("mermaid")
+      .then((mod) => {
+        const mermaid = mod.default;
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: "strict",
+          theme: "dark",
+          themeVariables: {
+            darkMode: true,
+            background: "transparent",
+            primaryColor: "#1a1a2e",
+            primaryTextColor: "#e0e0e0",
+            primaryBorderColor: "#00E5FF",
+            lineColor: "#00E5FF",
+            secondaryColor: "#16213e",
+            tertiaryColor: "#0f3460",
+            fontFamily: "Poppins, sans-serif",
+          },
+          flowchart: { curve: "basis" },
+        });
+        return mermaid;
+      })
+      .catch((error) => {
+        mermaidLoader = null;
+        throw error;
+      });
+  }
+  return mermaidLoader;
 }
 
+let idCounter = 0;
+
 interface MermaidRendererProps {
   definition: string;
   className?: string;
@@ -42,13 +58,12 @@ export function MermaidRenderer({
 
   useEffect(() => {
     if (!definition.trim()) return;
-    initMermaid();
 
     let cancelled = false;
     const id = `mermaid-${++idCounter}`;
 
-    mermaid
-      .render(id, definition.trim())
+    loadMermaid()
+      .then((mermaid) => mermaid.render(id, definition.trim()))
       .then(({ svg: renderedSvg }) => {
         if (cancelled) return;
         // Mermaid 11.x runs DOMPurify internally with `securityLevel:"strict"`,

package/corpus/templates/slides/app/components/design-system/DesignSystemSetup.tsx

@@ -20,6 +20,7 @@ import {
   IconExternalLink,
 } from "@tabler/icons-react";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -33,7 +34,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Textarea } from "@/components/ui/textarea";
-import { toast } from "@/hooks/use-toast";
 
 import {
   MAX_BUILDER_INDEX_UPLOAD_BYTES,
@@ -305,12 +305,9 @@ export function DesignSystemSetup({
         customInstructions,
       });
       onComplete();
-      toast({ title: t("designSystemSetup.updated") });
+      toast.success(t("designSystemSetup.updated"));
     } catch {
-      toast({
-        title: t("designSystemSetup.updateFailed"),
-        variant: "destructive",
-      });
+      toast.error(t("designSystemSetup.updateFailed"));
     } finally {
       setGenerating(false);
     }
@@ -446,8 +443,7 @@ export function DesignSystemSetup({
 
     openAgentSidebar();
     sendToAgentChat({ message: parts.join("\n"), submit: true });
-    toast({
-      title: t("designSystemSetup.generationStarted"),
+    toast(t("designSystemSetup.generationStarted"), {
       description: t("designSystemSetup.generationStartedDescription"),
     });
     onComplete();

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

@@ -24,6 +24,7 @@ import {
 import { useState, useRef, useEffect } from "react";
 import { useCallback } from "react";
 import { createPortal } from "react-dom";
+import { toast } from "sonner";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import { GoogleDocImportHint } from "@/components/editor/GoogleDocImportHint";
@@ -35,7 +36,6 @@ import {
 } from "@/components/ui/tooltip";
 import type { Slide } from "@/context/DeckContext";
 import { useAgentGenerating } from "@/hooks/use-agent-generating";
-import { toast } from "@/hooks/use-toast";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 
 interface EditorSidebarProps {
@@ -215,7 +215,7 @@ function SortableSlideThumb({
         aria-label={t("editorSidebar.selectSlide", { number: index + 1 })}
         aria-current={isActive ? "true" : undefined}
         data-slide-thumbnail-id={slide.id}
-        className={`w-full text-left flex items-start gap-2 p-2 rounded-lg transition-all duration-150 ${
+        className={`w-full text-left flex items-start gap-2 p-2 rounded-lg transition-[background-color,box-shadow] duration-150 ${
           isActive ? "bg-accent ring-1 ring-[#609FF8]/50" : "hover:bg-accent"
         } focus:outline-none`}
       >
@@ -402,13 +402,11 @@ function AddSlidePopover({
           }
           uploaded = (await res.json()) as UploadedFile[];
         } catch (error) {
-          toast({
-            title: t("editorSidebar.uploadFailed"),
+          toast.error(t("editorSidebar.uploadFailed"), {
             description:
               error instanceof Error
                 ? error.message
                 : t("editorSidebar.uploadAttachedFileFailed"),
-            variant: "destructive",
           });
           return;
         }

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

@@ -42,6 +42,7 @@ import { useTheme } from "next-themes";
 import { useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { Link } from "react-router";
+import { toast } from "sonner";
 
 import {
   DropdownMenu,
@@ -58,7 +59,6 @@ import {
 import { SaveStatusIndicator } from "@/components/visual-editor";
 import type { Deck, Slide, SlideLayout } from "@/context/DeckContext";
 import { defaultSlideContent, useSaveState } from "@/context/DeckContext";
-import { toast } from "@/hooks/use-toast";
 import {
   ASPECT_RATIO_VALUES,
   type AspectRatio,
@@ -203,7 +203,7 @@ function ToolbarPopover({
   return createPortal(
     <div
       ref={menuRef}
-      className="fixed rounded-lg border border-border bg-popover shadow-xl z-[200] max-h-[80vh] overflow-y-auto"
+      className="fixed rounded-lg border border-border bg-popover shadow-xl z-[200] max-h-[80vh] overflow-y-auto animate-in fade-in-0 zoom-in-95 duration-150 origin-top-left"
       style={{ top: rect.bottom + 4, left, width: Math.min(width, vw - 16) }}
     >
       {children}
@@ -321,8 +321,7 @@ export default function EditorToolbar({
     const file = e.target.files?.[0];
     if (!file) return;
     setImporting(true);
-    toast({
-      title: t("editorToolbar.importingFile"),
+    toast(t("editorToolbar.importingFile"), {
       description: t("editorToolbar.readingFile", { fileName: file.name }),
     });
     const formData = new FormData();
@@ -369,8 +368,7 @@ export default function EditorToolbar({
       if (!importRes.ok || importData?.error) {
         throw new Error(importData?.error || t("editorToolbar.importFailed"));
       }
-      toast({
-        title: t("editorToolbar.importComplete"),
+      toast.success(t("editorToolbar.importComplete"), {
         description:
           typeof importData.slideCount === "number"
             ? t("editorToolbar.importCompleteSlides", {
@@ -383,13 +381,11 @@ export default function EditorToolbar({
       });
     } catch (err) {
       console.error("Import failed:", err);
-      toast({
-        title: t("editorToolbar.importFailed"),
+      toast.error(t("editorToolbar.importFailed"), {
         description:
           err instanceof Error
             ? err.message
             : t("editorToolbar.importFailedDescription"),
-        variant: "destructive",
       });
     } finally {
       setImporting(false);

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

@@ -7,6 +7,7 @@ import {
   IconShare2,
   IconBrandGoogle,
 } from "@tabler/icons-react";
+import { toast } from "sonner";
 
 import {
   DropdownMenu,
@@ -16,7 +17,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { toast } from "@/hooks/use-toast";
 
 interface ExportMenuProps {
   deckId: string;
@@ -73,13 +73,11 @@ export function ExportMenu({
       await onExportPptx();
     } catch (err) {
       console.error("Export failed:", err);
-      toast({
-        title: t("editorExport.exportFailed"),
+      toast.error(t("editorExport.exportFailed"), {
         description:
           err instanceof Error
             ? err.message
             : t("editorExport.exportPptxError"),
-        variant: "destructive",
       });
     }
   };
@@ -87,19 +85,16 @@ export function ExportMenu({
   const handleExportGoogleSlides = async () => {
     try {
       await onExportPptx();
-      toast({
-        title: t("editorExport.googleSlidesDownloaded"),
+      toast.success(t("editorExport.googleSlidesDownloaded"), {
         description: t("editorExport.googleSlidesImportHint"),
       });
     } catch (err) {
       console.error("Export failed:", err);
-      toast({
-        title: t("editorExport.exportFailed"),
+      toast.error(t("editorExport.exportFailed"), {
         description:
           err instanceof Error
             ? err.message
             : t("editorExport.exportGoogleSlidesError"),
-        variant: "destructive",
       });
     }
   };
@@ -124,13 +119,11 @@ export function ExportMenu({
       triggerBlobDownload(blob, filename);
     } catch (err) {
       console.error("Export failed:", err);
-      toast({
-        title: t("editorExport.exportFailed"),
+      toast.error(t("editorExport.exportFailed"), {
         description:
           err instanceof Error
             ? err.message
             : t("editorExport.exportHtmlError"),
-        variant: "destructive",
       });
     }
   };

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

@@ -153,8 +153,8 @@ export default function GenerateSlidesDialog({
               }`}
             >
               <div
-                className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-transform ${
-                  includeImages ? "left-[calc(100%-18px)]" : "left-0.5"
+                className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform duration-150 ${
+                  includeImages ? "translate-x-[16px]" : "translate-x-0"
                 }`}
               />
             </button>

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

@@ -6,6 +6,7 @@ import {
   IconRestore,
 } from "@tabler/icons-react";
 import { useMemo, useState, type RefObject } from "react";
+import { toast } from "sonner";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import { Button } from "@/components/ui/button";
@@ -25,7 +26,6 @@ import {
   useDeckVersions,
   useRestoreDeckVersion,
 } from "@/hooks/use-deck-versions";
-import { toast } from "@/hooks/use-toast";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 
 import type { DeckVersionSummary } from "../../../shared/api";
@@ -107,19 +107,16 @@ export default function HistoryPanel({
         deckId,
         versionId: selectedVersionId,
       });
-      toast({
-        title: t("history.versionRestored"),
+      toast.success(t("history.versionRestored"), {
         description: t("history.versionRestoredDescription"),
       });
       handleClose(false);
     } catch (error) {
-      toast({
-        title: t("history.restoreFailed"),
+      toast.error(t("history.restoreFailed"), {
         description:
           error instanceof Error
             ? error.message
             : t("history.restoreFailedDescription"),
-        variant: "destructive",
       });
     }
   };