@agent-native/core 0.88.0 → 0.90.2

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,
@@ -2621,6 +2621,17 @@ export function AddProperty({
     }))
     .filter((group) => group.fields.length > 0);
   const addPropertySearchInputRef = useRef<HTMLInputElement>(null);
+  const [pendingPropertyType, setPendingPropertyType] =
+    useState<DocumentPropertyType | null>(null);
+  const [pendingSourceFieldId, setPendingSourceFieldId] = useState<
+    string | null
+  >(null);
+  const [addPropertyError, setAddPropertyError] = useState<string | null>(null);
+  const isAddingProperty =
+    configure.isPending ||
+    addSourceFieldProperty.isPending ||
+    pendingPropertyType !== null ||
+    pendingSourceFieldId !== null;
 
   useEffect(() => {
     if (!open) return;
@@ -2632,27 +2643,49 @@ export function AddProperty({
   }, [open]);
 
   function closeAddPropertyPicker() {
+    if (isAddingProperty) return;
     setTypeQuery("");
+    setAddPropertyError(null);
     setOpen(false);
   }
 
   async function add(type: DocumentPropertyType) {
     const label = t(`editor.propertyTypes.${type}`);
-    await configure.mutateAsync({
-      documentId,
-      name: label,
-      type,
-      options: defaultPropertyOptions(type),
-    });
-    closeAddPropertyPicker();
+    setPendingPropertyType(type);
+    setPendingSourceFieldId(null);
+    setAddPropertyError(null);
+    try {
+      await configure.mutateAsync({
+        documentId,
+        name: label,
+        type,
+        options: defaultPropertyOptions(type),
+      });
+      setTypeQuery("");
+      setOpen(false);
+    } catch (error) {
+      setAddPropertyError(error instanceof Error ? error.message : "");
+    } finally {
+      setPendingPropertyType(null);
+    }
   }
 
   async function addFromSourceField(sourceFieldId: string) {
-    await addSourceFieldProperty.mutateAsync({
-      documentId,
-      sourceFieldId,
-    });
-    closeAddPropertyPicker();
+    setPendingSourceFieldId(sourceFieldId);
+    setPendingPropertyType(null);
+    setAddPropertyError(null);
+    try {
+      await addSourceFieldProperty.mutateAsync({
+        documentId,
+        sourceFieldId,
+      });
+      setTypeQuery("");
+      setOpen(false);
+    } catch (error) {
+      setAddPropertyError(error instanceof Error ? error.message : "");
+    } finally {
+      setPendingSourceFieldId(null);
+    }
   }
 
   return (
@@ -2661,7 +2694,7 @@ export function AddProperty({
       onOpenChange={(nextOpen) => {
         if (nextOpen) {
           setOpen(true);
-        } else {
+        } else if (!isAddingProperty) {
           closeAddPropertyPicker();
         }
       }}
@@ -2729,11 +2762,16 @@ export function AddProperty({
                     aria-label={t("editor.properties.sourceField", {
                       name: field.sourceFieldLabel,
                     })}
-                    disabled={addSourceFieldProperty.isPending}
+                    disabled={isAddingProperty}
+                    aria-busy={pendingSourceFieldId === field.id}
                     className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent disabled:opacity-50"
                     onClick={() => void addFromSourceField(field.id)}
                   >
-                    <IconLink className="size-4 shrink-0 text-muted-foreground" />
+                    {pendingSourceFieldId === field.id ? (
+                      <Spinner className="size-4 shrink-0 text-muted-foreground" />
+                    ) : (
+                      <IconLink className="size-4 shrink-0 text-muted-foreground" />
+                    )}
                     <span className="min-w-0 flex-1 truncate">
                       {field.sourceFieldLabel}
                     </span>
@@ -2761,10 +2799,15 @@ export function AddProperty({
                     type: t(`editor.propertyTypes.${type}`),
                   })}
                   className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
-                  disabled={configure.isPending}
+                  disabled={isAddingProperty}
+                  aria-busy={pendingPropertyType === type}
                   onClick={() => void add(type)}
                 >
-                  <Icon className="size-4 text-muted-foreground" />
+                  {pendingPropertyType === type ? (
+                    <Spinner className="size-4 text-muted-foreground" />
+                  ) : (
+                    <Icon className="size-4 text-muted-foreground" />
+                  )}
                   <span className="flex-1">
                     {t(`editor.propertyTypes.${type}`)}
                   </span>
@@ -2776,6 +2819,15 @@ export function AddProperty({
                 </button>
               );
             })}
+            {addPropertyError !== null ? (
+              <div
+                role="alert"
+                className="px-2 py-1.5 text-xs text-destructive"
+              >
+                {t("editor.properties.addPropertyFailed")}
+                {addPropertyError ? ` ${addPropertyError}` : null}
+              </div>
+            ) : null}
           </div>
         </div>
       </PopoverContent>

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,

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

@@ -326,7 +326,7 @@ const JoinFirstBodyBlockToTitle = Extension.create<{
 
       const text = firstBlock.textContent.trim();
       if (!text) {
-        queueMicrotask(() => this.options.onJoinTitle?.(""));
+        setTimeout(() => this.options.onJoinTitle?.(""), 0);
         return true;
       }
 
@@ -336,7 +336,7 @@ const JoinFirstBodyBlockToTitle = Extension.create<{
           ? state.tr.replaceWith(0, firstBlock.nodeSize, paragraph.create())
           : state.tr.delete(0, firstBlock.nodeSize);
       view.dispatch(tr.scrollIntoView());
-      queueMicrotask(() => this.options.onJoinTitle?.(text));
+      setTimeout(() => this.options.onJoinTitle?.(text), 0);
       return true;
     };
 
@@ -356,6 +356,23 @@ const NotionBlockquote = Blockquote.extend({
 const DEFAULT_EMPTY_BLOCK_PLACEHOLDER =
   "Press ‘space’ for AI or ‘/’ for commands";
 
+const CONTENT_RECENT_EDIT_TTL_MS = 6_000;
+const RECENT_EDIT_MARKER_WIDTH = 2;
+const RECENT_EDIT_MIN_MARKER_HEIGHT = 18;
+
+type EditorCoordinateRect = Pick<DOMRect, "left" | "top" | "bottom">;
+
+export function getRecentEditPresenceMarkerRect(
+  anchor: EditorCoordinateRect,
+): DOMRect {
+  return new DOMRect(
+    anchor.left,
+    anchor.top,
+    RECENT_EDIT_MARKER_WIDTH,
+    Math.max(RECENT_EDIT_MIN_MARKER_HEIGHT, anchor.bottom - anchor.top),
+  );
+}
+
 const NotionMarkdownShortcuts = Extension.create({
   name: "notionMarkdownShortcuts",
   priority: 1000,
@@ -746,6 +763,8 @@ interface VisualEditorProps {
   onSaveContent?: (markdown: string) => boolean | Promise<boolean>;
   /** Yjs document for collaborative editing. */
   ydoc?: YDoc | null;
+  /** True after the collab provider has loaded persisted Y.Doc state. */
+  collabSynced?: boolean;
   /** Shared awareness instance for collaborative cursors/presence. */
   awareness?: Awareness | null;
   /** Current user info for cursor labels. */
@@ -1590,6 +1609,7 @@ export function VisualEditor({
   onChange,
   onSaveContent,
   ydoc,
+  collabSynced = true,
   awareness,
   user,
   editable = true,
@@ -1711,7 +1731,7 @@ export function VisualEditor({
         // clobber DB content with an empty string). `registerEmitted` records
         // this as the last-emitted value and returns false to skip the save.
         if (!guards.registerEmitted(normalized)) return true;
-        queueMicrotask(() => onChangeRef.current(normalized));
+        setTimeout(() => onChangeRef.current(normalized), 0);
         return true;
       } catch (err: any) {
         toast.error(
@@ -1890,6 +1910,7 @@ export function VisualEditor({
   const collabState = useCollabReconcile({
     editor,
     ydoc,
+    collabSynced,
     awareness: localAwareness,
     value: content,
     contentUpdatedAt,
@@ -1986,14 +2007,9 @@ export function VisualEditor({
       if (!found) return null;
 
       try {
-        const { from, to } = found;
+        const { from } = found;
         const start = editor.view.coordsAtPos(from);
-        const end = editor.view.coordsAtPos(Math.max(from, to - 1), 1);
-        const left = Math.min(start.left, end.left);
-        const right = Math.max(start.right, end.right);
-        const top = Math.min(start.top, end.top);
-        const bottom = Math.max(start.bottom, end.bottom);
-        return new DOMRect(left, top, Math.max(1, right - left), bottom - top);
+        return getRecentEditPresenceMarkerRect(start);
       } catch {
         return null;
       }
@@ -2156,7 +2172,7 @@ export function VisualEditor({
       ) as HTMLElement | null;
       if (!el) return;
       const id = el.getAttribute("data-comment-thread");
-      if (id) onActivateThread(id);
+      if (id) setTimeout(() => onActivateThread(id), 0);
     };
     dom.addEventListener("click", handleClick);
     return () => dom.removeEventListener("click", handleClick);
@@ -2182,6 +2198,7 @@ export function VisualEditor({
         edits={recentEdits}
         resolveRect={resolveRecentEditRect}
         containerRef={wrapperRef}
+        ttlMs={CONTENT_RECENT_EDIT_TTL_MS}
       />
       {editable ? (
         <BubbleToolbar editor={editor} onComment={onComment} />