@agent-native/toolkit 0.201.0 → 0.201.1

package/src/app/settings/deferred-builder-connect-popover.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { Button } from "@agent-native/toolkit/ui/button";
 import { cloneElement, lazy, Suspense } from "react";
 
 import { LazyChunkErrorBoundary } from "../shared/LazyChunkErrorBoundary.js";
@@ -15,6 +17,50 @@ export { LazyChunkRetryFallback } from "../shared/LazyChunkRetryFallback.js";
 export function DeferredBuilderConnectPopover(
   props: BuilderConnectPopoverProps,
 ) {
+  const t = useT();
+  if (
+    props.flow.statusResolved === true &&
+    props.flow.agentNativeProvisioningEnabled !== true
+  ) {
+    // Keep OAuth in the trusted click and avoid loading popover UI for sign-in-only flows.
+    const trigger = cloneElement(props.children, {
+      "aria-busy": undefined,
+      onClick: (event) => {
+        if (props.flow.connecting) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        props.children.props.onClick?.(event);
+        props.onTriggerClick?.(event);
+        if (event.defaultPrevented) return;
+        if (props.onConnect) props.onConnect(false);
+        else props.flow.start({ provisionAccount: false });
+      },
+    });
+    const cancelAction =
+      props.flow.connecting && props.flow.cancel ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="shrink-0"
+          onClick={props.flow.cancel}
+        >
+          {t("common.cancel")}
+        </Button>
+      ) : null;
+
+    return cancelAction ? (
+      <span className="inline-flex max-w-full items-center gap-2">
+        <span className="contents">{trigger}</span>
+        {cancelAction}
+      </span>
+    ) : (
+      <span className="contents">{trigger}</span>
+    );
+  }
+
   return (
     <LazyChunkErrorBoundary fallback={<LazyChunkRetryFallback />}>
       <Suspense

package/src/app/settings/model/ModelSettingsPage.spec.tsx

@@ -85,14 +85,11 @@ vi.mock("@agent-native/core/client/oauth-popup", () => ({
 }));
 
 vi.mock("../deferred-builder-connect-popover.js", () => ({
-  // The real popover asks whether to create an account, then calls onConnect.
   DeferredBuilderConnectPopover: ({
     children,
-    onConnect,
   }: {
     children: React.ReactElement<{ onClick?: () => void }>;
-    onConnect?: (provisionAccount: boolean) => void;
-  }) => React.cloneElement(children, { onClick: () => onConnect?.(false) }),
+  }) => React.cloneElement(children, { onClick: () => {} }),
 }));
 
 vi.mock("../shell/context.js", () => ({
@@ -388,15 +385,9 @@ describe("ModelSettingsPage", () => {
     expect(buttons(row("provider-personal-builder"))).toEqual([
       "Use Builder.io",
     ]);
-    act(() => {
-      (
-        row("provider-personal-builder").querySelector("button") as HTMLElement
-      ).click();
-    });
-    expect(state.builder.start).toHaveBeenCalledWith({
-      provisionAccount: false,
-      scope: "personal",
-    });
+    expect(
+      row("provider-personal-builder").querySelector("button")?.disabled,
+    ).toBe(false);
     expect(row("provider-personal-anthropic").textContent).toContain(
       "••••1234 · 2 models",
     );
@@ -669,17 +660,10 @@ describe("ModelSettingsPage", () => {
     expect(
       document.querySelector('[data-testid="provider-dialog"]'),
     ).not.toBeNull();
-    act(() => {
-      (
-        [...empty.querySelectorAll("button")].find(
-          (button) => button.textContent === "Use Builder.io",
-        ) as HTMLElement
-      ).click();
-    });
-    expect(state.builder.start).toHaveBeenCalledWith({
-      provisionAccount: false,
-      scope: "org",
-    });
+    const builderButton = [...empty.querySelectorAll("button")].find(
+      (button) => button.textContent === "Use Builder.io",
+    );
+    expect(builderButton?.disabled).toBe(false);
   });
 
   it("tells a restricted member with no provider to ask an admin", async () => {

package/src/app/settings/useBuilderStatus.spec.tsx

@@ -265,6 +265,11 @@ describe("useBuilderStatus", () => {
 
     expect(fetchMock).toHaveBeenCalledWith(
       "/_agent-native/connection-status/builder",
+      expect.objectContaining({
+        headers: {
+          "x-agent-native-preview-origin": "http://localhost:3000",
+        },
+      }),
     );
   });
 

package/src/app/settings/useBuilderStatus.ts

@@ -127,6 +127,11 @@ export function useBuilderStatus({
     try {
       const res = await fetch(
         agentNativePath("/_agent-native/connection-status/builder"),
+        {
+          headers: {
+            "x-agent-native-preview-origin": window.location.origin,
+          },
+        },
       );
       if (!res.ok) {
         keepLastGoodStatus(`Builder status unavailable (${res.status})`);
@@ -926,6 +931,9 @@ export function useBuilderConnectFlow(
           );
         }
         const r = await fetch(statusUrl.href, {
+          headers: {
+            "x-agent-native-preview-origin": window.location.origin,
+          },
           signal: signal ?? ownController?.signal,
         });
         if (!r.ok) return null;

package/src/app/styles/agent-native.spec.ts

@@ -261,34 +261,31 @@ describe("agent-native shell surface tokens", () => {
       /\.agent-sidebar-panel\[data-agent-sidebar-animation="drawer"\][\s\S]*?box-shadow: var\(--agent-kit-drawer-elevation\);/s,
     );
     expect(tokens).toMatch(
-      /\.dark\s*\{[\s\S]*?--agent-kit-shadow-color: var\(--background\);[\s\S]*?--agent-kit-drawer-elevation:/s,
+      /:is\(\.dark, :root\[data-theme="dark"\]:not\(\.light\)\)\s*\{[\s\S]*?--agent-kit-shadow-color: var\(--background\);[\s\S]*?--agent-kit-drawer-elevation:/s,
     );
     expect(css).not.toContain("hsl(var(--foreground) / 0.07)");
     expect(css).not.toContain("hsl(var(--foreground) / 0.12)");
     expect(css).not.toContain("hsl(var(--agent-shadow)");
     expect(tokens).toContain("--agent-kit-shadow-color: var(--foreground);");
     expect(tokens).toMatch(
-      /\.dark\s*\{[\s\S]*?--agent-kit-shadow-color: var\(--background\);[\s\S]*?--agent-kit-composer-elevation:[\s\S]*?hsl\(var\(--agent-kit-shadow-color\) \/ 0\.22\)/s,
+      /:is\(\.dark, :root\[data-theme="dark"\]:not\(\.light\)\)\s*\{[\s\S]*?--agent-kit-shadow-color: var\(--background\);[\s\S]*?--agent-kit-composer-elevation:[\s\S]*?hsl\(var\(--agent-kit-shadow-color\) \/ 0\.22\)/s,
     );
     expect(css).toMatch(
       /::view-transition-old\(agent-native-sidebar-drawer\),\s*::view-transition-new\(agent-native-sidebar-drawer\)[\s\S]*?height: 100%;/s,
     );
   });
 
-  it("gives the light composer a quiet boundary without a dark-mode highlight", () => {
+  it("gives the composer a quiet boundary in both themes", () => {
     const tokens = readFileSync(
       new URL("./tokens/agent-kit.css", import.meta.url),
       { encoding: "utf8" },
     );
 
     expect(tokens).toMatch(
-      /:root\s*\{[\s\S]*?--agent-kit-composer-border-opacity: 0\.82;[\s\S]*?--agent-kit-composer-focus-border-opacity: 1;/s,
+      /:root\s*\{[\s\S]*?--agent-kit-composer-border-mix: 82%;[\s\S]*?--agent-kit-composer-focus-border-mix: 100%;[\s\S]*?--agent-kit-composer-border-color: color-mix\([\s\S]*?--agent-kit-composer-focus-border-color: color-mix\(/s,
     );
     expect(tokens).toMatch(
-      /\.dark\s*\{[\s\S]*?--agent-kit-composer-border-opacity: 0;[\s\S]*?--agent-kit-composer-focus-border-opacity: 0;/s,
-    );
-    expect(tokens).toMatch(
-      /\.dark\s*\{[\s\S]*?--agent-kit-composer-border-color: transparent;[\s\S]*?--agent-kit-composer-focus-border-color: transparent;/s,
+      /:is\(\.dark, :root\[data-theme="dark"\]:not\(\.light\)\)\s*\{[\s\S]*?--agent-kit-composer-border-mix: 40%;[\s\S]*?--agent-kit-composer-focus-border-mix: 65%;[\s\S]*?--agent-kit-composer-border-color: color-mix\([\s\S]*?--agent-kit-composer-focus-border-color: color-mix\(/s,
     );
   });
 

package/src/app/styles/tokens/agent-kit.css

@@ -43,13 +43,17 @@
   --agent-kit-composer-block-padding-end: 1rem;
   --agent-kit-composer-min-height: 4.75rem;
   --agent-kit-composer-radius: 1.25rem;
-  --agent-kit-composer-border-opacity: 0.82;
-  --agent-kit-composer-focus-border-opacity: 1;
-  --agent-kit-composer-border-color: hsl(
-    var(--border) / var(--agent-kit-composer-border-opacity)
+  --agent-kit-composer-border-mix: 82%;
+  --agent-kit-composer-focus-border-mix: 100%;
+  --agent-kit-composer-border-color: color-mix(
+    in srgb,
+    hsl(var(--border)) var(--agent-kit-composer-border-mix),
+    transparent
   );
-  --agent-kit-composer-focus-border-color: hsl(
-    var(--border) / var(--agent-kit-composer-focus-border-opacity)
+  --agent-kit-composer-focus-border-color: color-mix(
+    in srgb,
+    hsl(var(--border)) var(--agent-kit-composer-focus-border-mix),
+    transparent
   );
   --agent-kit-composer-editor-padding-inline: 1rem;
   --agent-kit-composer-editor-padding-block-start: 0.875rem;
@@ -96,11 +100,19 @@
   }
 }
 
-.dark {
-  --agent-kit-composer-border-opacity: 0;
-  --agent-kit-composer-focus-border-opacity: 0;
-  --agent-kit-composer-border-color: transparent;
-  --agent-kit-composer-focus-border-color: transparent;
+:is(.dark, :root[data-theme="dark"]:not(.light)) {
+  --agent-kit-composer-border-mix: 40%;
+  --agent-kit-composer-focus-border-mix: 65%;
+  --agent-kit-composer-border-color: color-mix(
+    in srgb,
+    hsl(var(--border)) var(--agent-kit-composer-border-mix),
+    transparent
+  );
+  --agent-kit-composer-focus-border-color: color-mix(
+    in srgb,
+    hsl(var(--border)) var(--agent-kit-composer-focus-border-mix),
+    transparent
+  );
   --agent-kit-shadow-color: var(--background);
   --agent-kit-control-elevation: 0 0.0625rem 0.125rem
     hsl(var(--agent-kit-shadow-color) / 0.18);

package/src/composer/MessageQueueDrawer.spec.tsx

@@ -12,8 +12,8 @@ import {
 
 const labels: MessageQueueDrawerLabels = {
   region: "2 queued",
-  steer: "Steer",
-  steerHint: "Send this message next",
+  steer: "Send now",
+  steerHint: "Stops the current response, then sends this message.",
   remove: "Remove from queue",
   moreActions: "More actions",
 };
@@ -58,8 +58,9 @@ describe("MessageQueueDrawer", () => {
           onRemove={onRemove}
           getItemActions={(item) => [
             {
-              id: "move-to-top",
-              label: "Move to top",
+              id: "send-next",
+              label: "Send next",
+              hint: "Send after the current response finishes",
               onSelect: () => onMoveToTop(item),
             },
           ]}
@@ -87,7 +88,7 @@ describe("MessageQueueDrawer", () => {
     expect(container.querySelectorAll("li")).toHaveLength(2);
 
     const steerButton = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent?.includes("Steer"),
+      (button) => button.textContent?.includes("Send now"),
     );
     const removeButton = container.querySelector<HTMLButtonElement>(
       'button[aria-label="Remove from queue"]',
@@ -116,7 +117,19 @@ describe("MessageQueueDrawer", () => {
       await Promise.resolve();
     });
     const menuItem = document.querySelector<HTMLElement>('[role="menuitem"]');
-    expect(menuItem?.textContent).toContain("Move to top");
+    expect(menuItem?.textContent).toContain("Send next");
+    await act(async () => {
+      menuItem?.dispatchEvent(
+        new PointerEvent("pointermove", {
+          bubbles: true,
+          pointerType: "mouse",
+        }),
+      );
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    });
+    expect(document.body.textContent).toContain(
+      "Send after the current response finishes",
+    );
     act(() => menuItem?.click());
     expect(onMoveToTop).toHaveBeenCalledWith(items[0]);
   });
@@ -238,7 +251,7 @@ describe("MessageQueueDrawer", () => {
           variant="recessed"
           onRemove={() => undefined}
           getItemActions={() => [
-            { id: "move-to-top", label: "Move to top", onSelect: () => {} },
+            { id: "send-next", label: "Send next", onSelect: () => {} },
           ]}
         />,
       );

package/src/composer/MessageQueueDrawer.tsx

@@ -25,6 +25,7 @@ export interface MessageQueueItem {
 export interface MessageQueueItemAction {
   id: string;
   label: ReactNode;
+  hint?: string;
   icon?: ReactNode;
   destructive?: boolean;
   disabled?: boolean;
@@ -33,8 +34,12 @@ export interface MessageQueueItemAction {
 
 export interface MessageQueueDrawerLabels {
   region: string;
+  /** @deprecated Use sendNow. */
   steer: string;
+  /** @deprecated Use sendNowHint. */
   steerHint: string;
+  sendNow?: string;
+  sendNowHint?: string;
   remove: string;
   moreActions: string;
 }
@@ -55,7 +60,6 @@ export interface MessageQueueDrawerProps {
   className?: string;
 }
 
-const RECESSED_QUEUE_MAX_HEIGHT_PX = 160;
 const RECESSED_QUEUE_VERTICAL_CHROME_PX = 10;
 
 function recessedQueueHeight(items: readonly MessageQueueItem[]): number {
@@ -66,7 +70,7 @@ function recessedQueueHeight(items: readonly MessageQueueItem[]): number {
       height + (item.images && item.images.length > 0 ? 56 : 36),
     RECESSED_QUEUE_VERTICAL_CHROME_PX,
   );
-  return Math.min(contentHeight, RECESSED_QUEUE_MAX_HEIGHT_PX);
+  return contentHeight;
 }
 
 export function MessageQueueDrawer({
@@ -82,6 +86,8 @@ export function MessageQueueDrawer({
 }: MessageQueueDrawerProps) {
   const recessed = variant === "recessed";
   const empty = items.length === 0;
+  const sendNow = labels.sendNow ?? labels.steer;
+  const sendNowHint = labels.sendNowHint ?? labels.steerHint;
   const [openActionsItemId, setOpenActionsItemId] = useState<string | null>(
     null,
   );
@@ -121,8 +127,10 @@ export function MessageQueueDrawer({
       >
         <ul
           className={cn(
-            "flex max-h-40 flex-col gap-0.5 overflow-y-auto py-1",
-            recessed && "h-full",
+            "flex flex-col",
+            recessed
+              ? "h-full gap-0 overflow-y-hidden py-0"
+              : "max-h-40 gap-0.5 overflow-y-auto py-1",
           )}
         >
           {items.map((item) => {
@@ -131,7 +139,10 @@ export function MessageQueueDrawer({
             return (
               <li
                 key={item.id}
-                className="group flex min-h-9 min-w-0 items-center gap-2 px-4 py-1.5 text-[13px] leading-4 animate-in fade-in-0 slide-in-from-bottom-1 duration-200 ease-[var(--ease-collapse)] motion-reduce:animate-none"
+                className={cn(
+                  "group flex min-h-9 min-w-0 items-center gap-2 px-4 text-[13px] leading-4 animate-in fade-in-0 slide-in-from-bottom-1 duration-200 ease-[var(--ease-collapse)] motion-reduce:animate-none",
+                  recessed ? "py-0.5" : "py-1.5",
+                )}
               >
                 <IconCornerDownRight
                   aria-hidden="true"
@@ -172,10 +183,10 @@ export function MessageQueueDrawer({
                             className="size-3.5"
                             strokeWidth={1.7}
                           />
-                          <span>{labels.steer}</span>
+                          <span>{sendNow}</span>
                         </Button>
                       </TooltipTrigger>
-                      <TooltipContent>{labels.steerHint}</TooltipContent>
+                      <TooltipContent>{sendNowHint}</TooltipContent>
                     </Tooltip>
                   ) : null}
                   <Tooltip>
@@ -233,20 +244,35 @@ export function MessageQueueDrawer({
                         side="top"
                         sideOffset={4}
                       >
-                        {actions.map((action) => (
-                          <DropdownMenuItem
-                            key={action.id}
-                            disabled={disabled || action.disabled}
-                            onSelect={() => action.onSelect(item)}
-                            className={cn(
-                              action.destructive &&
-                                "text-destructive focus:text-destructive",
-                            )}
-                          >
-                            {action.icon}
-                            {action.label}
-                          </DropdownMenuItem>
-                        ))}
+                        {actions.map((action) => {
+                          const menuItem = (
+                            <DropdownMenuItem
+                              key={action.id}
+                              disabled={disabled || action.disabled}
+                              onSelect={() => action.onSelect(item)}
+                              className={cn(
+                                action.destructive &&
+                                  "text-destructive focus:text-destructive",
+                              )}
+                            >
+                              {action.icon}
+                              {action.label}
+                            </DropdownMenuItem>
+                          );
+
+                          return action.hint ? (
+                            <Tooltip key={action.id}>
+                              <TooltipTrigger asChild>
+                                {menuItem}
+                              </TooltipTrigger>
+                              <TooltipContent side="right">
+                                {action.hint}
+                              </TooltipContent>
+                            </Tooltip>
+                          ) : (
+                            menuItem
+                          );
+                        })}
                       </DropdownMenuContent>
                     </DropdownMenu>
                   ) : null}