@agent-native/toolkit 0.201.1-nightly-20261005213104 → 0.201.1

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}