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

package/src/composer/TiptapComposer.tsx

@@ -9,7 +9,7 @@ import {
   IconTool,
   IconX,
   IconClipboardList,
-  IconAlertCircle,
+  IconAlertTriangle,
   IconLoader2,
   IconRefresh,
 } from "@tabler/icons-react";
@@ -26,6 +26,7 @@ import React, {
   useEffect,
   useLayoutEffect,
   useCallback,
+  useId,
   useImperativeHandle,
   useMemo,
 } from "react";
@@ -48,7 +49,6 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu.js";
-import { Popover, PopoverAnchor, PopoverContent } from "../ui/popover.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { formatAttachmentError } from "./attachment-accept.js";
 import { ComposerNotice } from "./composer-notice.js";
@@ -78,16 +78,12 @@ import {
   isClaudeCodeAgentId,
   resolvePreferredAgentModel,
 } from "./model-selection.js";
-import {
-  hasModelDetails,
-  RecommendedBadge,
-  ModelDetailsCard,
-} from "./ModelPickerParts.js";
 import {
   createPastedAttachmentFile,
   readClipboardPaste,
   shouldConvertClipboardToAttachment,
 } from "./pasted-text.js";
+import { COMPOSER_POPOVER_SURFACE_CLASS } from "./popover-surface.js";
 import {
   AGENT_CHAT_INSERT_REFERENCE_EVENT,
   AGENT_CHAT_INSERT_REFERENCE_MESSAGE_TYPE,
@@ -532,10 +528,11 @@ function referenceFromComposerReference(
     name: ref.label,
     source: ref.source || "",
     refType: ref.refType,
-    refId: ref.refId || undefined,
-    slotKey: ref.slotKey,
-    slotLabel: ref.slotLabel,
-    metadata: ref.metadata,
+    // Chip attrs default to null; the run protocol rejects null optionals.
+    ...(ref.refId ? { refId: ref.refId } : {}),
+    ...(ref.slotKey ? { slotKey: ref.slotKey } : {}),
+    ...(ref.slotLabel ? { slotLabel: ref.slotLabel } : {}),
+    ...(ref.metadata ? { metadata: ref.metadata } : {}),
   };
 }
 
