@agent-native/toolkit 0.228.0-nightly-20261111212500 → 0.228.0

package/src/composer/MentionPopover.tsx

@@ -12,6 +12,7 @@ import React, {
   useState,
   useEffect,
   useRef,
+  useId,
   useImperativeHandle,
   forwardRef,
 } from "react";
@@ -66,6 +67,9 @@ interface MentionPopoverProps {
    * otherwise jump to the top.
    */
   keepSectionOrder?: boolean;
+  /** The editor keeps focus and points here with aria-controls and aria-activedescendant. */
+  listboxId?: string;
+  onActiveOptionChange?: (optionId: string | undefined) => void;
 }
 
 const iconProps = { size: 16, className: "shrink-0 text-muted-foreground" };
@@ -149,7 +153,10 @@ function LoadingSkeleton() {
 
 function LoadingSkeletonRow() {
   return (
-    <div className="flex items-center gap-2 rounded px-2 py-1.5">
+    <div
+      aria-hidden="true"
+      className="flex items-center gap-2 rounded px-2 py-1.5"
+    >
       <div className="h-3.5 w-3.5 rounded bg-muted animate-pulse" />
       <div className="h-3 w-24 rounded bg-muted animate-pulse" />
     </div>
@@ -200,7 +207,13 @@ export const MentionPopover = forwardRef<
     onClose,
     density = "default",
     keepSectionOrder = false,
+    listboxId: listboxIdProp,
+    onActiveOptionChange,
   } = props;
+  const generatedListboxId = useId();
+  const listboxId = listboxIdProp ?? generatedListboxId;
+  const optionId = (index: number) =>
+    index === -1 ? `${listboxId}-retry` : `${listboxId}-option-${index}`;
   const stacked = density === "stacked";
 
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -226,7 +239,8 @@ export const MentionPopover = forwardRef<
           defaultValue: "Other",
         });
       default:
-        return section;
+        // A provider label is usually an app catalog key; a plain one comes back as itself.
+        return t(section, { defaultValue: section });
     }
   };
 
@@ -305,6 +319,18 @@ export const MentionPopover = forwardRef<
     }
   }, [selectedIndex]);
 
