@agent-native/toolkit 0.198.5 → 0.198.6

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

@@ -791,19 +791,16 @@ describe("controlled composer context", () => {
       expect(option).toBeDefined();
       await act(async () => option.click());
       expect(onSelect).toHaveBeenCalledOnce();
+      const contextRow = container.querySelector('[data-context-key="brief"]');
+      expect(contextRow?.querySelectorAll("button")).toHaveLength(1);
       await act(async () => {
-        container
-          .querySelector<HTMLButtonElement>(
-            'button[aria-label="Retry Brief context"]',
-          )!
-          .click();
         container
           .querySelector<HTMLButtonElement>(
             'button[aria-label="Remove Brief context"]',
           )!
           .click();
       });
-      expect(onRetry).toHaveBeenCalledWith("brief");
+      expect(onRetry).not.toHaveBeenCalled();
       expect(onRemove).toHaveBeenCalledWith("brief");
       expect(onDisabledClick).not.toHaveBeenCalled();
       const send = container.querySelector<HTMLButtonElement>(
@@ -1456,7 +1453,7 @@ describe("controlled composer context", () => {
       expect(remove).not.toHaveBeenCalled();
     },
   );
-  it("renders context inside the frame, forwards inspection/retry/removal, and blocks click and keyboard submission until ready", async () => {
+  it("renders a noninteractive context chip with only removal and blocks submission until ready", async () => {
     const onSubmit = vi.fn();
     const onRemoveContextItem = vi.fn();
     const onInspectContextItem = vi.fn();
@@ -1522,25 +1519,41 @@ 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.querySelector("span")?.textContent).toBe("Brief");
+    expect(contextRow.querySelectorAll("button")).toHaveLength(1);
+    expect(
+      contextRow.querySelector('[aria-label="Context failed"]'),
+    ).not.toBeNull();
+    const retryContext = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Retry Brief context"]',
+    );
+    expect(retryContext).not.toBeNull();
+    expect(contextRow.contains(retryContext)).toBe(false);
+    await act(async () => retryContext!.click());
+    expect(onRetryContextItem).toHaveBeenCalledWith("brief");
     await act(async () => {
-      contextRow.querySelector<HTMLButtonElement>("button")!.click();
-      contextRow
-        .querySelector<HTMLButtonElement>(
-          'button[aria-label="Retry Brief context"]',
-        )!
-        .click();
       contextRow
         .querySelector<HTMLButtonElement>(
           'button[aria-label="Remove Brief context"]',
         )!
         .click();
     });
-    expect(onInspectContextItem).toHaveBeenCalledWith("brief");
-    expect(onRetryContextItem).toHaveBeenCalledWith("brief");
+    expect(onInspectContextItem).not.toHaveBeenCalled();
+    expect(onRetryContextItem).toHaveBeenCalledOnce();
     expect(onRemoveContextItem).toHaveBeenCalledWith("brief");
     expect(
       container.querySelector('[data-context-key="brief"]'),
     ).not.toBeNull();
+    item.removable = false;
+    await render();
+    const nonremovableContextRow = container.querySelector(
+      '[data-context-key="brief"]',
+    )!;
+    expect(nonremovableContextRow.querySelectorAll("button")).toHaveLength(0);
+    expect(
+      container.querySelector('button[aria-label="Retry Brief context"]'),
+    ).not.toBeNull();
     item.status = "ready";
     await render();
     await clickSend();

package/src/composer/TiptapComposer.spec.ts

@@ -1581,10 +1581,16 @@ describe("createTiptapComposerExtensions", () => {
             availableModels: [
               {
                 engine: "builder",
-                label: "Builder.io Gateway",
+                label: "OpenAI · Builder.io",
                 models,
                 configured: true,
               },
+              {
+                engine: "claude",
+                label: "Claude · Builder.io",
+                models: ["claude-haiku-4-5"],
+                configured: true,
+              },
             ],
             selectedModel: "gpt-6-luna",
             selectedEngine: "builder",
@@ -1619,6 +1625,9 @@ describe("createTiptapComposerExtensions", () => {
     expect(picker?.textContent).toContain("GPT-6 Luna");
     expect(picker?.textContent).toContain("Claude Opus 5.5");
     expect(picker?.textContent).toContain("Gemini 3.8 Flash");
+    expect(picker?.textContent).toContain("OpenAI");
+    expect(picker?.textContent).toContain("Claude");
+    expect(picker?.textContent).not.toContain("Builder.io");
   });
 
   it("chooses the newest tier version regardless of catalog order", () => {
@@ -1983,8 +1992,11 @@ describe("TiptapComposer slash commands", () => {
       '[data-agent-composer-slot="send-button"]',
     );
     expect(sendButton?.disabled).toBe(true);
-    expect(sendButton?.getAttribute("aria-label")).toMatch(/loading/i);
+    expect(sendButton?.getAttribute("aria-label")).not.toMatch(/loading/i);
     expect(sendButton?.getAttribute("aria-label")).not.toMatch(/checking/i);
+    expect(sendButton?.getAttribute("aria-busy")).toBeNull();
+    expect(sendButton?.querySelector(".animate-spin")).toBeNull();
+    expect(sendButton?.querySelector(".tabler-icon-arrow-up")).not.toBeNull();
   });
 
   it("keeps the editor focused after a successful submission", async () => {

package/src/composer/TiptapComposer.tsx

@@ -14,9 +14,9 @@ import {
   IconPencil,
   IconPlugConnected,
   IconHelpCircle,
-  IconRefresh,
   IconAlertCircle,
   IconLoader2,
+  IconRefresh,
 } from "@tabler/icons-react";
 import Placeholder from "@tiptap/extension-placeholder";
 import { TextSelection } from "@tiptap/pm/state";
@@ -2384,7 +2384,7 @@ function ModelSelector({
                             {showProviderLabels && (
                               <div className="group flex items-center px-2 py-1">
                                 <span className="shrink-0 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-                                  {group.label}
+                                  {group.label.replace(/ · Builder\.io$/i, "")}
                                 </span>
                                 {!group.configured && statusLabel && (
                                   <button
@@ -2607,7 +2607,6 @@ export function TiptapComposer({
   draftScope,
   contextItems: providedContextItems,
   onRemoveContextItem,
-  onInspectContextItem,
   onRetryContextItem,
   contextMenuItems,
   plusMenuMode = "full",
@@ -5151,7 +5150,7 @@ export function TiptapComposer({
           {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-1 text-[11px] font-medium text-foreground shadow-sm"
+              className="inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-background px-2 py-0.5 text-[11px] font-medium text-foreground shadow-sm"
             >
               <MentionItemMedia
                 media={ref.media}
@@ -5185,79 +5184,80 @@ export function TiptapComposer({
             </span>
           ))}
           {contextItems.map((item) => (
-            <span
-              key={item.key}
-              data-context-key={item.key}
-              data-context-status={item.status ?? "ready"}
-              title={item.statusMessage}
-              data-state={
-                selectedContextItemKey === item.key ? "selected" : undefined
-              }
-              className={`inline-flex max-w-full items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] font-medium text-foreground ${
-                selectedContextItemKey === item.key
-                  ? "border-ring bg-accent ring-2 ring-ring/40"
-                  : "border-border bg-muted/50"
-              }`}
-            >
-              {item.status === "pending" ? (
-                <IconLoader2
-                  aria-label={t("agentChat.composer.contextPending", {
-                    defaultValue: "Context pending",
-                  })}
-                  className="size-3 shrink-0 animate-spin motion-reduce:animate-none text-muted-foreground"
-                />
-              ) : item.status === "error" ? (
-                <IconAlertCircle
-                  aria-label={t("agentChat.composer.contextError", {
-                    defaultValue: "Context failed",
-                  })}
-                  className="size-3 shrink-0 text-destructive"
-                />
-              ) : (
-                <IconClipboardList className="h-3 w-3 shrink-0 text-muted-foreground" />
-              )}
-              {onInspectContextItem ? (
-                <button
-                  type="button"
-                  onClick={() => onInspectContextItem(item.key)}
-                  className="min-w-0 truncate hover:underline"
-                >
-                  {item.title}
-                </button>
-              ) : (
+            <React.Fragment key={item.key}>
+              <span
+                data-context-key={item.key}
+                data-context-status={item.status ?? "ready"}
+                title={item.statusMessage}
+                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 text-[11px] font-medium text-foreground ${
+                  selectedContextItemKey === item.key
+                    ? "border-ring bg-accent ring-2 ring-ring/40"
+                    : "border-border bg-muted/50"
+                }`}
+              >
+                {item.status === "pending" ? (
+                  <IconLoader2
+                    aria-label={t("agentChat.composer.contextPending", {
+                      defaultValue: "Context pending",
+                    })}
+                    className="size-3 shrink-0 animate-spin motion-reduce:animate-none text-muted-foreground"
+                  />
+                ) : item.status === "error" ? (
+                  <IconAlertCircle
+                    aria-label={t("agentChat.composer.contextError", {
+                      defaultValue: "Context failed",
+                    })}
+                    className="size-3 shrink-0 text-destructive"
+                  />
+                ) : (
+                  <IconClipboardList className="h-3 w-3 shrink-0 text-muted-foreground" />
+                )}
                 <span className="min-w-0 truncate">{item.title}</span>
-              )}
+                {onRemoveContextItem && item.removable !== false ? (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      selectedContextItemKeyRef.current = null;
+                      setSelectedContextItemKey(null);
+                      onRemoveContextItem?.(item.key);
+                    }}
+                    aria-label={t("agentChat.composer.removeContext", {
+                      defaultValue: "Remove {{name}} context",
+                      name: item.title,
+                    })}
+                    className="ms-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
+                  >
+                    <IconX className="h-3 w-3" />
+                  </button>
+                ) : null}
+              </span>
               {item.status === "error" && onRetryContextItem ? (
-                <button
-                  type="button"
-                  onClick={() => onRetryContextItem(item.key)}
-                  aria-label={t("agentChat.composer.retryContext", {
-                    defaultValue: "Retry {{name}} context",
-                    name: item.title,
-                  })}
-                  className="flex size-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
-                >
-                  <IconRefresh className="size-3" />
-                </button>
-              ) : null}
-              {onRemoveContextItem && item.removable !== false ? (
-                <button
-                  type="button"
-                  onClick={() => {
-                    selectedContextItemKeyRef.current = null;
-                    setSelectedContextItemKey(null);
-                    onRemoveContextItem?.(item.key);
-                  }}
-                  aria-label={t("agentChat.composer.removeContext", {
-                    defaultValue: "Remove {{name}} context",
-                    name: item.title,
-                  })}
-                  className="ms-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
-                >
-                  <IconX className="h-3 w-3" />
-                </button>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => onRetryContextItem(item.key)}
+                      aria-label={t("agentChat.composer.retryContext", {
+                        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"
+                    >
+                      <IconRefresh aria-hidden="true" className="size-3.5" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {t("agentChat.composer.retryContext", {
+                      defaultValue: "Retry {{name}} context",
+                      name: item.title,
+                    })}
+                  </TooltipContent>
+                </Tooltip>
               ) : null}
-            </span>
+            </React.Fragment>
           ))}
         </div>
       )}
@@ -5401,23 +5401,14 @@ export function TiptapComposer({
                     type="button"
                     onClick={() => void submitComposer("immediate")}
                     disabled={!canSend || sendButtonDisabled}
-                    aria-label={
-                      submitting ? t("common.loading") : sendButtonTooltip
-                    }
-                    aria-busy={submitting || undefined}
+                    aria-label={sendButtonTooltip}
                     data-agent-composer-slot="send-button"
                     className="agent-composer-send-button shrink-0 flex h-7 w-7 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"
                   >
-                    {submitting ? (
-                      <IconLoader2 className="size-3.5 animate-spin motion-reduce:animate-none" />
-                    ) : (
-                      <IconArrowUp className="h-3.5 w-3.5" />
-                    )}
+                    <IconArrowUp className="h-3.5 w-3.5" />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>
-                  {submitting ? t("common.loading") : sendButtonTooltip}
-                </TooltipContent>
+                <TooltipContent>{sendButtonTooltip}</TooltipContent>
               </Tooltip>
             )}
           </>

package/src/ui/sonner.spec.ts

@@ -0,0 +1,15 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+const source = readFileSync(new URL("./sonner.tsx", import.meta.url), "utf8");
+
+describe("Sonner toast layout", () => {
+  it("allows toast content to shrink beside an action", () => {
+    expect(source).toContain("group-[.toast]:!min-w-0");
+    expect(source).not.toContain(
+      "group-[.toast]:!min-w-[min(16rem,calc(100vw_-_14rem))]",
+    );
+    expect(source).toContain("group-[.toast]:!shrink-0");
+  });
+});

package/src/ui/sonner.tsx

@@ -8,7 +8,7 @@ type ToasterProps = React.ComponentProps<typeof Sonner>;
 const toastWidthClasses =
   "group-[.toaster]:!w-[var(--width)] group-[.toaster]:!min-w-[min(20rem,calc(100vw_-_2rem))] group-[.toaster]:!max-w-[var(--width)] group-[.toaster]:!gap-3 group-[.toaster]:!break-normal";
 const toastContentClasses =
-  "group-[.toast]:!min-w-[min(16rem,calc(100vw_-_14rem))] group-[.toast]:!flex-1 group-[.toast]:!basis-auto group-[.toast]:break-words";
+  "group-[.toast]:!min-w-0 group-[.toast]:!flex-1 group-[.toast]:!basis-auto group-[.toast]:break-words";
 const toastButtonClasses =
   "group-[.toast]:!shrink-0 group-[.toast]:!whitespace-nowrap";