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

package/src/composer/PromptComposer.tsx

@@ -668,7 +668,7 @@ export function AttachmentChip({
       <div
         role="status"
         title={message}
-        className="agent-composer-attachment-chip group relative inline-flex max-w-[240px] items-center gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-xs"
+        className="agent-composer-attachment-chip group relative inline-flex max-w-[240px] items-center gap-2 rounded-[var(--agent-kit-radius-sm,0.5rem)] border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-xs"
       >
         <IconAlertTriangle className="h-4 w-4 shrink-0 text-amber-500" />
         <span className="flex min-w-0 flex-col">
@@ -682,7 +682,7 @@ export function AttachmentChip({
             name: attachment.name,
             defaultValue: `Remove ${attachment.name}`,
           })}
-          className="flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground"
+          className="relative 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-['']"
         >
           <IconX className="h-3 w-3" />
         </button>
@@ -704,7 +704,7 @@ export function AttachmentChip({
               name: attachment.name,
               defaultValue: `Preview ${attachment.name}`,
             })}
-            className="agent-composer-attachment-image group flex h-16 min-w-16 max-w-28 cursor-zoom-in items-center justify-center overflow-hidden rounded-lg border border-border/70 bg-muted/50"
+            className="agent-composer-attachment-image group flex h-16 min-w-16 max-w-28 cursor-zoom-in items-center justify-center overflow-hidden rounded-[var(--agent-kit-radius-sm,0.5rem)] border border-border bg-muted/50"
           >
             {src ? (
               <img
@@ -723,7 +723,7 @@ export function AttachmentChip({
             defaultValue: `Remove ${attachment.name}`,
           })}
           data-agent-composer-slot="attachment-remove"
-          className="absolute end-1 top-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border border-border/60 bg-background/90 text-muted-foreground hover:text-foreground after:absolute after:-inset-0.5 after:content-['']"
+          className="absolute end-1 top-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-[var(--agent-kit-radius-xs,0.25rem)] border border-border bg-background/90 text-muted-foreground hover:text-foreground after:absolute after:-inset-0.5 after:content-['']"
         >
           <IconX className="h-3 w-3" />
         </button>
@@ -732,8 +732,8 @@ export function AttachmentChip({
   }
 
   return (
-    <div className="agent-composer-attachment-chip group relative inline-flex max-w-[200px] items-center gap-2 rounded-md border border-border/70 bg-muted/50 px-2 py-1.5 text-xs">
-      <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-background agent-kit-micro-copy font-semibold uppercase text-muted-foreground">
+    <div className="agent-composer-attachment-chip group relative inline-flex max-w-[200px] items-center gap-2 rounded-[var(--agent-kit-radius-sm,0.5rem)] border border-border bg-muted/50 px-2 py-1.5 text-xs">
+      <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--agent-kit-radius-xs,0.25rem)] bg-background agent-kit-micro-copy font-semibold uppercase text-muted-foreground">
         {attachment.name.split(".").pop() ||
           t("agentChat.composer.file", { defaultValue: "file" })}
       </div>
@@ -746,7 +746,7 @@ export function AttachmentChip({
           defaultValue: `Remove ${attachment.name}`,
         })}
         data-agent-composer-slot="attachment-remove"
-        className="relative 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-['']"
+        className="relative 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-['']"
       >
         <IconX className="h-3 w-3" />
       </button>
