@agent-native/core 0.87.0 → 0.90.1

package/corpus/templates/content/app/components/editor/DocumentEditor.tsx

@@ -10,9 +10,6 @@ import {
   agentNativePath,
   type CollabUser,
 } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Sheet, SheetContent } from "@agent-native/toolkit/ui/sheet";
-import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import type { Document, DocumentSyncStatus } from "@shared/api";
 import { IconArrowLeft, IconDatabase } from "@tabler/icons-react";
 import { IconLock } from "@tabler/icons-react";
@@ -33,13 +30,17 @@ import {
   contentBlockRegistry,
   createContentBlockRenderContext,
 } from "@/blocks/contentBlockRegistry";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { useComments } from "@/hooks/use-comments";
 import { useProcessBuilderBodyHydration } from "@/hooks/use-content-database";
 import {
+  isDocumentUpdateConflict,
   useDocument,
   useDocuments,
   useUpdateDocument,
 } from "@/hooks/use-documents";
+import type { DocumentUpdateConflictResponse } from "@/hooks/use-documents";
 import { useLocalStorage } from "@/hooks/use-local-storage";
 import {
   documentSyncStatusQueryKey,
@@ -57,6 +58,7 @@ import type { CommentTextAnchor } from "./comment-anchors";
 import { CommentsSidebar } from "./CommentsSidebar";
 import { DocumentBlockFields } from "./DocumentBlockFields";
 import { DocumentDatabase } from "./DocumentDatabase";
+import { DocumentEditorSkeleton } from "./DocumentEditorSkeleton";
 import { DocumentProperties } from "./DocumentProperties";
 import { DocumentToolbar } from "./DocumentToolbar";
 import { EmojiPicker } from "./EmojiPicker";
@@ -122,41 +124,6 @@ function adoptConfirmedSaveWatermarks({
   }
 }
 
-function DocumentEditorSkeleton() {
-  return (
-    <div className="flex min-h-0 flex-1 flex-col bg-background">
-      <div className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
-        <div className="flex items-center gap-2">
-          <Skeleton className="h-6 w-6 rounded-md" />
-          <Skeleton className="h-4 w-36" />
-        </div>
-        <div className="flex items-center gap-2">
-          <Skeleton className="h-7 w-20 rounded-md" />
-          <Skeleton className="h-7 w-7 rounded-md" />
-          <Skeleton className="h-7 w-7 rounded-md" />
-        </div>
-      </div>
-      <div className="min-h-0 flex-1 overflow-hidden">
-        <div className="mx-auto w-full max-w-3xl px-4 pt-14 pb-16 sm:px-8 md:px-16 md:pt-16">
-          <Skeleton className="mb-4 h-12 w-12 rounded-lg" />
-          <Skeleton className="h-11 w-2/3 rounded-md" />
-          <div className="space-y-3 pt-12">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-11/12" />
-            <Skeleton className="h-4 w-5/6" />
-            <Skeleton className="h-4 w-3/4" />
-          </div>
-          <div className="space-y-3 pt-8">
-            <Skeleton className="h-4 w-10/12" />
-            <Skeleton className="h-4 w-4/5" />
-            <Skeleton className="h-4 w-7/12" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 function DocumentUnavailable({ onOpenHome }: { onOpenHome: () => void }) {
   const t = useT();
 
@@ -186,8 +153,10 @@ function DocumentUnavailable({ onOpenHome }: { onOpenHome: () => void }) {
  * an infinite spinner plus repeating 404/403 polls in the console.
  */
 export function DocumentEditor({ documentId }: DocumentEditorProps) {
-  const { data: document, isError } = useDocument(documentId);
+  const { data: queriedDocument, isError } = useDocument(documentId);
   const navigate = useNavigate();
+  const document =
+    queriedDocument?.id === documentId ? queriedDocument : undefined;
 
   if (isError && !document) {
     return <DocumentUnavailable onOpenHome={() => navigate("/")} />;
@@ -490,6 +459,7 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     ydoc,
     awareness,
     isLoading: collabLoading,
+    isSynced: collabSynced,
     activeUsers,
     agentActive,
     agentPresent,
@@ -683,7 +653,7 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
         icon?: string | null;
       },
       options: DocumentSaveOptions = {},
-    ): Promise<Document> => {
+    ): Promise<Document | DocumentUpdateConflictResponse> => {
       if (!options.allowQueuedSave && !canEditRef.current) return document;
 
       const localSource = document.source;
@@ -720,9 +690,19 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
       }
 
       try {
+        // Content saves are guarded with a CAS against the last snapshot this
+        // editor reconciled for content, so a save can't silently clobber a
+        // concurrent update (e.g. the Notion auto-pull) that landed between
+        // this editor's last reconcile and this save reaching the server.
+        // Title/icon-only saves are unaffected (no baseUpdatedAt sent).
+        const baseUpdatedAt =
+          updates.content !== undefined
+            ? (lastSavedContentRef.current.updatedAt ?? undefined)
+            : undefined;
         return await updateDocument.mutateAsync({
           id: documentId,
           ...updates,
+          ...(baseUpdatedAt !== undefined ? { baseUpdatedAt } : {}),
         });
       } catch (error) {
         if (!isLinkedLocalSource) throw error;
@@ -773,6 +753,19 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
       }
 
       const saved = await persistDocumentUpdates(updates, options);
+      if (isDocumentUpdateConflict(saved)) {
+        // A concurrent write (e.g. the Notion auto-pull) landed after this
+        // editor's last reconciled content snapshot — the save was rejected,
+        // not applied. Don't adopt watermarks for the content we tried to
+        // send (that would make the editor believe its now-discarded content
+        // is the saved truth) and don't push to Notion below. The conflict
+        // response already lands the winning server document in the
+        // get-document cache (see useUpdateDocument), so the existing
+        // external-change effects above pick it up and reconcile the editor
+        // to it the same way they handle any other out-of-band write —
+        // silently, with no toast.
+        return { contentPersisted: false };
+      }
       // Adopt the server updatedAt per saved field.
       const savedAt = saved?.updatedAt ?? new Date().toISOString();
       adoptConfirmedSaveWatermarks({
@@ -925,7 +918,21 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
 
       try {
         const url = agentNativePath("/_agent-native/actions/update-document");
-        const body = JSON.stringify({ id: documentId, ...updates });
+        // Include the same CAS guard as the normal save path: if content is
+        // going out, tag it with the last content snapshot this editor
+        // reconciled so a teardown flush can't clobber a concurrent write
+        // (e.g. Notion auto-pull) either. The tab is unloading, so there's no
+        // response handling — this only prevents the write from applying; it
+        // can't reconcile the editor, which is fine since it's going away.
+        const baseUpdatedAt =
+          updates.content !== undefined
+            ? (lastSavedContentRef.current.updatedAt ?? undefined)
+            : undefined;
+        const body = JSON.stringify({
+          id: documentId,
+          ...updates,
+          ...(baseUpdatedAt !== undefined ? { baseUpdatedAt } : {}),
+        });
         const ok = fetch(url, {
           method: "POST",
           headers: {
@@ -1014,16 +1021,23 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
             try {
               if (Object.keys(updates).length > 0) {
                 const saved = await persistDocumentUpdates(updates);
-                const savedAt = saved?.updatedAt ?? new Date().toISOString();
-                adoptConfirmedSaveWatermarks({
-                  saved,
-                  savedAt,
-                  title,
-                  content,
-                  updates,
-                  lastSavedTitleRef,
-                  lastSavedContentRef,
-                });
+                // A CAS conflict here means a newer write landed between this
+                // editor's last reconcile and the flush; leave watermarks
+                // alone so the external-change effects reconcile this editor
+                // to the winning server content instead of us claiming the
+                // now-discarded flush content as saved.
+                if (!isDocumentUpdateConflict(saved)) {
+                  const savedAt = saved?.updatedAt ?? new Date().toISOString();
+                  adoptConfirmedSaveWatermarks({
+                    saved,
+                    savedAt,
+                    title,
+                    content,
+                    updates,
+                    lastSavedTitleRef,
+                    lastSavedContentRef,
+                  });
+                }
               }
             } finally {
               // Acknowledge the flush even if nothing changed — the SQL row is
@@ -1313,6 +1327,12 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
                               const saved = await persistDocumentUpdates({
                                 icon: emoji,
                               });
+                              // Icon-only save: never CAS-guarded server-side
+                              // (no content in this call), so this can't come
+                              // back as a conflict — narrow defensively anyway
+                              // since persistDocumentUpdates' return type is a
+                              // union.
+                              if (isDocumentUpdateConflict(saved)) return;
                               adoptConfirmedSaveWatermarks({
                                 saved,
                                 savedAt:
@@ -1422,6 +1442,7 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
                         // any local Y.Doc mutation, so they get live edits +
                         // cursors without ever writing. Excludes local-file docs.
                         ydoc={collabEnabled ? ydoc : null}
+                        collabSynced={collabEnabled ? collabSynced : true}
                         awareness={collabEnabled ? awareness : null}
                         user={currentUser}
                         editable={canEdit}

package/corpus/templates/content/app/components/editor/DocumentEditorSkeleton.tsx

@@ -0,0 +1,36 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function DocumentEditorSkeleton() {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col bg-background">
+      <div className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-6 w-6 rounded-md" />
+          <Skeleton className="h-4 w-36" />
+        </div>
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-7 w-20 rounded-md" />
+          <Skeleton className="h-7 w-7 rounded-md" />
+          <Skeleton className="h-7 w-7 rounded-md" />
+        </div>
+      </div>
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <div className="mx-auto w-full max-w-3xl px-4 pt-14 pb-16 sm:px-8 md:px-16 md:pt-16">
+          <Skeleton className="mb-4 h-12 w-12 rounded-lg" />
+          <Skeleton className="h-11 w-2/3 rounded-md" />
+          <div className="space-y-3 pt-12">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-11/12" />
+            <Skeleton className="h-4 w-5/6" />
+            <Skeleton className="h-4 w-3/4" />
+          </div>
+          <div className="space-y-3 pt-8">
+            <Skeleton className="h-4 w-10/12" />
+            <Skeleton className="h-4 w-4/5" />
+            <Skeleton className="h-4 w-7/12" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/corpus/templates/content/app/components/editor/DocumentProperties.tsx

@@ -4,35 +4,6 @@ import {
   useSession,
   useT,
 } from "@agent-native/core/client";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import { Input } from "@agent-native/toolkit/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@agent-native/toolkit/ui/popover";
-import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import type {
   AddContentDatabaseSourceFieldPropertyRequest,
   BindContentDatabaseSourceFieldRequest,
@@ -103,6 +74,35 @@ import {
 } from "react";
 import { toast } from "sonner";
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Spinner } from "@/components/ui/spinner";
 import { applySourceFieldPropertyToDatabaseResponse } from "@/hooks/use-content-database";
 import {
   useConfigureDocumentProperty,

package/corpus/templates/content/app/components/editor/DocumentToolbar.tsx

@@ -1,6 +1,5 @@
 import {
   AgentToggleButton,
-  NotificationsBell,
   PresenceBar,
   appPath,
   useActionMutation,
@@ -8,29 +7,6 @@ import {
   type CollabUser,
 } from "@agent-native/core/client";
 import { ShareButton } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-} from "@agent-native/toolkit/ui/popover";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import type { DocumentSourceInfo } from "@shared/api";
 import {
   IconArrowBarDown,
@@ -59,6 +35,29 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useLocalStorage } from "@/hooks/use-local-storage";
 import {
   useNotionConnection,
@@ -516,19 +515,6 @@ export function DocumentToolbar({
     }
   }, [open, isLinked]);
 
-  // Refresh document data after sync
-  const lastSyncedRef = useRef<string | null>(null);
-  useEffect(() => {
-    if (!syncStatus?.lastSyncedAt) return;
-    if (
-      lastSyncedRef.current &&
-      lastSyncedRef.current !== syncStatus.lastSyncedAt
-    ) {
-      queryClient.invalidateQueries({ queryKey: ["action"] });
-    }
-    lastSyncedRef.current = syncStatus.lastSyncedAt;
-  }, [syncStatus?.lastSyncedAt, queryClient, documentId]);
-
   const handleLink = useCallback(
     async (pageId: string) => {
       setLinkingPageId(pageId);
@@ -574,6 +560,11 @@ export function DocumentToolbar({
   const handleUnlink = useCallback(async () => {
     try {
       await unlinkDocument.mutateAsync({ documentId });
+      // Unlinking removes the toggle UI, but the per-document localStorage
+      // flag would otherwise keep saying auto-sync is on — leaving the 2s
+      // poll armed forever (see useDocumentSyncStatus) every time this
+      // document is reopened, even though there's nothing left to sync.
+      setAutoSync(false);
       toast.success(t("editor.toolbar.unlinkedFromNotion"));
     } catch (error) {
       toast.error(
@@ -582,7 +573,7 @@ export function DocumentToolbar({
           : t("editor.toolbar.unlinkFailed"),
       );
     }
-  }, [documentId, unlinkDocument, t]);
+  }, [documentId, setAutoSync, unlinkDocument, t]);
 
   const handleCreateAndLink = useCallback(
     (parentPageIdOrUrl?: string) => {
@@ -1191,12 +1182,6 @@ export function DocumentToolbar({
                     </PopoverContent>
                   </Popover>
                 ) : null}
-                <div className="group relative">
-                  <NotificationsBell className="!h-8 !w-full !justify-start !rounded-sm !px-2 !py-1.5 !text-sm hover:!bg-accent hover:!text-accent-foreground focus-visible:!ring-0" />
-                  <span className="pointer-events-none absolute start-8 top-1/2 -translate-y-1/2 text-sm text-muted-foreground group-hover:text-accent-foreground">
-                    {t("editor.toolbar.notifications")}
-                  </span>
-                </div>
               </DropdownMenuGroup>
             </DropdownMenuContent>
           </DropdownMenu>

package/corpus/templates/content/app/components/editor/EmojiPicker.tsx

@@ -1,16 +1,17 @@
 import { useT } from "@agent-native/core/client";
+import { IconMoodSmile } from "@tabler/icons-react";
+import { useState, useMemo, useRef, useEffect, type ReactNode } from "react";
+
 import {
   Popover,
   PopoverTrigger,
   PopoverContent,
-} from "@agent-native/toolkit/ui/popover";
+} from "@/components/ui/popover";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
-import { IconMoodSmile } from "@tabler/icons-react";
-import { useState, useMemo, useRef, useEffect, type ReactNode } from "react";
+} from "@/components/ui/tooltip";
 
 type EmojiCategory = { name: string; emojis: string[] };
 

package/corpus/templates/content/app/components/editor/LinkHoverPreview.tsx

@@ -1,12 +1,13 @@
 import { useT } from "@agent-native/core/client";
+import { IconUnlink, IconExternalLink, IconPencil } from "@tabler/icons-react";
+import type { Editor } from "@tiptap/react";
+import { useEffect, useState, useRef } from "react";
+
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
-import { IconUnlink, IconExternalLink, IconPencil } from "@tabler/icons-react";
-import type { Editor } from "@tiptap/react";
-import { useEffect, useState, useRef } from "react";
+} from "@/components/ui/tooltip";
 
 interface LinkHoverPreviewProps {
   editor: Editor;

package/corpus/templates/content/app/components/editor/NotionConflictBanner.tsx

@@ -1,9 +1,9 @@
 import { useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
 import { IconAlertTriangle, IconLoader2 } from "@tabler/icons-react";
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
 import { useLocalStorage } from "@/hooks/use-local-storage";
 import {
   useDocumentSyncStatus,

package/corpus/templates/content/app/components/editor/NotionSyncBar.tsx

@@ -1,6 +1,4 @@
 import { useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Input } from "@agent-native/toolkit/ui/input";
 import {
   IconLink,
   IconRefresh,
@@ -14,6 +12,8 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   useDisconnectNotion,
   useDocumentSyncStatus,

package/corpus/templates/content/app/components/editor/SlashCommandMenu.tsx

@@ -1,9 +1,4 @@
 import { useSendToAgentChat, useT } from "@agent-native/core/client";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@agent-native/toolkit/ui/popover";
 import type { CreateInlineDatabaseResponse } from "@shared/api";
 import { collapseExactRepeatedNfm, docToNfm } from "@shared/nfm";
 import { serializeRegistryBlockToMdx } from "@shared/nfm-registry";
@@ -35,6 +30,11 @@ import { useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import { contentBlockRegistry } from "@/blocks/contentBlockRegistry";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { useCreateInlineContentDatabase } from "@/hooks/use-content-database";
 import { useCreatePage } from "@/hooks/use-create-page";
 import { cn } from "@/lib/utils";

package/corpus/templates/content/app/components/editor/TableHoverControls.tsx

@@ -1,17 +1,4 @@
 import { useT } from "@agent-native/core/client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconArrowDown,
   IconArrowLeft,
@@ -33,6 +20,19 @@ import {
   type PointerEvent as ReactPointerEvent,
 } from "react";
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 interface TableHoverControlsProps {

package/corpus/templates/content/app/components/editor/VersionHistoryPanel.tsx

@@ -1,4 +1,9 @@
 import { useT, type CollabUser } from "@agent-native/core/client";
+import type { DocumentVersion } from "@shared/api";
+import { IconArrowLeft, IconRotate, IconLoader2 } from "@tabler/icons-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -8,22 +13,17 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Separator } from "@agent-native/toolkit/ui/separator";
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   SheetDescription,
-} from "@agent-native/toolkit/ui/sheet";
-import type { DocumentVersion } from "@shared/api";
-import { IconArrowLeft, IconRotate, IconLoader2 } from "@tabler/icons-react";
-import { useState } from "react";
-import { toast } from "sonner";
-
-import { ScrollArea } from "@/components/ui/scroll-area";
+} from "@/components/ui/sheet";
 import {
   useDocumentVersions,
   useRestoreDocumentVersion,