@agent-native/toolkit 0.200.0 → 0.200.1-nightly-20261002213029

package/src/app/setup-connections/useBuilderConnectCardController.spec.tsx

@@ -1,9 +1,11 @@
 // @vitest-environment happy-dom
 
+import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import { createToolkitI18nCatalog } from "../i18n.js";
 import {
   useBuilderConnectCardController,
   type BuilderConnectCardControllerOptions,
@@ -19,6 +21,8 @@ vi.mock("../settings/useBuilderStatus.js", () => ({
   useBuilderConnectFlow: mocks.useBuilderConnectFlow,
 }));
 
+const toolkitI18nCatalog = createToolkitI18nCatalog({ messages: {} });
+
 describe("useBuilderConnectCardController", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -57,7 +61,16 @@ describe("useBuilderConnectCardController", () => {
   }
 
   function render(options?: BuilderConnectCardControllerOptions) {
-    act(() => root.render(<Harness options={options} />));
+    act(() =>
+      root.render(
+        <AgentNativeI18nProvider
+          catalog={toolkitI18nCatalog}
+          persistPreference={false}
+        >
+          <Harness options={options} />
+        </AgentNativeI18nProvider>,
+      ),
+    );
     expect(viewModel).toBeDefined();
     return viewModel as BuilderConnectCardViewModel;
   }
@@ -66,16 +79,16 @@ describe("useBuilderConnectCardController", () => {
     const result = render();
 
     expect(result).toMatchObject({
-      title: "Builder connect",
+      title: "Use Builder.io",
       description:
-        "Connect Builder.io for managed model access, browser automation, and workspace identity. Free tier available.",
+        "Model access, browser automation, file storage, and workspace identity. Free tier available.",
       status: { kind: "ready", label: "Ready to connect" },
       configured: false,
       pending: false,
       error: null,
       orgName: null,
       action: {
-        label: "Connect Builder.io",
+        label: "Use Builder.io",
         pending: false,
         disabled: false,
       },
@@ -166,7 +179,7 @@ describe("useBuilderConnectCardController", () => {
         configured: false,
         status: { kind: "ready" },
         scope: "personal",
-        action: { label: "Connect Builder.io" },
+        action: { label: "Use Builder.io" },
       });
 
       act(() => result.action?.onPress(true));
@@ -231,7 +244,7 @@ describe("useBuilderConnectCardController", () => {
 
       expect(render({ scope: "personal" })).toMatchObject({
         configured: false,
-        action: { label: "Connect Builder.io" },
+        action: { label: "Use Builder.io" },
       });
     });
   });

package/src/app/setup-connections/useBuilderConnectCardController.ts

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { useCallback } from "react";
 
 import {
@@ -6,9 +7,6 @@ import {
   type BuilderConnectionScope,
 } from "../settings/useBuilderStatus.js";
 
-const DEFAULT_TITLE = "Builder connect";
-const DEFAULT_DESCRIPTION =
-  "Connect Builder.io for managed model access, browser automation, and workspace identity. Free tier available.";
 const DEFAULT_TRACKING_SOURCE = "setup_connections_page";
 
 export interface BuilderConnectCardControllerOptions {
@@ -30,7 +28,7 @@ export type BuilderConnectCardStatus =
   | { kind: "connected"; label: string };
 
 export interface BuilderConnectCardAction {
-  label: "Connect Builder.io";
+  label: string;
   pending: boolean;
   disabled: boolean;
   onPress: (provisionAccount?: boolean) => void;
@@ -58,12 +56,13 @@ function isScopeConnected(
 }
 
 export function useBuilderConnectCardController({
-  title = DEFAULT_TITLE,
-  description = DEFAULT_DESCRIPTION,
+  title,
+  description,
   trackingSource = DEFAULT_TRACKING_SOURCE,
   onConnected,
   scope,
 }: BuilderConnectCardControllerOptions = {}): BuilderConnectCardViewModel {
+  const t = useT();
   const handleConnected = useCallback(
     ({ orgName }: { orgName: string | null }) => onConnected?.(orgName),
     [onConnected],
@@ -91,8 +90,10 @@ export function useBuilderConnectCardController({
       : { kind: "ready", label: "Ready to connect" };
 
   return {
-    title,
-    description,
+    title: title ?? t("agentChat.setup.connectBuilder"),
+    description:
+      description ??
+      t("agentChat.settingsShell.integrations.builderDescription"),
     status,
     configured,
     pending: flow.connecting,
@@ -103,7 +104,7 @@ export function useBuilderConnectCardController({
       configured || !canConnect
         ? null
         : {
-            label: "Connect Builder.io",
+            label: t("agentChat.setup.connectBuilder"),
             pending: flow.connecting,
             disabled: flow.connecting,
             onPress: handlePress,

package/src/app/transcription/BuilderTranscriptionCta.tsx

@@ -31,7 +31,7 @@ export function BuilderTranscriptionCta() {
           ? "Waiting for Builder.io…"
           : statusUnavailable
             ? "Builder status unavailable. Try again."
-            : "Connect Builder.io for higher-quality transcription — free credits, no API key needed."}
+            : t("agentChat.transcription.builderCtaDescription")}
       </span>
       {flow.error && (
         <span className="text-destructive text-[10px]">{flow.error}</span>
@@ -56,7 +56,9 @@ export function BuilderTranscriptionCta() {
             disabled={flow.connecting}
             className="ml-auto shrink-0 inline-flex items-center gap-1 rounded bg-foreground px-2 py-1 text-[10px] font-semibold text-background transition-opacity hover:opacity-90 disabled:cursor-wait disabled:opacity-60"
           >
-            {statusUnavailable || flow.error ? "Retry" : "Connect"}
+            {statusUnavailable || flow.error
+              ? "Retry"
+              : t("agentChat.setup.connectBuilder")}
           </button>
         </DeferredBuilderConnectPopover>
       )}

package/src/composer/MessageQueueDrawer.spec.tsx

@@ -121,6 +121,114 @@ describe("MessageQueueDrawer", () => {
     expect(onMoveToTop).toHaveBeenCalledWith(items[0]);
   });
 
+  it("keeps only the last queue-row action menu open", async () => {
+    const multipleItems = [
+      ...items,
+      { id: "third", text: "Write the follow-up" },
+    ];
+
+    act(() => {
+      root.render(
+        <MessageQueueDrawer
+          items={multipleItems}
+          labels={labels}
+          onRemove={() => undefined}
+          getItemActions={(item) => [
+            {
+              id: "move-to-top",
+              label: `Move ${item.id} to top`,
+              onSelect: () => undefined,
+            },
+          ]}
+        />,
+      );
+    });
+
+    const moreButtons = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        'button[aria-label="More actions"]',
+      ),
+    );
+
+    await act(async () => {
+      for (const button of moreButtons) {
+        button.dispatchEvent(
+          new PointerEvent("pointerdown", {
+            bubbles: true,
+            button: 0,
+            pointerType: "mouse",
+          }),
+        );
+      }
+      await Promise.resolve();
+    });
+
+    const openMenus = document.querySelectorAll('[role="menu"]');
+    expect(openMenus).toHaveLength(1);
+    expect(openMenus[0]?.textContent).toContain("Move third to top");
+  });
+
+  it("does not reopen a queue-row menu after its row or actions disappear", async () => {
+    const getItemActions = (item: MessageQueueItem) => [
+      {
+        id: "move-to-top",
+        label: `Move ${item.id} to top`,
+        onSelect: () => undefined,
+      },
+    ];
+
+    const renderQueue = (
+      queueItems: readonly MessageQueueItem[] = items,
+      actions: typeof getItemActions | (() => []) = getItemActions,
+    ) => {
+      act(() => {
+        root.render(
+          <MessageQueueDrawer
+            items={queueItems}
+            labels={labels}
+            onRemove={() => undefined}
+            getItemActions={actions}
+          />,
+        );
+      });
+    };
+    const openFirstMenu = async () => {
+      const button = container.querySelector<HTMLButtonElement>(
+        'button[aria-label="More actions"]',
+      );
+      await act(async () => {
+        button?.dispatchEvent(
+          new PointerEvent("pointerdown", {
+            bubbles: true,
+            button: 0,
+            pointerType: "mouse",
+          }),
+        );
+        await Promise.resolve();
+      });
+      expect(document.querySelector('[role="menu"]')).not.toBeNull();
+    };
+
+    renderQueue();
+    await openFirstMenu();
+    renderQueue(items.slice(0, 1));
+    expect(document.querySelector('[role="menu"]')).toBeNull();
+    renderQueue();
+    expect(document.querySelector('[role="menu"]')).toBeNull();
+
+    await openFirstMenu();
+    renderQueue(items.slice(1));
+    expect(document.querySelector('[role="menu"]')).toBeNull();
+    renderQueue();
+    expect(document.querySelector('[role="menu"]')).toBeNull();
+
+    await openFirstMenu();
+    renderQueue(items, () => []);
+    expect(document.querySelector('[role="menu"]')).toBeNull();
+    renderQueue();
+    expect(document.querySelector('[role="menu"]')).toBeNull();
+  });
+
   it("collapses the recessed queue into the composer workflow", () => {
     act(() => {
       root.render(

package/src/composer/MessageQueueDrawer.tsx

@@ -1,5 +1,5 @@
 import { IconCornerDownRight, IconDots, IconTrash } from "@tabler/icons-react";
-import type { CSSProperties, ReactNode } from "react";
+import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
 
 import { Button } from "../ui/button.js";
 import {
@@ -82,6 +82,19 @@ export function MessageQueueDrawer({
 }: MessageQueueDrawerProps) {
   const recessed = variant === "recessed";
   const empty = items.length === 0;
+  const [openActionsItemId, setOpenActionsItemId] = useState<string | null>(
+    null,
+  );
+  useEffect(() => {
+    const hasOpenActionsItem =
+      items.length > 1 &&
+      items.some(
+        (item) =>
+          item.id === openActionsItemId &&
+          (getItemActions?.(item).length ?? 0) > 0,
+      );
+    if (!hasOpenActionsItem) setOpenActionsItemId(null);
+  }, [items, getItemActions, openActionsItemId]);
   if (empty && !recessed) return null;
 
   const recessedStyle = recessed
@@ -186,7 +199,14 @@ export function MessageQueueDrawer({
                     <TooltipContent>{labels.remove}</TooltipContent>
                   </Tooltip>
                   {items.length > 1 && actions.length > 0 ? (
-                    <DropdownMenu>
+                    <DropdownMenu
+                      open={openActionsItemId === item.id}
+                      onOpenChange={(open) =>
+                        setOpenActionsItemId((current) =>
+                          open ? item.id : current === item.id ? null : current,
+                        )
+                      }
+                    >
                       <Tooltip>
                         <TooltipTrigger asChild>
                           <DropdownMenuTrigger asChild>

package/src/composer/PromptComposer.tsx

@@ -253,7 +253,7 @@ export interface PromptComposerProps {
   ) => void;
   /**
    * Override the Builder.io connect action in the model picker. When provided,
-   * clicking "Connect Builder.io" calls this instead of opening a browser popup.
+   * clicking "Use Builder.io" calls this instead of opening a browser popup.
    * Used by the Electron desktop app to route through the native IPC handler.
    */
   onConnectProvider?: () => void;

package/src/composer/RealtimeVoiceMode.spec.tsx

@@ -19,8 +19,8 @@ const copy: RealtimeVoiceModeCopy = {
     "Voice mode keeps listening while the agent navigates and takes actions.",
   setupTitle: "Set up voice mode",
   setupDescription:
-    "Connect Builder.io to use managed voice with free credits, or add your own keys.",
-  connectBuilder: "Connect Builder.io",
+    "Use Builder.io for managed voice with free credits, or add your own keys.",
+  connectBuilder: "Use Builder.io",
   useOpenAiKey: "Add your own keys",
   startWithOpenAiKey: "Start with OpenAI key",
   startVoiceMode: "Start voice chat",
@@ -333,11 +333,11 @@ describe("RealtimeVoiceMode", () => {
       document.querySelectorAll<HTMLButtonElement>("button"),
     );
     expect(
-      buttons.find((button) => button.textContent === "Connect Builder.io"),
+      buttons.find((button) => button.textContent === "Use Builder.io"),
     ).toBeDefined();
     act(() =>
       buttons
-        .find((button) => button.textContent === "Connect Builder.io")
+        .find((button) => button.textContent === "Use Builder.io")
         ?.click(),
     );
     // No consent popover is wired here, so the click signs in instead of

package/src/composer/TiptapComposer.tsx

@@ -1101,7 +1101,7 @@ export interface TiptapComposerProps {
   providerConnectStatusEnabled?: boolean;
   /**
    * Override the Builder.io connect action in the model picker. When provided,
-   * clicking "Connect Builder.io" calls this instead of opening a browser popup.
+   * clicking "Use Builder.io" calls this instead of opening a browser popup.
    * Used by the Electron desktop app to route through the native IPC handler.
    */
   onConnectProvider?: () => void;
@@ -2274,10 +2274,10 @@ function ModelSelector({
                                       {builderFlow.connecting
                                         ? t("agentPanel.connectingBuilder", {
                                             defaultValue:
-                                              "Connecting Builder.io…",
+                                              "Setting up Builder.io…",
                                           })
                                         : t("agentPanel.connectBuilderIo", {
-                                            defaultValue: "Connect Builder.io",
+                                            defaultValue: "Use Builder.io",
                                           })}
                                     </span>
                                     <span className="block text-[11px] text-muted-foreground">
@@ -2312,10 +2312,10 @@ function ModelSelector({
                                     {builderFlow.connecting
                                       ? t("agentPanel.connectingBuilder", {
                                           defaultValue:
-                                            "Connecting Builder.io…",
+                                            "Setting up Builder.io…",
                                         })
                                       : t("agentPanel.connectBuilderIo", {
-                                          defaultValue: "Connect Builder.io",
+                                          defaultValue: "Use Builder.io",
                                         })}
                                   </span>
                                   <span className="block text-[11px] text-muted-foreground">

package/src/composer/useRealtimeVoiceMode.tsx

@@ -1327,10 +1327,10 @@ function voiceCopy(t: ComposerTranslate): RealtimeVoiceModeCopy {
     }),
     setupDescription: t("agentChat.voiceMode.setupDescription", {
       defaultValue:
-        "Connect Builder.io to use managed voice with free credits, or add your own keys.",
+        "Use Builder.io for managed voice with free credits, or add your own keys.",
     }),
     connectBuilder: t("agentChat.voiceMode.connectBuilder", {
-      defaultValue: "Connect Builder.io",
+      defaultValue: "Use Builder.io",
     }),
     useOpenAiKey: t("agentChat.voiceMode.useOpenAiKey", {
       defaultValue: "Add your own keys",