@@ -758,8 +758,11 @@ const NO_HIDDEN_ATTACHMENTS: readonly string[] = [];
 
 function PromptAttachmentStrip({
   hiddenIds = NO_HIDDEN_ATTACHMENTS,
+  onRemoved,
 }: {
   hiddenIds?: readonly string[];
+  /** Runs after a chip is removed, so focus has somewhere to land. */
+  onRemoved?: () => void;
 }) {
   const allAttachments = useComposer((state) => state.attachments);
   const attachments = hiddenIds.length
@@ -770,8 +773,9 @@ function PromptAttachmentStrip({
   const handleRemove = useCallback(
     (id: string) => {
       void aui.composer().attachment({ id }).remove();
+      onRemoved?.();
     },
-    [aui],
+    [aui, onRemoved],
   );
 
   if (attachments.length === 0) return null;
@@ -1100,6 +1104,7 @@ function PromptComposerInner({
       window.dispatchEvent(new Event("agent-engine:configured-changed"));
     }
   }, []);
+  const focusComposer = useCallback(() => localRef.current?.focus(), []);
   const firstRunOwnsSurface = useFirstRunOnboardingGateOwnsSurface();
   useEffect(() => {
     if (!autoFocus || composerDisabled || firstRunOwnsSurface) return;
@@ -1210,7 +1215,10 @@ function PromptComposerInner({
             {t("agentChat.setup.providerStatusUnavailable")}
           </ComposerNotice>
         ) : null}
-        <PromptAttachmentStrip hiddenIds={optimisticAttachmentIds} />
+        <PromptAttachmentStrip
+          hiddenIds={optimisticAttachmentIds}
+          onRemoved={focusComposer}
+        />
         <TiptapComposer
           contextItems={contextItems}
           contextMenuItems={contextMenuItems}

package/src/composer/RealtimeVoiceMode.tsx

@@ -166,7 +166,7 @@ export function RealtimeVoiceComposerControls({
                 ? "user"
                 : "idle"
           }
-          className="flex h-[var(--agentkit-composer-toolbar-control-size,1.5rem)] min-w-0 shrink items-center gap-1.5 overflow-hidden rounded-full bg-muted ps-2 pe-2.5 transition-[width,background-color] duration-150 ease-out starting:bg-transparent motion-reduce:transition-none"
+          className="flex h-[var(--agentkit-composer-toolbar-control-size,1.5rem)] min-w-0 shrink items-center gap-1.5 overflow-hidden rounded-[var(--agent-kit-radius-xs,0.25rem)] bg-muted ps-2 pe-2.5 transition-[width,background-color] duration-150 ease-out starting:bg-transparent motion-reduce:transition-none"
         >
           {state === "connecting" ? (
             <IconLoader2
@@ -270,7 +270,7 @@ export function RealtimeVoiceEndButton({
           onClick={() =>
             voice.state === "error" ? voice.dismissError() : voice.end()
           }
-          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"
         >
           <span
             key={settling ? "settling" : "end"}

package/src/composer/TiptapComposer.model-picker.spec.tsx

@@ -264,26 +264,23 @@ describe("TiptapComposer model picker", () => {
       "gpt-6-1-sol",
       "gemini-3-1-pro",
       "claude-sonnet-5-5",
+      // oracle-change: the model menu dropped its details card, printed digits and Recommended badges.
+    ]);
+    // Digit shortcuts are announced, not printed.
+    expect(rows.map((row) => row.textContent)).toEqual([
+      "Auto",
+      "Opus 5.5",
+      "GPT-6.1 Sol",
+      "Gemini 3.1 Pro",
+      "Sonnet 5.5",
+    ]);
+    expect(rows.map((row) => row.getAttribute("aria-keyshortcuts"))).toEqual([
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
     ]);
-    expect(rows[1]!.textContent).toBe("Opus 5.5" + "2");
-    expect(rows[1]!.textContent).not.toContain("Flagship capability");
-    // Auto's badge follows its name inside the label group; only the check
-    // and the shortcut sit at the far end.
-    const autoLabel = rows[0]!.firstElementChild!;
-    expect(autoLabel.firstElementChild?.textContent).toBe("Auto");
-    expect(autoLabel.lastElementChild?.textContent).toBe("Recommended");
-    expect(
-      rows.slice(1).some((row) => row.textContent?.includes("Recommended")),
-    ).toBe(false);
-    // The current model's check takes its number's place in the one
-    // trailing column.
-    expect(
-      rows.map(
-        (row) =>
-          row.lastElementChild?.textContent ||
-          (row.lastElementChild?.querySelector("svg") ? "check" : ""),
-      ),
-    ).toEqual(["1", "2", "3", "4", "check"]);
     const selected = rows.filter(
       (row) => row.getAttribute("aria-checked") === "true",
     );
@@ -425,12 +422,6 @@ describe("TiptapComposer model picker", () => {
     const [row] = topLevelRows(menu);
     expect(row!.textContent).toBe("my-fine-tune");
     expect(row!.querySelector(".agent-kit-caption-copy")).toBeNull();
-    await act(async () => row!.focus());
-    const card = document.querySelector<HTMLElement>(
-      "[data-agent-composer-model-card]",
-    );
-    expect(card?.textContent).toContain("Context window");
-    expect(card?.querySelector('[role="meter"]')).toBeNull();
   });
 
   it("shows the connect choices and no model list with nothing connected", async () => {
@@ -505,14 +496,13 @@ describe("TiptapComposer model picker", () => {
     expect(onModelChange).toHaveBeenCalledWith("gpt-6-1-sol", "builder");
     expect(document.querySelector('[role="menu"]')).toBeNull();
 
-    // The current row shows a check instead of 1, and 1 still selects it.
     const reopened = await openPicker();
-    expect(topLevelRows(reopened)[0]!.textContent).not.toContain("1");
+    expect(topLevelRows(reopened)[0]!.textContent).toBe("Auto");
     await act(async () => keydown(topLevelRows(reopened)[0]!, "1"));
     expect(onModelChange).toHaveBeenLastCalledWith("auto", "builder");
   });
 
-  it("shows the focused model's ratings, context window, and billing beside the menu", async () => {
+  it("shows nothing beside the menu when a model has focus", async () => {
     act(() =>
       root.render(
         <Harness
@@ -527,45 +517,12 @@ describe("TiptapComposer model picker", () => {
       '[data-agent-composer-model-row="claude-opus-5-5"]',
     )!;
     await act(async () => opus.focus());
-    const card = document.querySelector<HTMLElement>(
-      "[data-agent-composer-model-card]",
-    )!;
-    expect(card.firstElementChild?.textContent).toBe("Opus 5.5");
-    const surface = card.closest<HTMLElement>('[role="tooltip"]')!;
-    expect(surface.className).toMatch(/\bp-4\b/);
-    expect(surface.className).toMatch(/\bw-72\b/);
-    const segments = Array.from(
-      card.querySelectorAll('[role="meter"]')[2]!.children,
-    ).map((segment) => segment.className.match(/bg-\w+/)?.[0]);
-    expect(segments).toEqual([
-      "bg-ring",
-      "bg-ring",
-      "bg-muted",
-      "bg-muted",
-      "bg-muted",
-    ]);
-    expect(card.textContent).toContain(
-      "Most capable Claude model for complex work",
-    );
-    expect(
-      Array.from(card.querySelectorAll('[role="meter"]')).map((meter) =>
-        meter.getAttribute("aria-label"),
-      ),
-    ).toEqual(["Cost 5 of 5", "Reasoning 5 of 5", "Speed 2 of 5"]);
-    expect(card.textContent).toContain("1M tokens");
-    expect(card.textContent).toContain("Uses Builder credits");
-    expect(opus.getAttribute("aria-describedby")).toBe(
-      card.closest('[role="tooltip"]')?.id,
-    );
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+    expect(opus.hasAttribute("aria-describedby")).toBe(false);
     expect(document.activeElement).toBe(opus);
-
-    await act(async () => opus.blur());
-    expect(
-      document.querySelector("[data-agent-composer-model-card]"),
-    ).toBeNull();
   });
 
-  it("picks effort from a submenu that marks the default level", async () => {
+  it("picks effort from a submenu", async () => {
     const onEffortChange = vi.fn();
     act(() =>
       root.render(
@@ -615,13 +572,7 @@ describe("TiptapComposer model picker", () => {
     expect(
       levels.filter((level) => level.getAttribute("aria-checked") === "true"),
     ).toEqual([levels[4]]);
-    // The badge marks the provider's default level, not a harness default.
-    expect(
-      levels.filter((level) => level.textContent?.includes("Recommended")),
-    ).toEqual([levels[1]]);
-    expect(levels[1]!.firstElementChild?.lastElementChild?.textContent).toBe(
-      "Recommended",
-    );
+    expect(panel.textContent).not.toContain("Recommended");
     expect(panel.textContent).not.toMatch(/usage/);
 
     await act(async () => levels[2]!.click());
@@ -781,7 +732,7 @@ describe("TiptapComposer model picker", () => {
     expect(document.querySelector('[role="menu"]')).not.toBeNull();
   });
 
-  it("stacks More models in one menu on a narrow viewport, without the card", async () => {
+  it("stacks More models in one menu on a narrow viewport", async () => {
     Object.defineProperty(window, "innerWidth", {
       configurable: true,
       value: 390,
@@ -806,16 +757,6 @@ describe("TiptapComposer model picker", () => {
     ).toContain("Codex");
     expect(topLevelRows(menu)).toHaveLength(BUILDER_MODELS.length);
     expect(document.querySelectorAll('[role="menu"]')).toHaveLength(1);
-    await act(async () =>
-      menu
-        .querySelector<HTMLElement>(
-          '[data-agent-composer-model-row="claude-opus-5-5"]',
-        )!
-        .focus(),
-    );
-    expect(
-      document.querySelector("[data-agent-composer-model-card]"),
-    ).toBeNull();
   });
 
   it("keeps the plain row list without a catalog", async () => {