@agent-native/core 0.97.0 → 0.98.1

package/corpus/templates/design/app/components/design/LayersPanel.tsx

@@ -51,6 +51,7 @@ import { Input } from "@/components/ui/input";
 import {
   Tooltip,
   TooltipContent,
+  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
@@ -1355,211 +1356,215 @@ function LayersPanelImpl(
   useEffect(() => stopAutoScroll, [stopAutoScroll]);
 
   return (
-    <aside
-      className={cn(
-        "flex h-full min-h-0 w-full flex-col overflow-hidden bg-[var(--design-editor-panel-bg)] text-[12px] text-foreground",
-        className,
-      )}
-      aria-label={labels.title}
-    >
-      {screenRows.length > 0 ? (
-        <div className="shrink-0 border-b border-[var(--design-editor-panel-divider-color)] pb-2">
-          <div className="flex h-10 items-center justify-between px-3">
-            <h2 className="truncate text-[12px] font-semibold text-foreground">
-              {labels.screens}
-            </h2>
-            <div className="flex items-center gap-0.5 text-muted-foreground">
-              <IconTooltipButton
-                label={labels.searchPlaceholder}
-                onClick={focusSearch}
-              >
-                <IconSearch className="size-4" />
-              </IconTooltipButton>
-              <IconTooltipButton
-                label={labels.addScreen}
-                disabled={!onAddScreen}
-                onClick={onAddScreen}
+    <TooltipProvider delayDuration={300} skipDelayDuration={400}>
+      <aside
+        className={cn(
+          "flex h-full min-h-0 w-full flex-col overflow-hidden bg-[var(--design-editor-panel-bg)] text-[12px] text-foreground",
+          className,
+        )}
+        aria-label={labels.title}
+      >
+        {screenRows.length > 0 ? (
+          <div className="shrink-0 border-b border-[var(--design-editor-panel-divider-color)] pb-2">
+            <div className="flex h-10 items-center justify-between px-3">
+              <h2 className="truncate text-[12px] font-semibold text-foreground">
+                {labels.screens}
+              </h2>
+              <div className="flex items-center gap-0.5 text-muted-foreground">
+                <IconTooltipButton
+                  label={labels.searchPlaceholder}
+                  onClick={focusSearch}
+                >
+                  <IconSearch className="size-4" />
+                </IconTooltipButton>
+                <IconTooltipButton
+                  label={labels.addScreen}
+                  disabled={!onAddScreen}
+                  onClick={onAddScreen}
+                >
+                  <IconPlus className="size-4" />
+                </IconTooltipButton>
+              </div>
+            </div>
+            <div className="px-2">
+              <button
+                type="button"
+                className={cn(
+                  "flex h-8 w-full cursor-default items-center gap-2 rounded-[5px] px-2 text-left text-[12px] font-semibold outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
+                  screenOverviewActive
+                    ? "bg-[var(--design-editor-active-row-color)] text-foreground"
+                    : "text-foreground/85 hover:bg-[var(--design-editor-active-row-color)] hover:text-foreground",
+                )}
+                aria-current={screenOverviewActive ? "page" : undefined}
+                onClick={() => onScreenOverview?.()}
+                title={labels.allScreens}
               >
-                <IconPlus className="size-4" />
-              </IconTooltipButton>
+                <IconLayoutGrid className="size-4 shrink-0" />
+                <span className="min-w-0 flex-1 truncate">
+                  {labels.allScreens}
+                </span>
+              </button>
+            </div>
+            <div className="mx-3 my-2 border-t border-[var(--design-editor-panel-divider-color)]" />
+            <div className="space-y-0.5 px-2">
+              {screenRows.map((screen) => {
+                const isActive =
+                  !screenOverviewActive && screen.id === activeScreenId;
+                return (
+                  <button
+                    key={screen.id}
+                    type="button"
+                    className={cn(
+                      "flex h-8 w-full cursor-default items-center gap-2 rounded-[5px] px-2 text-left text-[12px] font-semibold outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
+                      isActive
+                        ? "bg-[var(--design-editor-active-row-color)] text-foreground"
+                        : "text-foreground/85 hover:bg-[var(--design-editor-active-row-color)] hover:text-foreground",
+                    )}
+                    aria-current={isActive ? "page" : undefined}
+                    onClick={() => onScreenSelect?.(screen.id)}
+                    title={screen.filename ?? screen.name}
+                  >
+                    <LayerGlyph node={{ ...screen, type: "file" }} />
+                    <span className="min-w-0 flex-1 truncate">
+                      {screen.name}
+                    </span>
+                    {screen.badge ? (
+                      <span className="rounded-sm bg-muted px-1 text-[10px] font-normal text-muted-foreground">
+                        {screen.badge}
+                      </span>
+                    ) : null}
+                  </button>
+                );
+              })}
             </div>
           </div>
-          <div className="px-2">
+        ) : null}
+
+        <div className="flex h-10 shrink-0 items-center justify-between px-3">
+          <div className="min-w-0">
+            <h2 className="truncate text-[12px] font-semibold text-foreground">
+              {labels.title}
+            </h2>
+          </div>
+          <div className="flex items-center gap-0.5 text-muted-foreground">
             <button
               type="button"
-              className={cn(
-                "flex h-8 w-full cursor-default items-center gap-2 rounded-[5px] px-2 text-left text-[12px] font-semibold outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
-                screenOverviewActive
-                  ? "bg-[var(--design-editor-active-row-color)] text-foreground"
-                  : "text-foreground/85 hover:bg-[var(--design-editor-active-row-color)] hover:text-foreground",
-              )}
-              aria-current={screenOverviewActive ? "page" : undefined}
-              onClick={() => onScreenOverview?.()}
-              title={labels.allScreens}
+              className="flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-[var(--design-editor-layer-hover-color)] hover:text-foreground disabled:pointer-events-none disabled:opacity-35"
+              aria-label={labels.collapse}
+              disabled={!collapseTargetId}
+              onClick={collapseSelectedLayer}
             >
-              <IconLayoutGrid className="size-4 shrink-0" />
-              <span className="min-w-0 flex-1 truncate">
-                {labels.allScreens}
-              </span>
+              <LayerOptionsGlyph className="size-4" />
             </button>
           </div>
-          <div className="mx-3 my-2 border-t border-[var(--design-editor-panel-divider-color)]" />
-          <div className="space-y-0.5 px-2">
-            {screenRows.map((screen) => {
-              const isActive =
-                !screenOverviewActive && screen.id === activeScreenId;
-              return (
-                <button
-                  key={screen.id}
-                  type="button"
-                  className={cn(
-                    "flex h-8 w-full cursor-default items-center gap-2 rounded-[5px] px-2 text-left text-[12px] font-semibold outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
-                    isActive
-                      ? "bg-[var(--design-editor-active-row-color)] text-foreground"
-                      : "text-foreground/85 hover:bg-[var(--design-editor-active-row-color)] hover:text-foreground",
-                  )}
-                  aria-current={isActive ? "page" : undefined}
-                  onClick={() => onScreenSelect?.(screen.id)}
-                  title={screen.filename ?? screen.name}
-                >
-                  <LayerGlyph node={{ ...screen, type: "file" }} />
-                  <span className="min-w-0 flex-1 truncate">{screen.name}</span>
-                  {screen.badge ? (
-                    <span className="rounded-sm bg-muted px-1 text-[10px] font-normal text-muted-foreground">
-                      {screen.badge}
-                    </span>
-                  ) : null}
-                </button>
-              );
-            })}
-          </div>
         </div>
-      ) : null}
 
-      <div className="flex h-10 shrink-0 items-center justify-between px-3">
-        <div className="min-w-0">
-          <h2 className="truncate text-[12px] font-semibold text-foreground">
-            {labels.title}
-          </h2>
-        </div>
-        <div className="flex items-center gap-0.5 text-muted-foreground">
-          <button
-            type="button"
-            className="flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-[var(--design-editor-layer-hover-color)] hover:text-foreground disabled:pointer-events-none disabled:opacity-35"
-            aria-label={labels.collapse}
-            disabled={!collapseTargetId}
-            onClick={collapseSelectedLayer}
-          >
-            <LayerOptionsGlyph className="size-4" />
-          </button>
-        </div>
-      </div>
-
-      {shouldShowSearch ? (
-        <div className="shrink-0 p-2">
-          <div className="relative">
-            <IconSearch className="pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              ref={searchInputRef}
-              value={searchQuery}
-              onChange={(event) => onSearchQueryChange(event.target.value)}
-              onKeyDown={(event) => {
-                if (event.key === "Escape" && !searchQuery.trim()) {
-                  setSearchOpen(false);
-                }
-              }}
-              placeholder={labels.searchPlaceholder}
-              className="h-7 rounded-[4px] border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] pl-7 text-[12px] shadow-none placeholder:text-muted-foreground/70 focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]"
-            />
+        {shouldShowSearch ? (
+          <div className="shrink-0 p-2">
+            <div className="relative">
+              <IconSearch className="pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                ref={searchInputRef}
+                value={searchQuery}
+                onChange={(event) => onSearchQueryChange(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Escape" && !searchQuery.trim()) {
+                    setSearchOpen(false);
+                  }
+                }}
+                placeholder={labels.searchPlaceholder}
+                className="h-7 rounded-[4px] border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] pl-7 text-[12px] shadow-none placeholder:text-muted-foreground/70 focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]"
+              />
+            </div>
           </div>
-        </div>
-      ) : null}
+        ) : null}
 
-      <div
-        ref={scrollContainerRef}
-        className="min-h-0 flex-1 overflow-auto overscroll-contain py-2"
-        onDragOver={handleRowsDragOver}
-        onDrop={stopAutoScroll}
-        onDragEnd={stopAutoScroll}
-      >
-        {visibleRows.length ? (
-          <div
-            className="w-max min-w-full px-2"
-            role="tree"
-            aria-label={labels.title}
-          >
-            {visibleRows.map((row) => {
-              // Per-row primitives computed here (not inside LayerRow) so the
-              // row only receives booleans/strings it needs — no whole-tree
-              // arrays that would force a re-render every time any other
-              // row's selection state changes.
-              const isSelected = selectedIdSet.has(row.node.id);
-              const isInSelectedSubtree = row.ancestorIds.some((id) =>
-                selectedIdSet.has(id),
-              );
-              const isHovered =
-                hoveredLayerId != null && row.node.id === hoveredLayerId;
-              const isActiveScreen =
-                row.node.id === activeScreenId &&
-                (row.node.type === "file" ||
-                  row.node.type === "screen" ||
-                  row.node.type === "frame");
-              const isRenaming = renamingId === row.node.id;
-              const activeDropPlacement =
-                dropIndicator?.targetId === row.node.id
-                  ? dropIndicator.placement
-                  : null;
-              return (
-                <LayerRow
-                  key={row.rowKey}
-                  row={row}
-                  labels={labels}
-                  isExpanded={expandedIdSet.has(row.node.id)}
-                  isSelected={isSelected}
-                  isInSelectedSubtree={isInSelectedSubtree}
-                  isActiveScreen={isActiveScreen}
-                  isHovered={isHovered}
-                  isRenaming={isRenaming}
-                  renameDraft={isRenaming ? renameDraft : ""}
-                  registerRowElement={registerRowElement}
-                  onRenameDraftChange={setRenameDraft}
-                  onCommitRename={commitRename}
-                  onCancelRename={handleCancelRename}
-                  onStartRename={startRename}
-                  onRename={onRename}
-                  onSelect={selectNode}
-                  onToggleExpanded={handleToggleExpanded}
-                  onToggleLocked={onToggleLocked}
-                  onToggleHidden={onToggleHidden}
-                  onHoverLayer={onHoverLayer}
-                  onLeaveLayer={onLeaveLayer}
-                  onMoveLayer={onMoveLayer}
-                  canMoveLayer={canMoveLayer}
-                  activeDropPlacement={activeDropPlacement}
-                  onDropIndicatorChange={setDropIndicator}
-                  selectedIdsRef={selectedIdsRef}
-                  visibleRowsRef={visibleRowsRef}
-                  rootsRef={rootsRef}
-                  onCopyLayer={onCopyLayer}
-                  onPasteToReplace={onPasteToReplace}
-                  onGroupSelection={onGroupSelection}
-                  onFrameSelection={onFrameSelection}
-                  onUngroupSelection={onUngroupSelection}
-                  onReorderLayer={onReorderLayer}
-                  onFlipHorizontal={onFlipHorizontal}
-                  onFlipVertical={onFlipVertical}
-                />
-              );
-            })}
-          </div>
-        ) : (
-          <div className="px-3 py-8 text-center !text-[11px] text-muted-foreground">
-            {hasAnyRows ? labels.noMatches : labels.empty}
-          </div>
-        )}
-      </div>
-      {footer ? <div className="shrink-0">{footer}</div> : null}
-    </aside>
+        <div
+          ref={scrollContainerRef}
+          className="min-h-0 flex-1 overflow-auto overscroll-contain py-2"
+          onDragOver={handleRowsDragOver}
+          onDrop={stopAutoScroll}
+          onDragEnd={stopAutoScroll}
+        >
+          {visibleRows.length ? (
+            <div
+              className="w-max min-w-full px-2"
+              role="tree"
+              aria-label={labels.title}
+            >
+              {visibleRows.map((row) => {
+                // Per-row primitives computed here (not inside LayerRow) so the
+                // row only receives booleans/strings it needs — no whole-tree
+                // arrays that would force a re-render every time any other
+                // row's selection state changes.
+                const isSelected = selectedIdSet.has(row.node.id);
+                const isInSelectedSubtree = row.ancestorIds.some((id) =>
+                  selectedIdSet.has(id),
+                );
+                const isHovered =
+                  hoveredLayerId != null && row.node.id === hoveredLayerId;
+                const isActiveScreen =
+                  row.node.id === activeScreenId &&
+                  (row.node.type === "file" ||
+                    row.node.type === "screen" ||
+                    row.node.type === "frame");
+                const isRenaming = renamingId === row.node.id;
+                const activeDropPlacement =
+                  dropIndicator?.targetId === row.node.id
+                    ? dropIndicator.placement
+                    : null;
+                return (
+                  <LayerRow
+                    key={row.rowKey}
+                    row={row}
+                    labels={labels}
+                    isExpanded={expandedIdSet.has(row.node.id)}
+                    isSelected={isSelected}
+                    isInSelectedSubtree={isInSelectedSubtree}
+                    isActiveScreen={isActiveScreen}
+                    isHovered={isHovered}
+                    isRenaming={isRenaming}
+                    renameDraft={isRenaming ? renameDraft : ""}
+                    registerRowElement={registerRowElement}
+                    onRenameDraftChange={setRenameDraft}
+                    onCommitRename={commitRename}
+                    onCancelRename={handleCancelRename}
+                    onStartRename={startRename}
+                    onRename={onRename}
+                    onSelect={selectNode}
+                    onToggleExpanded={handleToggleExpanded}
+                    onToggleLocked={onToggleLocked}
+                    onToggleHidden={onToggleHidden}
+                    onHoverLayer={onHoverLayer}
+                    onLeaveLayer={onLeaveLayer}
+                    onMoveLayer={onMoveLayer}
+                    canMoveLayer={canMoveLayer}
+                    activeDropPlacement={activeDropPlacement}
+                    onDropIndicatorChange={setDropIndicator}
+                    selectedIdsRef={selectedIdsRef}
+                    visibleRowsRef={visibleRowsRef}
+                    rootsRef={rootsRef}
+                    onCopyLayer={onCopyLayer}
+                    onPasteToReplace={onPasteToReplace}
+                    onGroupSelection={onGroupSelection}
+                    onFrameSelection={onFrameSelection}
+                    onUngroupSelection={onUngroupSelection}
+                    onReorderLayer={onReorderLayer}
+                    onFlipHorizontal={onFlipHorizontal}
+                    onFlipVertical={onFlipVertical}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            <div className="px-3 py-8 text-center !text-[11px] text-muted-foreground">
+              {hasAnyRows ? labels.noMatches : labels.empty}
+            </div>
+          )}
+        </div>
+        {footer ? <div className="shrink-0">{footer}</div> : null}
+      </aside>
+    </TooltipProvider>
   );
 }
 

package/corpus/templates/design/app/components/design/edit-panel/panel-primitives.tsx

@@ -691,11 +691,18 @@ export function PanelSection({
           <div className="flex shrink-0 items-center gap-0.5">{actions}</div>
         ) : null}
       </div>
-      {!collapsed && children ? (
-        <div className="space-y-1.5 px-3 pb-3 pt-0.5 !text-[11px]">
-          {children}
+      <div
+        className="grid transition-[grid-template-rows] duration-200 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none"
+        style={{ gridTemplateRows: collapsed ? "0fr" : "1fr" }}
+      >
+        <div className="overflow-hidden">
+          {children ? (
+            <div className="space-y-1.5 px-3 pb-3 pt-0.5 !text-[11px]">
+              {children}
+            </div>
+          ) : null}
         </div>
-      ) : null}
+      </div>
     </section>
   );
 }

package/corpus/templates/design/app/components/design/inspector/DesignColorPicker.tsx

@@ -1436,7 +1436,7 @@ export function DesignColorPicker({
                                 disabled={disabled}
                                 onClick={() => setPaintType(type)}
                                 className={cn(
-                                  "flex h-8 w-full cursor-pointer flex-col items-center justify-center gap-0.5 rounded transition-colors",
+                                  "flex h-8 w-full cursor-pointer flex-col items-center justify-center gap-0.5 rounded transition-[color,background-color,transform] duration-150",
                                   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                                   "active:scale-95",
                                   isActive

package/corpus/templates/design/app/components/layout/Header.tsx

@@ -88,7 +88,7 @@ export function Header() {
       </div>
       <div className="flex items-center gap-2 shrink-0">
         {actions}
-        <RunsTray onOpenThread={openRunThread} />
+        <RunsTray pollMs={0} onOpenThread={openRunThread} />
         <AgentToggleButton />
       </div>
     </header>

package/corpus/templates/design/app/components/layout/Layout.tsx

@@ -176,7 +176,7 @@ export function Layout({ children }: LayoutProps) {
             {!isDesignEditor && (
               <div
                 className={cn(
-                  "agent-layout-left-drawer fixed inset-y-0 start-0 z-50 transition-transform duration-200 ease-out md:static md:z-auto md:transition-none",
+                  "agent-layout-left-drawer fixed inset-y-0 start-0 z-50 transition-transform duration-200 ease-out md:static md:z-auto md:transition-none motion-reduce:transition-none",
                   mobileSidebarOpen
                     ? "translate-x-0"
                     : "-translate-x-full rtl:translate-x-full md:translate-x-0 md:rtl:translate-x-0",

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

@@ -72,6 +72,7 @@ import {
 
 import type { DesignSystemTemplateId } from "../../shared/design-system-templates";
 import { ProductionDesignSystemShowcase } from "../components/design-system/ProductionDesignSystemShowcase";
+import { QueryErrorState } from "../components/QueryErrorState";
 
 interface DesignSystem {
   id: string;
@@ -125,7 +126,7 @@ export default function DesignSystems() {
   const [pendingTemplateId, setPendingTemplateId] =
     useState<DesignSystemTemplateId | null>(null);
 
-  const { data, isLoading } = useActionQuery<{
+  const { data, isLoading, isError, isFetching, refetch } = useActionQuery<{
     designSystems: DesignSystem[];
   }>("list-design-systems");
 
@@ -428,6 +429,11 @@ export default function DesignSystems() {
         <main className="max-w-6xl mx-auto px-4 sm:px-6 py-6 sm:py-10">
           {isLoading ? (
             <LoadingSkeleton />
+          ) : isError ? (
+            <QueryErrorState
+              onRetry={() => void refetch()}
+              retrying={isFetching}
+            />
           ) : designSystems.length === 0 ? (
             <>
               <EmptyState />

package/corpus/templates/design/app/pages/Index.tsx

@@ -29,6 +29,7 @@ import { toast } from "sonner";
 
 import PromptPopover from "@/components/editor/PromptDialog";
 import type { UploadedFile } from "@/components/editor/PromptDialog";
+import { QueryErrorState } from "@/components/QueryErrorState";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -106,7 +107,13 @@ export default function Index() {
   // Keep anchorRef.current in sync so PromptPopover can read it
   anchorRef.current = anchorElRef.current;
 
-  const { data: designsData, isLoading } = useActionQuery<{
+  const {
+    data: designsData,
+    isLoading,
+    isError,
+    isFetching,
+    refetch,
+  } = useActionQuery<{
     count: number;
     designs: Design[];
   }>("list-designs", { includePreview: "true" });
@@ -583,6 +590,11 @@ export default function Index() {
       <main className="px-4 sm:px-6 py-6 sm:py-10">
         {isLoading ? (
           <LoadingSkeleton />
+        ) : isError ? (
+          <QueryErrorState
+            onRetry={() => void refetch()}
+            retrying={isFetching}
+          />
         ) : designs.length === 0 ? (
           <EmptyState
             onCreateDesign={openNewDesign}
@@ -734,7 +746,7 @@ export default function Index() {
                       </Tooltip>
                     </div>
                     {/* Three-dot menu */}
-                    <div className="absolute top-2 end-2 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100">
+                    <div className="absolute top-2 end-2 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                           <Button

package/corpus/templates/design/app/pages/Present.tsx

@@ -2,6 +2,7 @@ import { useActionQuery, useT } from "@agent-native/core/client";
 import { useState, useEffect, useCallback } from "react";
 import { useParams, useNavigate } from "react-router";
 
+import { QueryErrorState } from "@/components/QueryErrorState";
 import { Skeleton } from "@/components/ui/skeleton";
 
 interface DesignFile {
@@ -23,9 +24,13 @@ export default function Present() {
   const navigate = useNavigate();
   const [currentPage, setCurrentPage] = useState(0);
 
-  const { data: design, isLoading } = useActionQuery<DesignData>("get-design", {
-    id: id!,
-  });
+  const {
+    data: design,
+    isLoading,
+    isError,
+    isFetching,
+    refetch,
+  } = useActionQuery<DesignData>("get-design", { id: id! });
 
   const files: DesignFile[] = design?.files ?? [];
 
@@ -67,6 +72,14 @@ export default function Present() {
     );
   }
 
+  if (isError) {
+    return (
+      <div className="flex h-screen w-screen items-center justify-center bg-black p-10">
+        <QueryErrorState onRetry={() => void refetch()} retrying={isFetching} />
+      </div>
+    );
+  }
+
   if (!design || files.length === 0) {
     return (
       <div className="h-screen w-screen bg-black flex flex-col items-center justify-center gap-4">

package/corpus/templates/design/app/pages/Templates.tsx

@@ -24,6 +24,7 @@ import { toast } from "sonner";
 
 import PromptPopover from "@/components/editor/PromptDialog";
 import type { UploadedFile } from "@/components/editor/PromptDialog";
+import { QueryErrorState } from "@/components/QueryErrorState";
 import { TemplatePreview } from "@/components/templates/TemplatePreview";
 import {
   AlertDialog,
@@ -91,10 +92,10 @@ export default function Templates() {
   const anchorRef = useRef<HTMLElement | null>(null);
   anchorRef.current = anchorElRef.current;
 
-  const { data, isLoading } = useActionQuery<TemplatesResult>(
-    "list-design-templates",
-    { includePreview: "true" },
-  );
+  const { data, isLoading, isError, isFetching, refetch } =
+    useActionQuery<TemplatesResult>("list-design-templates", {
+      includePreview: "true",
+    });
   const createMutation = useActionMutation("create-design-from-template");
   const deleteMutation = useActionMutation("delete-design-template");
 
@@ -255,6 +256,11 @@ export default function Templates() {
 
         {isLoading ? (
           <TemplateGridSkeleton />
+        ) : isError ? (
+          <QueryErrorState
+            onRetry={() => void refetch()}
+            retrying={isFetching}
+          />
         ) : (
           <div className="flex flex-col gap-10">
             <TemplateSection