+  const activeOptionId =
+    position && (selectedIndex === -1 ? retryable : selectedIndex < itemCount)
+      ? optionId(selectedIndex)
+      : undefined;
+  useEffect(() => {
+    onActiveOptionChange?.(activeOptionId);
+  }, [activeOptionId, onActiveOptionChange]);
+  useEffect(
+    () => () => onActiveOptionChange?.(undefined),
+    [onActiveOptionChange],
+  );
+
   useImperativeHandle(ref, () => ({
     moveUp: () => {
       setSelectedIndex((prev) =>
@@ -367,7 +393,7 @@ export const MentionPopover = forwardRef<
           event.stopPropagation();
           onClose();
         }}
-        className={`overflow-y-auto rounded-lg border-border/80 p-1 shadow-2xl ${COMPOSER_POPOVER_SURFACE_CLASS}`}
+        className={`overflow-y-auto p-1 ${COMPOSER_POPOVER_SURFACE_CLASS}`}
         style={{
           width: Math.min(
             position.width ?? 640,
@@ -379,14 +405,16 @@ export const MentionPopover = forwardRef<
         {type === "@" && error && (
           <div
             role="alert"
-            className="flex items-center justify-between gap-2 px-3 py-2 text-xs text-destructive"
+            className="flex items-center justify-between gap-2 px-3 py-2 text-xs agent-kit-tone-warning"
           >
             <span>{error}</span>
             {onRetry && (
               <button
                 type="button"
+                id={optionId(-1)}
+                tabIndex={-1}
                 data-mention-index={-1}
-                className={`shrink-0 rounded px-1.5 py-0.5 font-medium text-foreground ${
+                className={`shrink-0 rounded-[var(--agent-kit-radius-xs,0.25rem)] px-1.5 py-0.5 font-medium text-foreground ${
                   selectedIndex === -1 ? "bg-muted" : "hover:bg-accent"
                 }`}
                 onMouseEnter={() => setSelectedIndex(-1)}
@@ -424,18 +452,35 @@ export const MentionPopover = forwardRef<
             )}
           </div>
         ) : (
-          <div>
+          <div
+            role="listbox"
+            id={listboxId}
+            aria-label={
+              type === "@"
+                ? t("agentChat.composer.addContext", {
+                    defaultValue: "Add context",
+                  })
+                : t("agentChat.mentions.commands", {
+                    defaultValue: "Commands",
+                  })
+            }
+          >
             {isLoading && <LoadingSkeletonRow />}
             {type === "@"
               ? (() => {
                   let flatIndex = 0;
-                  return groupedMentions.map((group) => (
-                    <div key={group.section}>
+                  return groupedMentions.map((group, groupIndex) => (
+                    <div
+                      key={group.section}
+                      role="group"
+                      aria-labelledby={`${listboxId}-group-${groupIndex}`}
+                    >
                       <div
+                        id={`${listboxId}-group-${groupIndex}`}
                         className={
                           stacked
-                            ? "px-2.5 pb-1 pt-2 agent-kit-caption-copy font-medium uppercase tracking-wide text-muted-foreground/70"
-                            : "px-3 pb-2 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground/70"
+                            ? "px-2.5 pb-1 pt-2 agent-kit-caption-copy font-medium uppercase tracking-wide text-muted-foreground"
+                            : "px-3 pb-2 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground"
                         }
                       >
                         {sectionLabel(group.section)}
@@ -445,9 +490,14 @@ export const MentionPopover = forwardRef<
                         return (
                           <button
                             key={item.id}
+                            type="button"
+                            role="option"
+                            id={optionId(idx)}
+                            aria-selected={idx === selectedIndex}
+                            tabIndex={-1}
                             data-mention-index={idx}
                             data-mention-density={density}
-                            className={`flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-start ${
+                            className={`flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-[var(--agent-kit-radius-xs,0.25rem)] px-2 py-1 text-start ${
                               idx === selectedIndex
                                 ? "bg-muted text-foreground"
                                 : "hover:bg-accent/50"
@@ -498,8 +548,14 @@ export const MentionPopover = forwardRef<
                   return (
                     <>
                       {commands.length > 0 && (
-                        <div>
-                          <div className="px-2 pb-1 pt-1 agent-kit-micro-copy font-medium uppercase tracking-wide text-muted-foreground/70">
+                        <div
+                          role="group"
+                          aria-labelledby={`${listboxId}-group-commands`}
+                        >
+                          <div
+                            id={`${listboxId}-group-commands`}
+                            className="px-2 pb-1 pt-1 agent-kit-micro-copy font-medium uppercase tracking-wide text-muted-foreground"
+                          >
                             {t("agentChat.mentions.commands", {
                               defaultValue: "Commands",
                             })}
@@ -509,8 +565,13 @@ export const MentionPopover = forwardRef<
                             return (
                               <button
                                 key={cmd.name}
+                                type="button"
+                                role="option"
+                                id={optionId(i)}
+                                aria-selected={i === selectedIndex}
+                                tabIndex={-1}
                                 data-mention-index={i}
-                                className={`flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-start ${
+                                className={`flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-[var(--agent-kit-radius-xs,0.25rem)] px-2 py-1 text-start ${
                                   i === selectedIndex
                                     ? "bg-muted text-foreground"
                                     : "hover:bg-accent/50"
@@ -536,9 +597,19 @@ export const MentionPopover = forwardRef<
                         </div>
                       )}
                       {skills.length > 0 && (
-                        <div>
+                        <div
+                          role={commands.length > 0 ? "group" : undefined}
+                          aria-labelledby={
+                            commands.length > 0
+                              ? `${listboxId}-group-skills`
+                              : undefined
+                          }
+                        >
                           {commands.length > 0 && (
-                            <div className="px-2 pb-1 pt-1.5 agent-kit-micro-copy font-medium uppercase tracking-wide text-muted-foreground/70">
+                            <div
+                              id={`${listboxId}-group-skills`}
+                              className="px-2 pb-1 pt-1.5 agent-kit-micro-copy font-medium uppercase tracking-wide text-muted-foreground"
+                            >
                               {t("agentChat.mentions.skills", {
                                 defaultValue: "Skills",
                               })}
@@ -553,8 +624,13 @@ export const MentionPopover = forwardRef<
                                   description={skill.description}
                                 >
                                   <button
+                                    type="button"
+                                    role="option"
+                                    id={optionId(i)}
+                                    aria-selected={i === selectedIndex}
+                                    tabIndex={-1}
                                     data-mention-index={i}
-                                    className={`flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-start ${
+                                    className={`flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-[var(--agent-kit-radius-xs,0.25rem)] px-2 py-1 text-start ${
                                       i === selectedIndex
                                         ? "bg-muted text-foreground"
                                         : "hover:bg-accent/50"

package/src/composer/MessageQueueDrawer.spec.tsx

@@ -367,7 +367,7 @@ describe("MessageQueueDrawer", () => {
       ),
     ).toBeNull();
     expect(drawer?.style.getPropertyValue("--agent-message-queue-height")).toBe(
-      "min(44px, 10rem)",
+      "min(48px, 10rem)",
     );
 
     act(() => {
@@ -439,7 +439,7 @@ describe("MessageQueueDrawer", () => {
       ),
     ).toBe(true);
   });
-  it("keeps rows a fixed 36px with concentric corners from the composer radius", () => {
+  it("keeps rows a fixed 32px with concentric corners from the composer radius", () => {
     act(() => {
       root.render(
         <MessageQueueDrawer
@@ -458,13 +458,13 @@ describe("MessageQueueDrawer", () => {
       "var(--agentkit-composer-radius, var(--radius-xl, 0.75rem))",
     );
     expect(drawer.style.getPropertyValue("--agent-message-queue-inset")).toBe(
-      "0.25rem",
+      "0.5rem",
     );
     expect(drawer.className).toContain(
       "rounded-t-[var(--agent-message-queue-radius)]",
     );
     expect(drawer.className).toContain("p-[var(--agent-message-queue-inset)]");
-    // 32 + 32 + 64 rows plus the 4px inset above and below.
+    // 32 + 32 + 64 rows, two 4px gaps and the 8px inset above and below.
     expect(drawer.style.getPropertyValue("--agent-message-queue-height")).toBe(
       "min(152px, 10rem)",
     );
@@ -478,7 +478,7 @@ describe("MessageQueueDrawer", () => {
       // Rows fade in; a slide would fight the drawer's height transition.
       expect(row.className).not.toContain("slide-in");
     }
-    expect(rows[0]!.className).toContain("h-9");
+    expect(rows[0]!.className).toContain("h-8");
     expect(rows[2]!.className).toContain("h-16");
     expect(container.querySelector("ul")?.className).toContain(
       "overflow-y-hidden",

package/src/composer/MessageQueueDrawer.tsx

@@ -30,6 +30,7 @@ import {
 } from "../ui/tooltip.js";
 import { cn } from "../utils.js";
 import { ComposerNotice } from "./composer-notice.js";
+import { COMPOSER_POPOVER_SURFACE_CLASS } from "./popover-surface.js";
 import { useComposerRuntimeAdapters } from "./runtime-adapters.js";
 
 export interface MessageQueueItem {
@@ -102,12 +103,13 @@ export interface MessageQueueDrawerProps {
 }
 
 // Row heights and the gap between rows are fixed so the recessed drawer can
-// animate to an exact block size; change them together with the h-9 / h-16
-// row classes and the list's gap-1.
-const QUEUE_ROW_PX = 36;
+// animate to an exact block size; change them together with the h-8 / h-16
+// row classes and the list's gap-1. The 8px inset keeps the 8px row radius
+// concentric with the composer's 16px corner.
+const QUEUE_ROW_PX = 32;
 const QUEUE_IMAGE_ROW_PX = 64;
 const QUEUE_ROW_GAP_PX = 4;
-const QUEUE_INSET_PX = 4;
+const QUEUE_INSET_PX = 8;
 const RECESSED_QUEUE_MAX_PX = 160;
 
 function queueRowHeight(item: MessageQueueItem): number {
@@ -191,6 +193,9 @@ export function MessageQueueDrawer({
   const dragToReorder =
     labels.dragToReorder ??
     t("agentChat.queue.dragToReorder", { defaultValue: "Drag to reorder" });
+  const attachedImageLabel = t("agentChat.queue.attachedImage", {
+    defaultValue: "Attached image",
+  });
   const moveUpLabel =
     labels.moveUp ?? t("agentChat.queue.moveUp", { defaultValue: "Move up" });
   const moveDownLabel =
@@ -480,7 +485,7 @@ export function MessageQueueDrawer({
           "p-[var(--agent-message-queue-inset)] data-[empty=true]:p-0",
           recessed
             ? "rounded-t-[var(--agent-message-queue-radius)] rounded-b-none"
-            : "w-full overflow-hidden rounded-[var(--agent-message-queue-radius)] border border-border/80 bg-background shadow-sm animate-in fade-in-0 duration-200 motion-reduce:animate-none",
+            : "w-full overflow-hidden rounded-[var(--agent-message-queue-radius)] border border-border bg-background shadow-sm animate-in fade-in-0 duration-200 motion-reduce:animate-none",
           className,
         )}
       >
@@ -514,7 +519,7 @@ export function MessageQueueDrawer({
                   "group relative flex min-h-0 min-w-0 shrink-0 gap-1 rounded-[calc(var(--agent-message-queue-radius)-var(--agent-message-queue-inset))] px-1 text-sm leading-5 animate-in fade-in-0 duration-150 motion-reduce:animate-none",
                   hasImages
                     ? "h-16 items-start pt-1 pb-0"
-                    : "h-9 items-center py-0",
+                    : "h-8 items-center py-0",
                   dragging
                     ? "z-10 bg-accent shadow-sm"
                     : "transition-[transform,background-color] duration-150 ease-out hover:bg-accent/50 motion-reduce:transition-none",
@@ -547,7 +552,7 @@ export function MessageQueueDrawer({
                           onPointerUp={() => endDrag(true)}
                           onPointerCancel={() => endDrag(false)}
                           className={cn(
-                            "absolute inset-0 flex touch-none items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity duration-150 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 group-data-[dragging=true]:opacity-100 disabled:hidden motion-reduce:transition-none",
+                            "absolute inset-0 flex touch-none items-center justify-center rounded-[var(--agent-kit-radius-sm,0.5rem)] text-muted-foreground opacity-0 transition-opacity duration-150 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 group-data-[dragging=true]:opacity-100 disabled:hidden motion-reduce:transition-none",
                             dragging ? "cursor-grabbing" : "cursor-grab",
                           )}
                         >
@@ -568,9 +573,10 @@ export function MessageQueueDrawer({
                 >
                   <div
                     data-agent-message-queue-text="true"
-                    className="flex h-6 min-w-0 items-center text-sm leading-5 text-foreground"
+                    className="flex min-h-6 min-w-0 items-center text-sm leading-5 text-foreground"
                   >
-                    <span className="min-w-0 truncate">
+                    {/* Keyboard focus has no hover, so focus expands the message. */}
+                    <span className="min-w-0 truncate group-focus-within:whitespace-normal group-focus-within:[overflow-wrap:anywhere]">
                       {renderText ? renderText(item) : item.text}
                     </span>
                   </div>
@@ -583,8 +589,8 @@ export function MessageQueueDrawer({
                         <img
                           key={`${item.id}-image-${imageIndex}`}
                           src={src}
-                          alt=""
-                          className="size-8 shrink-0 rounded-md border border-border/60 object-cover"
+                          alt={attachedImageLabel}
+                          className="size-8 shrink-0 rounded-[var(--agent-kit-radius-sm,0.5rem)] border border-border object-cover"
                         />
                       ))}
                     </div>
@@ -676,6 +682,7 @@ export function MessageQueueDrawer({
                         align="end"
                         side="top"
                         sideOffset={4}
+                        className={COMPOSER_POPOVER_SURFACE_CLASS}
                       >
                         {actions.map((action) => {
                           const menuItem = (
@@ -685,7 +692,7 @@ export function MessageQueueDrawer({
                               onSelect={() => action.onSelect(item)}
                               className={cn(
                                 action.destructive &&
-                                  "text-destructive focus:text-destructive",
+                                  "text-[color:var(--agent-kit-danger-text)] focus:text-[color:var(--agent-kit-danger-text)]",
                               )}
                             >
                               {action.label}

package/src/composer/PastedTextChip.spec.tsx

@@ -55,4 +55,40 @@ describe("PastedTextChip", () => {
       expect(container.textContent).toContain("12.345 lines");
     });
   });
+
+  it("makes Remove its own button beside the preview trigger", async () => {
+    const onRemove = vi.fn();
+    const attachment = {
+      id: "pasted-2",
+      type: "file",
+      name: "pasted-text-2.txt",
+      content: [{ type: "text", text: "hello" }],
+    } as Attachment;
+
+    await act(async () => {
+      root.render(
+        <ComposerRuntimeAdaptersProvider
+          adapters={{
+            formatNumber: (value) => String(value),
+            translate: (key, options) => String(options?.defaultValue ?? key),
+          }}
+        >
+          <PastedTextChip attachment={attachment} onRemove={onRemove} />
+        </ComposerRuntimeAdaptersProvider>,
+      );
+    });
+
+    const remove = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Remove pasted text"]',
+    );
+    const preview = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Preview pasted text"]',
+    );
+    expect(remove?.tabIndex).toBe(0);
+    expect(preview?.contains(remove ?? null)).toBe(false);
+
+    await act(async () => remove?.click());
+    expect(onRemove).toHaveBeenCalledWith("pasted-2");
+    expect(preview?.getAttribute("aria-expanded")).toBe("false");
+  });
 });

package/src/composer/PastedTextChip.tsx

@@ -1,7 +1,7 @@
 import type { Attachment } from "@assistant-ui/react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { IconClipboardText, IconX } from "@tabler/icons-react";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { cn } from "../utils.js";
 import { countLines, unwrapAttachmentEnvelope } from "./pasted-text.js";
@@ -62,14 +62,6 @@ export function PastedTextChip({
   const t = adapters.translate!;
   const formatNumber = adapters.formatNumber!;
 
-  const handleRemove = useCallback(
-    (event: React.MouseEvent) => {
-      event.stopPropagation();
-      onRemove?.(attachment.id);
-    },
-    [attachment.id, onRemove],
-  );
-
   const lineSummary = t("agentChat.pastedText.lines", {
     count: lines,
     formattedCount: formatNumber(lines),
@@ -84,68 +76,70 @@ export function PastedTextChip({
 
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
-      <PopoverPrimitive.Trigger asChild>
-        <button
-          type="button"
-          className={cn(
-            "group relative inline-flex items-center gap-2 rounded-md border border-border/70 bg-muted/50 text-start text-foreground hover:bg-muted/70 cursor-pointer",
-            compact
-              ? "max-w-[220px] px-2 py-1.5 text-xs"
-              : "max-w-[260px] px-2.5 py-2 text-xs",
-            onRemove && !compact && "pe-7",
-          )}
-          aria-label={t("agentChat.pastedText.preview", {
-            defaultValue: "Preview pasted text",
-          })}
-        >
-          <span
+      {/* Remove stays outside the trigger: a control in a button is unreachable. */}
+      <span className="relative inline-flex">
+        <PopoverPrimitive.Trigger asChild>
+          <button
+            type="button"
             className={cn(
-              "flex shrink-0 items-center justify-center rounded bg-background text-muted-foreground",
-              compact ? "h-6 w-6" : "h-8 w-8",
+              "group relative inline-flex items-center gap-2 rounded-[var(--agent-kit-radius-sm,0.5rem)] border border-border bg-muted/50 text-start text-foreground hover:bg-muted/70 cursor-pointer",
+              compact
+                ? "max-w-[220px] px-2 py-1.5 text-xs"
+                : "max-w-[260px] px-2.5 py-2 text-xs",
+              onRemove && "pe-7",
             )}
+            aria-label={t("agentChat.pastedText.preview", {
+              defaultValue: "Preview pasted text",
+            })}
           >
-            <IconClipboardText
-              className={compact ? "h-3.5 w-3.5" : "h-4 w-4"}
-            />
-          </span>
-          <span className="min-w-0 flex-1">
-            <span className="block truncate font-medium">
-              {t("agentChat.pastedText.title", {
-                defaultValue: "Pasted text",
-              })}
-            </span>
-            <span className="block agent-kit-caption-copy text-muted-foreground">
-              {summary}
-            </span>
-          </span>
-          {onRemove && (
             <span
-              role="button"
-              tabIndex={-1}
-              data-agent-composer-slot="attachment-remove"
-              onClick={handleRemove}
-              aria-label={t("agentChat.pastedText.remove", {
-                defaultValue: "Remove pasted text",
-              })}
               className={cn(
-                // The 20px glyph box keeps the chip's geometry; the pseudo
-                // element extends the hit target to 24px.
-                "flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground after:absolute after:-inset-0.5 after:content-['']",
-                compact ? "relative" : "absolute end-1.5 top-1.5",
+                "flex shrink-0 items-center justify-center rounded-[var(--agent-kit-radius-xs,0.25rem)] bg-background text-muted-foreground",
+                compact ? "h-6 w-6" : "h-8 w-8",
               )}
             >
-              <IconX className="h-3 w-3" />
+              <IconClipboardText
+                className={compact ? "h-3.5 w-3.5" : "h-4 w-4"}
+              />
+            </span>
+            <span className="min-w-0 flex-1">
+              <span className="block truncate font-medium">
+                {t("agentChat.pastedText.title", {
+                  defaultValue: "Pasted text",
+                })}
+              </span>
+              <span className="block agent-kit-caption-copy text-muted-foreground">
+                {summary}
+              </span>
             </span>
-          )}
-        </button>
-      </PopoverPrimitive.Trigger>
+          </button>
+        </PopoverPrimitive.Trigger>
+        {onRemove && (
+          <button
+            type="button"
+            data-agent-composer-slot="attachment-remove"
+            onClick={() => onRemove(attachment.id)}
+            aria-label={t("agentChat.pastedText.remove", {
+              defaultValue: "Remove pasted text",
+            })}
+            className={cn(
+              // The 20px glyph box keeps the chip's geometry; the pseudo
+              // element extends the hit target to 24px.
+              "absolute end-1.5 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[var(--agent-kit-radius-xs,0.25rem)] text-muted-foreground hover:text-foreground after:absolute after:-inset-0.5 after:content-['']",
+              compact ? "top-1/2 -translate-y-1/2" : "top-1.5",
+            )}
+          >
+            <IconX className="h-3 w-3" />
+          </button>
+        )}
+      </span>
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
           side="top"
           align="start"
           sideOffset={6}
           collisionPadding={12}
-          className="z-50 w-[min(560px,calc(100vw-32px))] rounded-lg border border-border bg-popover text-popover-foreground shadow-lg origin-[var(--radix-popover-content-transform-origin)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95"
+          className="z-50 w-[min(560px,calc(100vw-32px))] rounded-[var(--agent-kit-radius-sm,0.5rem)] border border-border bg-popover text-popover-foreground shadow-lg origin-[var(--radix-popover-content-transform-origin)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95"
         >
           <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-2">
             <div className="flex items-center gap-2 min-w-0">
@@ -165,7 +159,7 @@ export function PastedTextChip({
               aria-label={t("agentChat.composer.closePreview", {
                 defaultValue: "Close preview",
               })}
-              className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground"
+              className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-[var(--agent-kit-radius-xs,0.25rem)] text-muted-foreground hover:text-foreground"
             >
               <IconX className="h-3.5 w-3.5" />
             </button>

package/src/composer/PromptBar.tsx

@@ -114,7 +114,7 @@ export function PromptBar({
       >
         <div className="flex flex-col gap-2">
           {hasMenuContent ? (
-            <div className="max-h-[min(360px,45vh)] overflow-y-auto rounded-xl border border-border/80 bg-popover p-2 shadow-lg">
+            <div className="max-h-[min(360px,45vh)] overflow-y-auto rounded-[var(--agent-kit-radius-sm,0.5rem)] border border-border bg-popover p-2 shadow-lg">
               {visibleSections.map((section) => (
                 <div
                   key={section.id}

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

@@ -2468,7 +2468,7 @@ describe("controlled composer context", () => {
     await pressEnter();
     expect(onSubmit).not.toHaveBeenCalled();
     const contextRow = container.querySelector('[data-context-key="brief"]')!;
-    expect(contextRow.className).toContain("py-0.5");
+    expect(contextRow.className).toContain("h-5");
     expect(contextRow.querySelector("span")?.textContent).toBe("Brief");
     expect(contextRow.querySelectorAll("button")).toHaveLength(1);
     expect(
@@ -2532,7 +2532,7 @@ describe("controlled composer context", () => {
     expect(
       contextChip.querySelector('button[aria-label="Remove Brief context"]'),
     ).not.toBeNull();
-    expect(contextChip.className).toContain("py-0.5");
+    expect(contextChip.className).toContain("h-5");
     await act(async () => contextChip.click());
     expect(onInspectContextItem).not.toHaveBeenCalled();
   });

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

@@ -468,6 +468,33 @@ describe("composer submission ownership", () => {
     ]);
   });
 
+  it("submits a custom agent mention as a custom-agent reference without null fields", async () => {
+    const onSubmit = vi.fn();
+    await render({ onSubmit });
+    await act(async () =>
+      composerRef.current!.insertReference({
+        refType: "custom-agent",
+        refId: "researcher",
+        label: "Researcher",
+        refPath: "agents/researcher.md",
+        source: "agent:custom",
+        icon: "agent",
+      }),
+    );
+    await act(async () => send());
+    expect(onSubmit).toHaveBeenCalledOnce();
+    expect(onSubmit.mock.calls[0]?.[2]).toStrictEqual([
+      {
+        type: "custom-agent",
+        path: "agents/researcher.md",
+        name: "Researcher",
+        source: "agent:custom",
+        refType: "custom-agent",
+        refId: "researcher",
+      },
+    ]);
+  });
+
   it("keeps a standalone popup's recovery draft intact through preprocessing, unmount, and rejection", async () => {
     const transport = deferred();
     let observedDraft = "Original draft";