@agent-native/toolkit 0.210.2 → 0.211.0-nightly-20261020183616

package/src/app/resources/McpIntegrationDialog.spec.tsx

@@ -25,7 +25,14 @@ const mocks = vi.hoisted(() => ({
       org: [],
       orgId: "org-builder",
       role: "owner",
-    },
+    } as
+      | {
+          user: unknown[];
+          org: unknown[];
+          orgId: string | null;
+          role: string | null;
+        }
+      | undefined,
     isSuccess: true,
     isError: false,
     error: null as Error | null,
@@ -72,6 +79,12 @@ describe("McpIntegrationDialog", () => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
     mocks.navigateToMcpOAuthStart.mockReset().mockReturnValue(true);
     mocks.customIntegrationEnabled.mockReset().mockReturnValue(false);
+    mocks.mcpServersQuery.data = {
+      user: [],
+      org: [],
+      orgId: "org-builder",
+      role: "owner",
+    };
     mocks.settings.mockReset();
     mocks.hubspotOAuthReadinessQuery.data = { hubspot: "configured" };
     mocks.hubspotOAuthReadinessQuery.isSuccess = true;
@@ -459,6 +472,7 @@ describe("McpIntegrationDialog", () => {
     const gong = DEFAULT_MCP_INTEGRATIONS.find(
       (integration) => integration.id === "gong",
     )!;
+    mocks.mcpServersQuery.data = undefined;
     mocks.mcpServersQuery.isSuccess = false;
 
     act(() => {
@@ -481,6 +495,12 @@ describe("McpIntegrationDialog", () => {
     expect(document.body.textContent).toContain("Loading connection scope…");
     expect(document.body.textContent).not.toContain("Provider setup required");
 
+    mocks.mcpServersQuery.data = {
+      user: [],
+      org: [],
+      orgId: "org-builder",
+      role: "owner",
+    };
     mocks.mcpServersQuery.isSuccess = true;
     act(() => {
       root.render(
@@ -502,6 +522,36 @@ describe("McpIntegrationDialog", () => {
     expect(document.body.textContent).toContain("Who should use this?");
   });
 
+  it("opens the requested setup from cached scope data after a refetch fails", () => {
+    const gong = DEFAULT_MCP_INTEGRATIONS.find(
+      (integration) => integration.id === "gong",
+    )!;
+    mocks.mcpServersQuery.isSuccess = false;
+    mocks.mcpServersQuery.isError = true;
+
+    act(() => {
+      root.render(
+        <TooltipProvider>
+          <McpIntegrationDialog
+            open
+            onOpenChange={() => {}}
+            initialIntegrationId="gong"
+            defaultScope="org"
+            canCreateOrgMcp
+            hasOrg
+            onCreateMcpServer={vi.fn()}
+            integrations={[gong]}
+          />
+        </TooltipProvider>,
+      );
+    });
+
+    expect(document.body.textContent).toContain("Who should use this?");
+    expect(document.body.textContent).not.toContain(
+      "Loading connection scope…",
+    );
+  });
+
   it("surfaces a retry when scope metadata fails before direct connecting", () => {
     const context7 = DEFAULT_MCP_INTEGRATIONS.find(
       (integration) => integration.id === "context7",

package/src/app/resources/McpIntegrationDialog.tsx

@@ -209,6 +209,7 @@ export function McpIntegrationDialog({
   >(null);
   const mcpApi = useMcpServersApi();
   const mcpServersQuery = useMcpServers({ defer: true });
+  const hasMcpServerData = mcpServersQuery.data !== undefined;
   const defaultIntegrations = useMemo(
     () => integrations ?? getDefaultMcpIntegrations(),
     [integrations],
@@ -281,7 +282,7 @@ export function McpIntegrationDialog({
 
   useEffect(() => {
     if (!open) return;
-    if (initialIntegrationId && !mcpServersQuery.isSuccess) return;
+    if (initialIntegrationId && !hasMcpServerData) return;
     const initialIntegration = initialIntegrationId
       ? defaultIntegrations.find(
           (integration) => integration.id === initialIntegrationId,
@@ -332,7 +333,7 @@ export function McpIntegrationDialog({
     open,
     safeDefaultScope,
     showCatalog,
-    mcpServersQuery.isSuccess,
+    hasMcpServerData,
   ]);
 
   useEffect(() => {

package/src/app/review/ReviewCommentComposer.tsx

@@ -21,6 +21,7 @@ import {
   IconSend,
 } from "@tabler/icons-react";
 import {
+  useEffect,
   useRef,
   useState,
   type ReactNode,
@@ -91,6 +92,23 @@ export function ReviewCommentComposer({
 }: ReviewCommentComposerProps) {
   const canSubmit = Boolean(value.trim()) && !disabled;
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    if (!autoFocus) return;
+    // A menu item that opens this composer (Edit, say) mounts it while the
+    // menu still traps focus, so keep trying for a few frames until it lands.
+    let attempts = 0;
+    let frame = 0;
+    const focusTextarea = () => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+      textarea.focus();
+      textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+      if (document.activeElement !== textarea && ++attempts < 10)
+        frame = requestAnimationFrame(focusTextarea);
+    };
+    focusTextarea();
+    return () => cancelAnimationFrame(frame);
+  }, [autoFocus]);
   const [mentionSearch, setMentionSearch] = useState("");
   const [mentionMenuOpen, setMentionMenuOpen] = useState(false);
   const [mentionTriggerIndex, setMentionTriggerIndex] = useState<number | null>(
@@ -309,7 +327,6 @@ export function ReviewCommentComposer({
       <Textarea
         {...textareaProps}
         ref={textareaRef}
-        autoFocus={autoFocus}
         value={value}
         disabled={disabled}
         onChange={(event) => {

package/src/app/review/ReviewThreadPanel.spec.tsx

@@ -627,6 +627,66 @@ describe("ReviewThreadPanel sidebar layout", () => {
     ).toBe("A quick reply");
   });
 
+  async function failReplyAfter(beforeFailure: () => void) {
+    act(() => {
+      root.render(
+        <ReviewThreadPanel
+          resourceType="design"
+          resourceId="design-1"
+          showHeader={false}
+          showComposer={false}
+          canReply
+          replyPlaceholder="Reply to this thread"
+        />,
+      );
+    });
+    act(() =>
+      container
+        .querySelector<HTMLButtonElement>('button[aria-label="Reply"]')
+        ?.click(),
+    );
+    const replyComposer = container.querySelector<HTMLTextAreaElement>(
+      'textarea[placeholder="Reply to this thread"]',
+    );
+    setTextareaValue(replyComposer!, "A quick reply");
+    const failedReply = deferredMutation();
+    act(() =>
+      replyComposer
+        ?.closest("form")
+        ?.querySelector<HTMLButtonElement>('button[type="submit"]')
+        ?.click(),
+    );
+    beforeFailure();
+    await act(async () => {
+      failedReply.reject(new Error("offline"));
+      await failedReply.promise.catch(() => undefined);
+    });
+    await act(async () => new Promise((resolve) => setTimeout(resolve, 50)));
+    return container.querySelector<HTMLTextAreaElement>(
+      'textarea[placeholder="Reply to this thread"]',
+    );
+  }
+
+  it("puts the cursor back in a failed reply when nothing else took focus", async () => {
+    const restored = await failReplyAfter(() => {});
+
+    expect(restored?.value).toBe("A quick reply");
+    expect(document.activeElement).toBe(restored);
+  });
+
+  it("leaves focus where the person moved when a failed reply comes back", async () => {
+    const elsewhere = document.createElement("input");
+    document.body.appendChild(elsewhere);
+    try {
+      const restored = await failReplyAfter(() => elsewhere.focus());
+
+      expect(restored?.value).toBe("A quick reply");
+      expect(document.activeElement).toBe(elsewhere);
+    } finally {
+      elsewhere.remove();
+    }
+  });
+
   it("restores the delete dialog when dismissal races with a failed optimistic delete", async () => {
     act(() => {
       root.render(
@@ -803,15 +863,118 @@ describe("ReviewThreadPanel sidebar layout", () => {
     expect(
       document.querySelector('textarea[aria-label="Edit comment"]'),
     ).toBeNull();
+    // Someone who moved on while the save ran keeps their focus.
+    const elsewhere = document.createElement("input");
+    document.body.appendChild(elsewhere);
+    elsewhere.focus();
+    try {
+      await act(async () => {
+        failedEdit.reject(new Error("offline"));
+        await failedEdit.promise.catch(() => undefined);
+      });
+      await act(async () => new Promise((resolve) => setTimeout(resolve, 50)));
+      expect(
+        document.querySelector<HTMLTextAreaElement>(
+          'textarea[aria-label="Edit comment"]',
+        )?.value,
+      ).toBe("Ping @Alice updated");
+      expect(document.activeElement).toBe(elsewhere);
+    } finally {
+      elsewhere.remove();
+    }
+  });
+
+  it("puts the cursor in the reply box that Reply opens", async () => {
+    act(() => {
+      root.render(
+        <ReviewThreadPanel
+          resourceType="design"
+          resourceId="design-1"
+          showHeader={false}
+          showComposer={false}
+          canReply
+        />,
+      );
+    });
+
+    const reply = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Reply"]',
+    );
+    reply?.focus();
+    await act(async () => reply?.click());
+
+    expect(document.activeElement).toBe(
+      container.querySelector("textarea[data-review-reply-input]"),
+    );
+  });
+
+  it("puts the cursor at the end of the comment that Edit opens", async () => {
+    act(() => {
+      root.render(
+        <ReviewThreadPanel
+          resourceType="design"
+          resourceId="design-1"
+          showHeader={false}
+          showComposer={false}
+          canEditComment
+        />,
+      );
+    });
+
     await act(async () => {
-      failedEdit.reject(new Error("offline"));
-      await failedEdit.promise.catch(() => undefined);
+      container
+        .querySelector<HTMLButtonElement>('button[aria-label="More actions"]')
+        ?.dispatchEvent(
+          new PointerEvent("pointerdown", { bubbles: true, button: 0 }),
+        );
     });
-    expect(
-      document.querySelector<HTMLTextAreaElement>(
-        'textarea[aria-label="Edit comment"]',
-      )?.value,
-    ).toBe("Ping @Alice updated");
+    const editItem = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.trim() === "Edit comment");
+    editItem?.focus();
+    await act(async () => editItem?.click());
+    // The menu hands focus back to its trigger once it has closed.
+    await act(async () => new Promise((resolve) => setTimeout(resolve, 50)));
+
+    const editComposer = document.querySelector<HTMLTextAreaElement>(
+      'textarea[aria-label="Edit comment"]',
+    );
+    expect(document.activeElement).toBe(editComposer);
+    expect(editComposer?.selectionStart).toBe(rootComment.body.length);
+  });
+
+  it("returns focus to the menu button after an action other than Edit", async () => {
+    const onMarkThreadUnread = vi.fn();
+    act(() => {
+      root.render(
+        <ReviewThreadPanel
+          resourceType="design"
+          resourceId="design-1"
+          showHeader={false}
+          showComposer={false}
+          canEditComment
+          onMarkThreadUnread={onMarkThreadUnread}
+        />,
+      );
+    });
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="More actions"]',
+    );
+    await act(async () => {
+      trigger?.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+    });
+    const markUnread = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.trim() === "Mark as unread");
+    markUnread?.focus();
+    await act(async () => markUnread?.click());
+    await act(async () => new Promise((resolve) => setTimeout(resolve, 50)));
+
+    expect(onMarkThreadUnread).toHaveBeenCalledTimes(1);
+    expect(document.activeElement).toBe(trigger);
   });
 
   it("shows only the controls authorized for the current viewer", () => {

package/src/app/review/ReviewThreadPanel.tsx

@@ -257,6 +257,11 @@ export function ReviewThreadPanel({
     }>
   >([]);
   const createPendingRef = useRef(false);
+  const editChosenFromMenuRef = useRef(false);
+  // Reply and Edit put the cursor in their box. A box reopened after a
+  // failed save takes focus only if nobody else holds it by then.
+  const [focusReplyBox, setFocusReplyBox] = useState(true);
+  const [focusEditBox, setFocusEditBox] = useState(true);
   const [replyingThreadId, setReplyingThreadId] = useState<string | null>(null);
   const replyingThreadIdRef = useRef<string | null>(null);
   const [replyDrafts, setReplyDrafts] = useState<Record<string, string>>({});
@@ -538,6 +543,7 @@ export function ReviewThreadPanel({
       editCandidateRef.current = comment;
       editDraftRef.current = submittedDraft;
       editMentionsRef.current = submittedMentions;
+      setFocusEditBox(focusIsFree());
       setEditCandidate(comment);
       setEditDraft(submittedDraft);
       setEditMentions(submittedMentions);
@@ -546,6 +552,7 @@ export function ReviewThreadPanel({
 
   const startEditing = (comment: ReviewComment) => {
     editGenerationRef.current += 1;
+    setFocusEditBox(true);
     editCandidateRef.current = comment;
     editDraftRef.current = comment.body;
     editMentionsRef.current = [...comment.mentions];
@@ -564,8 +571,9 @@ export function ReviewThreadPanel({
     setEditMentions([]);
   };
 
-  const startReplying = (threadId: string) => {
+  const startReplying = (threadId: string, focus = true) => {
     replyingThreadIdRef.current = threadId;
+    setFocusReplyBox(focus);
     setReplyingThreadId(threadId);
   };
 
@@ -648,7 +656,8 @@ export function ReviewThreadPanel({
         ...current,
         [comment.id]: submittedMentions,
       }));
-      if (replyingThreadIdRef.current === null) startReplying(threadId);
+      if (replyingThreadIdRef.current === null)
+        startReplying(threadId, focusIsFree());
     } finally {
       replyPendingRef.current.delete(comment.id);
     }
@@ -983,6 +992,7 @@ export function ReviewThreadPanel({
                         commentLabel={saveEditLabel}
                         placeholder={editLabel}
                         textareaProps={{ "aria-label": editLabel }}
+                        autoFocus={focusEditBox}
                         submitOnEnter
                         onEscape={cancelEditing}
                       />
@@ -1129,6 +1139,7 @@ export function ReviewThreadPanel({
                         onSubmit={() => submitReply(thread.root)}
                         placeholder={replyPlaceholder}
                         commentLabel={replyLabel}
+                        autoFocus={focusReplyBox}
                         submitOnEnter
                         onEscape={cancelReplying}
                         textareaProps={{ "data-review-reply-input": true }}
@@ -1227,10 +1238,23 @@ export function ReviewThreadPanel({
                                 <IconDots className="size-4" />
                               </Button>
                             </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-44">
+                            <DropdownMenuContent
+                              align="end"
+                              className="w-44"
+                              onCloseAutoFocus={(event) => {
+                                // Edit puts focus in its composer; leave it
+                                // there. Other actions return to the button.
+                                if (editChosenFromMenuRef.current)
+                                  event.preventDefault();
+                                editChosenFromMenuRef.current = false;
+                              }}
+                            >
                               {editAllowed ? (
                                 <DropdownMenuItem
-                                  onSelect={() => startEditing(thread.root)}
+                                  onSelect={() => {
+                                    editChosenFromMenuRef.current = true;
+                                    startEditing(thread.root);
+                                  }}
                                 >
                                   {editLabel}
                                 </DropdownMenuItem>
@@ -1599,6 +1623,12 @@ export function isTrustedReviewAttachmentUrl(value: string): boolean {
   return parsed.protocol === "https:" && parsed.hostname === "cdn.builder.io";
 }
 
+/** Nothing on the page holds focus, so taking it moves nobody's caret. */
+function focusIsFree() {
+  const active = document.activeElement;
+  return !active || active === document.body;
+}
+
 function displayReviewCommentBody(body: string): string {
   return body.replace(/@\[([^\]]+)\]\(mailto:[^)]+\)/g, "@$1");
 }

package/src/composer/PromptComposer.autofocus.spec.tsx

@@ -0,0 +1,73 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { PromptComposer } from "./PromptComposer.js";
+import type { TiptapComposerHandle } from "./TiptapComposer.js";
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+
+async function render(composerRef: React.Ref<TiptapComposerHandle>) {
+  await act(async () => {
+    root.render(
+      <PromptComposer
+        composerRef={composerRef}
+        autoFocus
+        onSubmit={vi.fn()}
+        showModelSelector={false}
+        modelStatusChecksEnabled={false}
+        includeDefaultMentionSearch={false}
+        includeDefaultSlashSkills={false}
+        voiceEnabled={false}
+      />,
+    );
+  });
+  await act(async () => new Promise((resolve) => setTimeout(resolve, 100)));
+}
+
+const editor = () => container.querySelector<HTMLElement>(".ProseMirror");
+
+describe("autoFocus", () => {
+  it("focuses the editor when the caller passes a ref object", async () => {
+    const composerRef = React.createRef<TiptapComposerHandle>();
+    await render(composerRef);
+    expect(composerRef.current).not.toBeNull();
+    expect(document.activeElement).toBe(editor());
+  });
+
+  it("focuses the editor when the caller passes a callback ref", async () => {
+    let handle: TiptapComposerHandle | null = null;
+    await render((next) => {
+      handle = next;
+    });
+    expect(handle).not.toBeNull();
+    expect(document.activeElement).toBe(editor());
+  });
+
+  it("runs the cleanup a callback ref returns", async () => {
+    const cleanup = vi.fn();
+    const ref = vi.fn(() => cleanup);
+    await render(ref);
+    act(() => root.unmount());
+    // React detaches with the cleanup, never by calling the ref with null.
+    expect(cleanup).toHaveBeenCalledTimes(ref.mock.calls.length);
+    expect(ref).not.toHaveBeenCalledWith(null);
+    root = createRoot(container);
+  });
+});

package/src/composer/PromptComposer.tsx

@@ -722,7 +722,26 @@ function PromptComposerInner({
   const modelsAdapter = adapters.models!;
   const BuilderSetupCard = modelsAdapter.BuilderSetupCard;
   const localRef = useRef<TiptapComposerHandle>(null);
-  const handleRef = composerRef ?? localRef;
+  // Keep our own copy of the handle so autofocus and held submits work when
+  // the caller passes a callback ref instead of a ref object.
+  const handleRef = useCallback(
+    (handle: TiptapComposerHandle | null) => {
+      localRef.current = handle;
+      if (typeof composerRef !== "function") {
+        if (composerRef) composerRef.current = handle;
+        return;
+      }
+      const cleanup = composerRef(handle);
+      // React runs a returned cleanup instead of calling the ref with null,
+      // so pass the caller's cleanup through.
+      if (typeof cleanup !== "function") return;
+      return () => {
+        localRef.current = null;
+        cleanup();
+      };
+    },
+    [composerRef],
+  );
   const attachments = useComposer((state) => state.attachments);
   const attachmentFiles = useMemo(
     () =>
@@ -854,15 +873,12 @@ function PromptComposerInner({
     const held = heldProviderDraftRef.current;
     if (engineState !== "configured" || !held) return;
     heldProviderDraftRef.current = null;
-    const target =
-      typeof handleRef === "object" && handleRef && "current" in handleRef
-        ? handleRef.current
-        : null;
+    const target = localRef.current;
     const current = target?.getDraftSnapshot?.();
     if (current && sameComposerDraft(held, current)) {
       void target?.submit?.();
     }
-  }, [engineState, handleRef, heldProviderDraftRevision]);
+  }, [engineState, heldProviderDraftRevision]);
   const useInlineMissingKeySetup = layoutVariant === "compact";
   const retryEngineStatus = useCallback(() => {
     if (typeof window !== "undefined") {
@@ -871,15 +887,9 @@ function PromptComposerInner({
   }, []);
   useEffect(() => {
     if (!autoFocus || composerDisabled) return;
-    const id = window.setTimeout(() => {
-      const target =
-        typeof handleRef === "object" && handleRef && "current" in handleRef
-          ? handleRef.current
-          : null;
-      target?.focus();
-    }, 50);
+    const id = window.setTimeout(() => localRef.current?.focus(), 50);
     return () => window.clearTimeout(id);
-  }, [autoFocus, composerDisabled, handleRef]);
+  }, [autoFocus, composerDisabled]);
 
   const handleSubmit = useCallback(
     async (

package/src/composer/TiptapComposer.spec.ts

@@ -2759,6 +2759,7 @@ describe("createTiptapComposerExtensions", () => {
             selectedModel: "gpt-5.6-luna",
             selectedEngine: "openai",
             onModelChange: vi.fn(),
+            agentOnly: false,
             includeDefaultSlashSkills: false,
             plusMenuMode: "hidden",
             providerConnectStatusEnabled: false,
@@ -2808,6 +2809,11 @@ describe("createTiptapComposerExtensions", () => {
       '[data-agent-native-composer-popover="true"]',
     );
     expect(picker?.textContent).toContain("GPT-5.6 Luna");
+    expect(
+      Array.from(picker?.querySelectorAll('[role="tab"]') ?? []).some((tab) =>
+        tab.textContent?.includes("Model"),
+      ),
+    ).toBe(true);
   });
 
   it("shows current Builder model versions in the picker", () => {

package/src/editor/DragHandle.spec.ts

@@ -5,6 +5,7 @@ import StarterKit from "@tiptap/starter-kit";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import {
+  DRAG_HANDLE_UI_EVENT,
   DragHandle,
   dragPreviewTransform,
   type DragHandleOptions,
@@ -345,6 +346,50 @@ describe("DragHandle menu", () => {
     }
   });
 
+  it("marks menu and drag edits as user actions", () => {
+    const { editor, handle } = mountEditor("<p>First</p><p>Second</p>");
+    const uiEvents: unknown[] = [];
+    editor.on("transaction", ({ transaction }) => {
+      if (transaction.docChanged) uiEvents.push(transaction.getMeta("uiEvent"));
+    });
+
+    try {
+      for (const label of ["Insert block below", "Duplicate", "Delete"]) {
+        hoverAt(32, 12);
+        clickHandle(handle);
+        clickMenuItem(label);
+      }
+      hoverAt(32, 12);
+      handle.dispatchEvent(
+        new MouseEvent("mousedown", {
+          bubbles: true,
+          button: 0,
+          clientX: 12,
+          clientY: 12,
+        }),
+      );
+      document.dispatchEvent(
+        new MouseEvent("mousemove", {
+          bubbles: true,
+          clientX: 12,
+          clientY: 56,
+        }),
+      );
+      document.dispatchEvent(
+        new MouseEvent("mouseup", {
+          bubbles: true,
+          button: 0,
+          clientX: 12,
+          clientY: 56,
+        }),
+      );
+
+      expect(uiEvents).toEqual(Array(4).fill(DRAG_HANDLE_UI_EVENT));
+    } finally {
+      editor.destroy();
+    }
+  });
+
   it("keeps drag-to-reorder behavior when the handle is moved", () => {
     const { editor, handle } = mountEditor("<p>First</p><p>Second</p>");