@@ -1135,7 +1132,7 @@ function ComposerChip({
   return (
     <span
       data-agent-composer-slot={slot}
-      className="inline-flex h-6 items-center gap-1 rounded-md border border-border bg-muted/50 px-1.5 text-xs font-medium text-foreground"
+      className="inline-flex h-6 items-center gap-1 rounded-[var(--agent-kit-radius-xs,0.25rem)] border border-border bg-muted/50 px-1.5 text-xs font-medium text-foreground"
     >
       <Icon className="h-3 w-3 text-muted-foreground" />
       {label}
@@ -1143,7 +1140,7 @@ function ComposerChip({
         type="button"
         onClick={onRemove}
         aria-label={removeLabel}
-        className="-my-1 -me-1.5 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground"
+        className="-my-1 -me-1.5 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-[var(--agent-kit-radius-xs,0.25rem)] text-muted-foreground hover:text-foreground"
       >
         <IconX aria-hidden="true" className="h-3 w-3" />
       </button>
@@ -1700,9 +1697,7 @@ export const MODEL_SELECTOR_POPOVER_STYLE = {
 
 type ModelPickerSection = "more" | "effort" | "image" | "agent" | "mode";
 const MODEL_PICKER_STACK_BELOW_PX = 544;
-// The shared menu primitives as they come; only the stacking order and a
-// scrollable height are added, since the composer sits above app overlays.
-const MODEL_SELECTOR_MENU_CLASS = "z-[9999] overflow-y-auto";
+const MODEL_SELECTOR_MENU_CLASS = COMPOSER_POPOVER_SURFACE_CLASS;
 const MODEL_PICKER_TWO_LINE_ITEM_CLASS = "flex-col items-start gap-0 py-1.5";
 
 /**
@@ -1866,10 +1861,6 @@ interface ModelPickerRow {
   model: string;
   engine: string;
   label: string;
-  /** The card's title: the row's name without a provider suffix. */
-  cardName: string;
-  /** Marked with the Recommended badge (Auto). */
-  recommended?: boolean;
   description?: ComposerModelDescription | undefined;
   identity: string;
   recommendedRank?: number | undefined;
@@ -1938,7 +1929,6 @@ function ModelSelector({
 }) {
   const adapters = useComposerRuntimeAdapters();
   const t = adapters.translate;
-  const formatNumber = adapters.formatNumber;
   const reasoning = adapters.models?.reasoning;
   const engineNames = useMemo(
     () => engines.map((group) => group.engine),
@@ -2057,8 +2047,6 @@ function ModelSelector({
   const [openSection, setOpenSection] = useState<ModelPickerSection | null>(
     null,
   );
-  const [highlightedRow, setHighlightedRow] = useState<string | null>(null);
-  const [moreSide, setMoreSide] = useState<"left" | "right">("right");
   const sectionTriggerRefs = useRef<
     Partial<Record<ModelPickerSection, HTMLDivElement | null>>
   >({});
@@ -2068,7 +2056,6 @@ function ModelSelector({
       if (controlledOpen === undefined) setInternalOpen(nextOpen);
       if (!nextOpen) {
         setOpenSection(null);
-        setHighlightedRow(null);
       }
       onModelSelectorOpenChange?.(nextOpen);
     },
@@ -2141,7 +2128,6 @@ function ModelSelector({
               model: candidate,
               engine: group.engine,
               label,
-              cardName: label,
               description,
               identity: description?.catalogId ?? candidate,
               recommendedRank: description?.recommended
@@ -2181,8 +2167,6 @@ function ModelSelector({
             model: "auto",
             engine: autoModelGroup.engine,
             label: t("agentChat.composer.auto", { defaultValue: "Auto" }),
-            cardName: t("agentChat.composer.auto", { defaultValue: "Auto" }),
-            recommended: description?.recommended === true,
             description,
             identity: "auto",
           };
@@ -2270,8 +2254,7 @@ function ModelSelector({
   }
 
   // Two menus side by side need about 34rem; below that a submenu cannot
-  // clear the viewport on either side, so the sections stack in one menu and
-  // the model card, which needs the same room, stays hidden.
+  // clear the viewport on either side, so the sections stack in one menu.
   const stacked =
     open &&
     typeof window !== "undefined" &&
@@ -2318,7 +2301,7 @@ function ModelSelector({
             {!onConnectProvider && builderFlow.error && (
               <p
                 role="alert"
-                className="px-2 pb-2 agent-kit-caption-copy text-destructive"
+                className="px-2 pb-2 agent-kit-caption-copy agent-kit-tone-warning"
               >
                 {builderFlow.error}
               </p>
@@ -2378,7 +2361,7 @@ function ModelSelector({
             >
               <span className="min-w-0 flex-1 truncate">{agent.label}</span>
               {statusLabel ? (
-                <span className="ms-auto max-w-[6rem] shrink-0 truncate agent-kit-micro-copy text-muted-foreground/70">
+                <span className="ms-auto max-w-[6rem] shrink-0 truncate agent-kit-micro-copy text-muted-foreground">
                   {statusLabel}
                 </span>
               ) : null}
@@ -2449,91 +2432,26 @@ function ModelSelector({
 
   const renderModelRow = (
     row: ModelPickerRow,
-    cardSide: "left" | "right",
-    options: { shortcut?: number; section?: ModelPickerSection } = {},
+    options: { shortcut?: number } = {},
   ) => {
-    const { shortcut, section } = options;
+    const { shortcut } = options;
     const selected = isSelectedRow(row);
-    const details = hasModelDetails(row.description)
-      ? row.description
-      : undefined;
-    const cardOpen = !stacked && details && highlightedRow === row.key;
-    const cardId = `${row.key}-card`;
-    const item = (
+    return (
       <DropdownMenuItem
         key={row.key}
         role="menuitemradio"
         aria-checked={selected}
-        aria-describedby={cardOpen ? cardId : undefined}
+        // Digits 1-9 pick these rows; announced, not printed beside every name.
+        aria-keyshortcuts={shortcut === undefined ? undefined : `${shortcut}`}
         data-agent-composer-model-row={row.model}
         onSelect={() => selectModel(row.model, row.engine)}
-        onFocus={(event) => {
-          setHighlightedRow(row.key);
-          // A submenu row's card goes on the far side of its submenu.
-          const side = event.currentTarget
-            .closest("[data-agent-composer-model-panel]")
-            ?.getAttribute("data-side");
-          if (side === "left" || side === "right") setMoreSide(side);
-        }}
-        onBlur={() =>
-          setHighlightedRow((current) => (current === row.key ? null : current))
-        }
       >
-        <span className="flex min-w-0 flex-1 items-center gap-2">
-          <span className="truncate">{row.label}</span>
-          {row.recommended ? <RecommendedBadge t={t} /> : null}
-        </span>
-        {shortcut !== undefined ? (
-          // One trailing column: the current row's check takes the place of
-          // its number, at the same width, so no row shifts.
-          <DropdownMenuShortcut>
-            {selected ? <IconCheck aria-hidden="true" /> : shortcut}
-          </DropdownMenuShortcut>
-        ) : (
-          <DropdownMenuTrailing>
-            {selected ? <IconCheck aria-hidden="true" /> : null}
-          </DropdownMenuTrailing>
-        )}
+        <span className="min-w-0 flex-1 truncate">{row.label}</span>
+        <DropdownMenuTrailing>
+          {selected ? <IconCheck aria-hidden="true" /> : null}
+        </DropdownMenuTrailing>
       </DropdownMenuItem>
     );
-    if (!details || stacked) return item;
-    return (
-      <Popover key={row.key} open={Boolean(cardOpen)}>
-        <PopoverAnchor asChild>{item}</PopoverAnchor>
-        <PopoverContent
-          id={cardId}
-          role="tooltip"
-          side={cardSide}
-          align="start"
-          sideOffset={8}
-          collisionPadding={8}
-          // The card describes the focused row; focus stays in the menu.
-          onOpenAutoFocus={(event) => event.preventDefault()}
-          onCloseAutoFocus={(event) => event.preventDefault()}
-          // The card is the top layer, so it receives the Escape meant for
-          // the menu under it: close that menu, one level at a time.
-          onEscapeKeyDown={(event) => {
-            if (!section) {
-              setPickerOpen(false);
-              return;
-            }
-            event.preventDefault();
-            setHighlightedRow(null);
-            setOpenSection(null);
-            sectionTriggerRefs.current[section]?.focus();
-          }}
-          data-agent-native-composer-popover="true"
-          className="pointer-events-none z-[9999]"
-        >
-          <ModelDetailsCard
-            name={row.cardName}
-            description={details}
-            t={t}
-            formatNumber={formatNumber}
-          />
-        </PopoverContent>
-      </Popover>
-    );
   };
 
   const showModelList =
@@ -2572,24 +2490,20 @@ function ModelSelector({
                 defaultValue: "No OpenAI models configured",
               })}
             </span>
-            <span className="shrink-0 agent-kit-caption-copy text-muted-foreground/70">
+            <span className="shrink-0 agent-kit-caption-copy text-muted-foreground">
               Configure
             </span>
           </DropdownMenuItem>
         )}
       {shortcutRows.map((row, index) =>
-        renderModelRow(row, "left", { shortcut: index + 1 }),
+        renderModelRow(row, { shortcut: index + 1 }),
       )}
     </>
   );
 
   const moreItems =
     moreRows.length > 0 ? (
-      <>
-        {moreRows.map((row) =>
-          renderModelRow(row, moreSide, stacked ? {} : { section: "more" }),
-        )}
-      </>
+      <>{moreRows.map((row) => renderModelRow(row))}</>
     ) : null;
 
   const imageItems =
@@ -2651,11 +2565,8 @@ function ModelSelector({
                 setPickerOpen(false);
               }}
             >
-              <span className="flex min-w-0 flex-1 items-center gap-2">
-                <span className="truncate">{effortLabel(level)}</span>
-                {level === providerDefaultEffort ? (
-                  <RecommendedBadge t={t} />
-                ) : null}
+              <span className="min-w-0 flex-1 truncate">
+                {effortLabel(level)}
               </span>
               <DropdownMenuTrailing>
                 {selected ? <IconCheck aria-hidden="true" /> : null}
@@ -2818,7 +2729,7 @@ function ModelSelector({
                 })}: ${effortValueLabel}`
               : ""
           }`}
-          className="agent-composer-model-button flex min-w-[var(--agentkit-composer-model-min-width,min(8rem,100%))] max-w-[var(--agentkit-composer-model-max-width,none)] shrink items-center gap-1 overflow-hidden rounded-[var(--agentkit-composer-control-radius,var(--radius-md))] px-[var(--agentkit-composer-toolbar-control-padding-inline,0.5rem)] py-1 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+          className="agent-composer-model-button flex min-w-[var(--agentkit-composer-model-min-width,min(8rem,100%))] max-w-[var(--agentkit-composer-model-max-width,none)] shrink items-center gap-1 overflow-hidden rounded-[var(--agentkit-composer-control-radius,var(--agent-kit-radius-xs,0.25rem))] px-[var(--agentkit-composer-toolbar-control-padding-inline,0.5rem)] py-1 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground aria-expanded:bg-accent/50 aria-expanded:text-foreground"
         >
           <span className="agent-composer-model-name min-w-0 truncate text-foreground">
             {selectedAgentOption?.icon ? (
@@ -3097,6 +3008,10 @@ function TiptapComposerSurface({
     id: string;
   } | null>(null);
   const popoverRef = useRef<MentionPopoverRef>(null);
+  const mentionListboxId = useId();
+  const [activeMentionOptionId, setActiveMentionOptionId] = useState<
+    string | undefined
+  >(undefined);
   const composerRuntime = useComposerRuntime();
   const lastComposerRuntimeSyncRef = useRef<{
     text: string;
@@ -3787,6 +3702,7 @@ function TiptapComposerSurface({
       attributes: {
         "aria-label": ariaLabel ?? resolvedPlaceholder,
         "aria-multiline": "true",
+        "aria-autocomplete": "list",
         // Context controls can be off while the editor still takes a draft.
         "aria-disabled": String(editorLocked),
         role: "textbox",
@@ -3794,8 +3710,10 @@ function TiptapComposerSurface({
         "data-agent-composer-slot": "editor-input",
         // Page-level paste listeners defer to a composer that claims pastes.
         ...(onPasteContext ? { "data-claims-paste": "true" } : {}),
+        // Each paragraph takes its direction from its first letter; an empty
+        // draft keeps the page's direction for the placeholder.
         class:
-          "agent-composer-prosemirror flex-1 resize-none bg-transparent text-[length:var(--agentkit-composer-font-size,0.875rem)] text-foreground outline-none leading-[var(--agentkit-composer-line-height,1.625rem)] min-h-[var(--agentkit-composer-editor-min-height,3.25rem)] max-h-[var(--agentkit-composer-editor-max-height,10rem)] overflow-y-auto [&>p.is-editor-empty:first-child]:before:pointer-events-none [&>p.is-editor-empty:first-child]:before:float-start [&>p.is-editor-empty:first-child]:before:h-0 [&>p.is-editor-empty:first-child]:before:text-muted-foreground [&>p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]",
+          "agent-composer-prosemirror [&>*]:[unicode-bidi:plaintext] flex-1 resize-none bg-transparent text-[length:var(--agentkit-composer-font-size,0.875rem)] text-foreground outline-none leading-[var(--agentkit-composer-line-height,1.625rem)] min-h-[var(--agentkit-composer-editor-min-height,3.25rem)] max-h-[var(--agentkit-composer-editor-max-height,10rem)] overflow-y-auto [&>p.is-editor-empty:first-child]:before:pointer-events-none [&>p.is-editor-empty:first-child]:before:float-start [&>p.is-editor-empty:first-child]:before:h-0 [&>p.is-editor-empty:first-child]:before:text-muted-foreground [&>p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]",
       },
       handleDOMEvents: {
         compositionstart: () => {
@@ -4901,25 +4819,7 @@ function TiptapComposerSurface({
           source: node.attrs.source || "codebase",
         });
       } else if (node.type.name === "mentionReference") {
-        const refType = node.attrs.refType;
-        references.push({
-          type:
-            refType === "file"
-              ? "file"
-              : refType === "agent"
-                ? "agent"
-                : refType === "custom-agent"
-                  ? "custom-agent"
-                  : "mention",
-          path: node.attrs.refPath || "",
-          name: node.attrs.label,
-          source: node.attrs.source,
-          refType: node.attrs.refType,
-          refId: node.attrs.refId,
-          slotKey: node.attrs.slotKey,
-          slotLabel: node.attrs.slotLabel,
-          metadata: node.attrs.metadata,
-        });
+        references.push(referenceFromComposerReference(node.attrs));
       } else if (node.type.name === "skillReference") {
         references.push({
           type: "skill",
@@ -6478,6 +6378,18 @@ function TiptapComposerSurface({
     });
   }, [editor, editorLocked]);
 
+  // The editor ignores attributes it did not set, so these follow the panel without a re-render.
+  const mentionPanelOpen = popover !== null;
+  useEffect(() => {
+    if (!isComposerEditorUsable(editor)) return;
+    const dom = editor.view.dom;
+    if (mentionPanelOpen) dom.setAttribute("aria-controls", mentionListboxId);
+    else dom.removeAttribute("aria-controls");
+    if (mentionPanelOpen && activeMentionOptionId)
+      dom.setAttribute("aria-activedescendant", activeMentionOptionId);
+    else dom.removeAttribute("aria-activedescendant");
+  }, [editor, mentionPanelOpen, mentionListboxId, activeMentionOptionId]);
+
   const launchersDisabled = disabled || contextControlsDisabled;
 
   const contextLauncherItems = useMemo(() => {
@@ -6696,7 +6608,7 @@ function TiptapComposerSurface({
           {slotReferences.map((ref) => (
             <span
               key={ref.slotKey}
-              className="inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-background px-2 py-0.5 agent-kit-caption-copy font-medium text-foreground shadow-sm"
+              className="inline-flex h-5 max-w-full items-center gap-1 rounded-[var(--agent-kit-radius-xs,0.25rem)] border border-border bg-background px-2 text-xs leading-4 font-medium text-foreground shadow-sm"
             >
               <MentionItemMedia
                 media={ref.media}
@@ -6723,7 +6635,7 @@ function TiptapComposerSurface({
                   defaultValue: "Remove {{name}} reference",
                   name: slotReferenceTitle(ref),
                 })}
-                className="-my-1 -me-1.5 flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
+                className="-my-1 -me-1.5 flex size-6 shrink-0 items-center justify-center rounded-[var(--agent-kit-radius-xs,0.25rem)] text-muted-foreground hover:bg-accent hover:text-foreground"
               >
                 <IconX aria-hidden="true" className="h-3 w-3" />
               </button>
@@ -6738,7 +6650,7 @@ function TiptapComposerSurface({
                 data-state={
                   selectedContextItemKey === item.key ? "selected" : undefined
                 }
-                className={`inline-flex max-w-full items-center gap-1.5 rounded-md border px-2 py-0.5 agent-kit-caption-copy font-medium text-foreground ${
+                className={`inline-flex h-5 max-w-full items-center gap-1 rounded-[var(--agent-kit-radius-xs,0.25rem)] border px-2 text-xs leading-4 font-medium text-foreground ${
                   selectedContextItemKey === item.key
                     ? "border-ring bg-accent ring-2 ring-ring/40"
                     : "border-border bg-muted/50"
@@ -6752,16 +6664,20 @@ function TiptapComposerSurface({
                     className="size-3 shrink-0 animate-spin motion-reduce:animate-none text-muted-foreground"
                   />
                 ) : item.status === "error" ? (
-                  <IconAlertCircle
+                  <IconAlertTriangle
                     aria-label={t("agentChat.composer.contextError", {
                       defaultValue: "Context failed",
                     })}
-                    className="size-3 shrink-0 text-destructive"
+                    className="size-3 shrink-0 text-[hsl(var(--agent-kit-warning))]"
                   />
                 ) : (
                   <IconClipboardList className="h-3 w-3 shrink-0 text-muted-foreground" />
                 )}
                 <span className="min-w-0 truncate">{item.title}</span>
+                {/* A title attribute only reaches a pointer, so the reason is read here. */}
+                {item.status === "error" && item.statusMessage ? (
+                  <span className="sr-only">{item.statusMessage}</span>
+                ) : null}
                 {onRemoveContextItem && item.removable !== false ? (
                   <button
                     type="button"
@@ -6774,7 +6690,7 @@ function TiptapComposerSurface({
                       defaultValue: "Remove {{name}} context",
                       name: item.title,
                     })}
-                    className="-my-1 -me-1.5 flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
+                    className="-my-1 -me-1.5 flex size-6 shrink-0 items-center justify-center rounded-[var(--agent-kit-radius-xs,0.25rem)] text-muted-foreground hover:bg-accent hover:text-foreground"
                   >
                     <IconX aria-hidden="true" className="h-3 w-3" />
                   </button>
@@ -6790,7 +6706,7 @@ function TiptapComposerSurface({
                         defaultValue: "Retry {{name}} context",
                         name: item.title,
                       })}
-                      className="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+                      className="flex size-6 shrink-0 items-center justify-center rounded-[var(--agent-kit-radius-xs,0.25rem)] text-muted-foreground hover:bg-accent hover:text-foreground"
                     >
                       <IconRefresh aria-hidden="true" className="size-3.5" />
                     </button>
@@ -6800,6 +6716,11 @@ function TiptapComposerSurface({
                       defaultValue: "Retry {{name}} context",
                       name: item.title,
                     })}
+                    {item.statusMessage ? (
+                      <span className="block text-muted-foreground">
+                        {item.statusMessage}
+                      </span>
+                    ) : null}
                   </TooltipContent>
                 </Tooltip>
               ) : null}
@@ -7027,6 +6948,8 @@ function TiptapComposerSurface({
         onSelectSkill={handleSelectSkill}
         onSelectCommand={handleSelectCommand}
         onClose={closePopover}
+        listboxId={mentionListboxId}
+        onActiveOptionChange={setActiveMentionOptionId}
       />
     </>
   );

package/src/composer/VoiceButton.tsx

@@ -32,6 +32,8 @@ export interface VoiceButtonProps {
   className?: string;
   /** Show a live voice-chat session's controls in this slot (default: true). */
   voiceChat?: boolean;
+  /** Name the ⌘⇧M shortcut (default: true); off outside the composer, which it dictates into. */
+  showShortcut?: boolean;
 }
 
 /**
@@ -45,6 +47,7 @@ export function VoiceButton({
   disabled,
   className,
   voiceChat = true,
+  showShortcut = true,
 }: VoiceButtonProps) {
   const t = useComposerRuntimeAdapters().translate;
   const realtimeVoice = useRealtimeVoiceModeOptional();
@@ -61,10 +64,12 @@ export function VoiceButton({
   }
 
   const shortcut = supportChecked && isMac ? "⌘⇧M" : "Ctrl+Shift+M";
-  const label = t("agentChat.voice.dictation.start", {
-    shortcut,
-    defaultValue: `Dictate (${shortcut})`,
-  });
+  const label = showShortcut
+    ? t("agentChat.voice.dictation.start", {
+        shortcut,
+        defaultValue: `Dictate (${shortcut})`,
+      })
+    : t("agentChat.voice.dictation.startPlain", { defaultValue: "Dictate" });
 
   return (
     <Tooltip>
@@ -180,7 +185,7 @@ export function VoiceDictationPill({ voice }: VoiceRecordingOverlayProps) {
       aria-label={t("agentChat.voice.dictation.recording", {
         defaultValue: "Dictating",
       })}
-      className="flex h-[var(--agentkit-composer-toolbar-control-size,1.5rem)] w-[4.5rem] shrink-0 items-center justify-between gap-1.5 overflow-hidden rounded-full bg-muted ps-2.5 pe-0.5 text-foreground transition-[width,background-color] duration-150 ease-out starting:w-[var(--agentkit-composer-toolbar-control-size,1.5rem)] starting:bg-transparent motion-reduce:transition-none"
+      className="flex h-[var(--agentkit-composer-toolbar-control-size,1.5rem)] w-[4.5rem] shrink-0 items-center justify-between gap-1.5 overflow-hidden rounded-[var(--agent-kit-radius-xs,0.25rem)] bg-muted ps-2.5 pe-0.5 text-foreground transition-[width,background-color] duration-150 ease-out starting:w-[var(--agentkit-composer-toolbar-control-size,1.5rem)] starting:bg-transparent motion-reduce:transition-none"
     >
       {transcribing ? (
         <span
@@ -208,7 +213,7 @@ export function VoiceDictationPill({ voice }: VoiceRecordingOverlayProps) {
             data-agent-composer-slot="voice-stop"
             onClick={state === "recording" ? stop : cancel}
             aria-label={controlLabel}
-            className="flex size-[calc(var(--agentkit-composer-toolbar-control-size,1.5rem)-0.25rem)] shrink-0 items-center justify-center rounded-full bg-foreground text-background transition-colors duration-150 hover:bg-foreground/80"
+            className="flex size-[calc(var(--agentkit-composer-toolbar-control-size,1.5rem)-0.25rem)] shrink-0 items-center justify-center rounded-[calc(var(--agent-kit-radius-xs,0.25rem)-2px)] bg-foreground text-background transition-colors duration-150 hover:bg-foreground/80"
           >
             {transcribing ? (
               <IconX aria-hidden="true" className="size-3" />
@@ -334,7 +339,7 @@ function ComposerPrimaryButton({
           aria-busy={busy || undefined}
           data-agent-composer-slot="send-button"
           data-composer-primary={mode}
-          className="agent-composer-send-button shrink-0 flex size-[var(--agentkit-composer-primary-control-size,1.75rem)] items-center justify-center rounded-full bg-primary text-primary-foreground hover:opacity-90 transition-[opacity,transform] duration-150 active:scale-[0.97] disabled:opacity-30 disabled:cursor-not-allowed"
+          className="agent-composer-send-button shrink-0 flex size-[var(--agentkit-composer-primary-control-size,1.75rem)] items-center justify-center rounded-[var(--agent-kit-radius-sm,0.5rem)] bg-primary text-primary-foreground hover:opacity-90 transition-[opacity,transform] duration-150 active:scale-[0.97] disabled:opacity-30 disabled:cursor-not-allowed"
         >
           {/* Keyed so the glyph swap replays the entry transition in place. */}
           <span

package/src/composer/composer-notice.tsx

@@ -127,7 +127,7 @@ export function ComposerNotice({
       data-notice={noticeId}
       role={role ?? (tone === "danger" ? "alert" : "status")}
       className={cn(
-        "agent-composer-notice flex min-w-0 items-start gap-2 rounded-md border px-3 py-1.5 text-xs leading-5 text-foreground",
+        "agent-composer-notice flex min-w-0 items-start gap-2 rounded-[var(--agent-kit-radius-sm,0.5rem)] border px-3 py-1.5 text-xs leading-5 text-foreground",
         tone === "danger"
           ? "border-destructive/30 bg-destructive/5"
           : "border-[hsl(var(--agent-kit-warning)/0.4)] bg-[hsl(var(--agent-kit-warning)/0.1)]",
@@ -139,7 +139,7 @@ export function ComposerNotice({
         className={cn(
           "mt-1 size-4 shrink-0",
           tone === "danger"
-            ? "text-destructive"
+            ? "text-[color:var(--agent-kit-danger-text)]"
             : "text-[hsl(var(--agent-kit-warning))]",
         )}
       />
@@ -167,7 +167,7 @@ export function ComposerNotice({
           aria-label={dismissLabel}
           title={dismissLabel}
           onClick={onDismiss}
-          className="-me-1.5 flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="-me-1.5 flex size-6 shrink-0 items-center justify-center rounded-[var(--agent-kit-radius-xs,0.25rem)] text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           <IconX aria-hidden="true" className="size-4" />
         </button>

package/src/composer/extensions/FileReference.tsx

@@ -10,7 +10,7 @@ const FileReferenceComponent = ({ node }: { node: any }) => {
   return (
     <NodeViewWrapper as="span" className="inline">
       <span
-        className="inline-flex items-center gap-1 rounded-md border border-input bg-muted/50 px-1.5 py-0.5 text-xs font-medium text-foreground align-middle mx-0.5 max-w-[200px] select-none"
+        className="mx-1 inline-flex max-w-[200px] items-center h-5 gap-1 rounded-[var(--agent-kit-radius-xs,0.25rem)] border border-border bg-muted/50 px-2 text-xs leading-4 font-medium text-foreground align-middle select-none"
         title={node.attrs.path}
       >
         {isFolder ? (

package/src/composer/extensions/SkillReference.tsx

@@ -14,7 +14,7 @@ const SkillReferenceComponent = ({ node }: { node: any }) => {
   return (
     <NodeViewWrapper as="span" className="inline">
       <span
-        className="inline-flex items-center gap-1 rounded-md border border-input bg-muted/50 px-1.5 py-0.5 text-xs font-medium text-foreground align-middle mx-0.5 max-w-[160px] select-none"
+        className="mx-1 inline-flex max-w-[160px] items-center h-5 gap-1 rounded-[var(--agent-kit-radius-xs,0.25rem)] border border-border bg-muted/50 px-2 text-xs leading-4 font-medium text-foreground align-middle select-none"
         title={node.attrs.path}
       >
         <IconStack2 size={14} className="shrink-0 text-muted-foreground" />

package/src/composer/popover-surface.ts

@@ -4,4 +4,4 @@
  * their defaults and the caller's layout classes.
  */
 export const COMPOSER_POPOVER_SURFACE_CLASS =
-  "z-[9999] max-h-[min(27.5rem,calc(var(--agent-native-viewport-height,100dvh)-2rem))] overflow-y-auto rounded-[var(--radius-lg,var(--radius,0.75rem))] border border-[color:color-mix(in_srgb,var(--agent-kit-border,color-mix(in_srgb,CanvasText_16%,transparent))_80%,transparent)] bg-[color:var(--agent-kit-popover-surface,var(--agent-kit-raised-surface,Canvas))] p-1 text-[color:var(--agent-kit-popover-text,var(--agent-kit-text,CanvasText))] shadow-(--agent-kit-overlay-elevation) [font:inherit]";
+  "z-[9999] max-h-[min(27.5rem,calc(var(--agent-native-viewport-height,100dvh)-2rem))] overflow-y-auto rounded-[var(--agent-kit-radius-sm,0.5rem)] [&_[role^=menuitem]]:rounded-[var(--agent-kit-radius-xs,0.25rem)] border border-[color:var(--agent-kit-border,color-mix(in_srgb,CanvasText_16%,transparent))] bg-[color:var(--agent-kit-popover-surface,var(--agent-kit-raised-surface,Canvas))] p-1 text-[color:var(--agent-kit-popover-text,var(--agent-kit-text,CanvasText))] shadow-(--agent-kit-overlay-elevation) [font:inherit]";