@agent-native/toolkit 0.198.4 → 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/PromptComposer.tsx

@@ -106,6 +106,7 @@ export interface PromptComposerProps {
   ) => void | Promise<void>;
   /** Return false to stop a submit before it reaches the host runtime. */
   onBeforeSubmit?: () => boolean | Promise<boolean>;
+  onSubmissionPendingChange?: (pending: boolean) => void;
   /** Scope where a failed submission should be recovered after the host forks. */
   getSubmitFailureDraftScope?: () => string | null;
   /** Handle file paste/drop errors in the host chat surface. */
@@ -118,6 +119,8 @@ export interface PromptComposerProps {
   disabled?: boolean;
   /** Block all submission paths while allowing draft, file, and context staging. */
   submissionDisabled?: boolean;
+  /** Disable only the send control while the submission is being accepted. */
+  sendButtonDisabled?: boolean;
   /** Prevent submission while preserving editor focus and draft entry. */
   submitting?: boolean;
   /** Present the primary action as queueing instead of immediate send. */
@@ -608,6 +611,7 @@ function PromptComposerInner({
   ariaLabel,
   disabled,
   submissionDisabled,
+  sendButtonDisabled,
   submitting,
   willQueue = false,
   onDisabledClick,
@@ -680,6 +684,7 @@ function PromptComposerInner({
   imageModelMenu,
   composerRef,
   onBeforeSubmit,
+  onSubmissionPendingChange,
   getSubmitFailureDraftScope,
   onAttachmentError,
   interceptBuildRequestsForBuilder,
@@ -890,6 +895,7 @@ function PromptComposerInner({
           disabled={disabled}
           contextControlsDisabled={engineSubmissionBlocked}
           submissionDisabled={submissionDisabled || engineSubmissionBlocked}
+          sendButtonDisabled={sendButtonDisabled}
           submitting={submitting}
           willQueue={willQueue}
           maxDocumentAttachmentBytes={maxDocumentAttachmentBytes}
@@ -899,6 +905,7 @@ function PromptComposerInner({
           initialTextKey={initialTextKey}
           onSubmit={handleSubmit}
           onBeforeSubmit={onBeforeSubmit}
+          onSubmissionPendingChange={onSubmissionPendingChange}
           getSubmitFailureDraftScope={getSubmitFailureDraftScope}
           onAttachmentError={onAttachmentError}
           interceptBuildRequestsForBuilder={interceptBuildRequestsForBuilder}

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 () => {
@@ -2166,7 +2178,13 @@ describe("TiptapComposer slash commands", () => {
       resolveSubmit = resolve;
     });
     const onBeforeSubmit = vi.fn(() => preflight);
-    const onSubmit = vi.fn(() => submission);
+    const onSubmissionPendingChange = vi.fn();
+    const onSubmit = vi.fn<NonNullable<TiptapComposerProps["onSubmit"]>>(
+      async (_text, _references, _attachments, options) => {
+        await submission;
+        options?.onLocalSubmit?.();
+      },
+    );
     const focusRef = React.createRef<TiptapComposerHandle>();
 
     function Harness() {
@@ -2180,6 +2198,7 @@ describe("TiptapComposer slash commands", () => {
           React.createElement(TiptapComposer, {
             focusRef,
             onBeforeSubmit,
+            onSubmissionPendingChange,
             onSubmit,
             clearOnSubmitImmediately: true,
             includeDefaultSlashSkills: false,
@@ -2209,6 +2228,7 @@ describe("TiptapComposer slash commands", () => {
 
     expect(editor.textContent).toBe("");
     expect(onSubmit).not.toHaveBeenCalled();
+    expect(onSubmissionPendingChange).toHaveBeenLastCalledWith(true);
     act(() => focusRef.current?.setText("follow-up prompt"));
 
     await act(async () => {
@@ -2225,6 +2245,8 @@ describe("TiptapComposer slash commands", () => {
     );
     expect(editor.textContent).toBe("follow-up prompt");
     await act(async () => resolveSubmit());
+    expect(editor.textContent).toBe("follow-up prompt");
+    expect(onSubmissionPendingChange).toHaveBeenLastCalledWith(false);
   });
 
   it("restores a prompt when async preflight declines it", async () => {
@@ -2337,10 +2359,11 @@ describe("TiptapComposer slash commands", () => {
 
   it("clears immediately while submitting and restores the draft on failure", async () => {
     let rejectSubmit!: (error: Error) => void;
-    const onSubmit = vi.fn(
-      () =>
+    const onSubmit = vi.fn<NonNullable<TiptapComposerProps["onSubmit"]>>(
+      (_text, _references, _attachments, options) =>
         new Promise<void>((_resolve, reject) => {
           rejectSubmit = reject;
+          options?.onLocalSubmit?.();
         }),
     );
     const focusRef = React.createRef<TiptapComposerHandle>();
@@ -2384,6 +2407,7 @@ describe("TiptapComposer slash commands", () => {
 
     expect(onSubmit).toHaveBeenCalledOnce();
     expect(editor.textContent).toBe("");
+    act(() => focusRef.current?.setText("follow-up prompt"));
 
     await act(async () => {
       rejectSubmit(new Error("network unavailable"));
@@ -2391,7 +2415,17 @@ describe("TiptapComposer slash commands", () => {
       await Promise.resolve();
     });
 
-    expect(editor.textContent).toBe("send this once");
+    expect(
+      [...editor.querySelectorAll("p")].map(
+        (paragraph) => paragraph.textContent,
+      ),
+    ).toEqual(["send this once", "follow-up prompt"]);
+    expect(localStorage.getItem(getComposerDraftKey())).toContain(
+      "send this once",
+    );
+    expect(localStorage.getItem(getComposerDraftKey())).toContain(
+      "follow-up prompt",
+    );
   });
 
   it("restores the persisted draft when an immediate submit fails after unmount", 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";
@@ -888,6 +888,8 @@ export interface TiptapComposerProps {
   contextControlsDisabled?: boolean;
   /** Prevent submission without making the editable surface lose focus. */
   submissionDisabled?: boolean;
+  /** Disable only the send control while the submission is being accepted. */
+  sendButtonDisabled?: boolean;
   /** Prevent submission while a host request is in flight. */
   submitting?: boolean;
   /** Override the generic document attachment cap for a multipart host. */
@@ -916,6 +918,7 @@ export interface TiptapComposerProps {
   ) => void | Promise<void>;
   /** Return false to stop a submit before it enters the chat runtime. */
   onBeforeSubmit?: () => boolean | Promise<boolean>;
+  onSubmissionPendingChange?: (pending: boolean) => void;
   /** Scope where a failed submission should be recovered after the host forks. */
   getSubmitFailureDraftScope?: () => string | null;
   /**
@@ -2381,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
@@ -2547,6 +2550,7 @@ export function TiptapComposer({
   disabled = false,
   contextControlsDisabled = false,
   submissionDisabled = false,
+  sendButtonDisabled = false,
   submitting = false,
   maxDocumentAttachmentBytes = MAX_DOCUMENT_ATTACHMENT_BYTES,
   documentAttachmentLimitLabel = "PDFs",
@@ -2558,6 +2562,7 @@ export function TiptapComposer({
   initialTextKey,
   onSubmit,
   onBeforeSubmit,
+  onSubmissionPendingChange,
   getSubmitFailureDraftScope,
   clearOnSubmit = true,
   clearOnSubmitImmediately = false,
@@ -2602,7 +2607,6 @@ export function TiptapComposer({
   draftScope,
   contextItems: providedContextItems,
   onRemoveContextItem,
-  onInspectContextItem,
   onRetryContextItem,
   contextMenuItems,
   plusMenuMode = "full",
@@ -4243,7 +4247,6 @@ export function TiptapComposer({
             slotReferencesRef.current.length > 0);
         const canPreserveFollowUp =
           preserveFollowUp &&
-          clearedBeforePreflight &&
           !isForkRecovery &&
           hasFollowUp &&
           (currentDraft === null ||
@@ -4330,6 +4333,7 @@ export function TiptapComposer({
 
       if (onBeforeSubmit) {
         submitInFlightRef.current = true;
+        onSubmissionPendingChange?.(true);
         try {
           const shouldSubmit = await onBeforeSubmit();
           if (!shouldSubmit) {
@@ -4351,6 +4355,7 @@ export function TiptapComposer({
           return false;
         } finally {
           submitInFlightRef.current = false;
+          onSubmissionPendingChange?.(false);
         }
       }
       if (
@@ -4498,6 +4503,7 @@ export function TiptapComposer({
         submitInFlightRef.current = true;
         let locallySubmitted = false;
         let settled = false;
+        onSubmissionPendingChange?.(true);
         const clearSubmittedComposer = () => {
           if (clearOnSubmit) {
             clearComposerDraft(submittingDraftKey, submittingDraftSnapshot);
@@ -4575,7 +4581,7 @@ export function TiptapComposer({
           );
         } catch (error) {
           if (locallySubmitted) {
-            restoreSubmittedDraft();
+            restoreSubmittedDraft(true);
             return true;
           }
           restoreSubmittedDraft(true);
@@ -4593,6 +4599,7 @@ export function TiptapComposer({
         } finally {
           settled = true;
           submitInFlightRef.current = false;
+          onSubmissionPendingChange?.(false);
         }
 
         if (!isCurrentDraftScope()) {
@@ -4685,6 +4692,7 @@ export function TiptapComposer({
       clearOnSubmitImmediately,
       getSubmitFailureDraftScope,
       onBeforeSubmit,
+      onSubmissionPendingChange,
       extractComposerPayload,
       syncComposerState,
       updateSlotReferences,
@@ -5142,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}
@@ -5176,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>
       )}
@@ -5391,24 +5400,15 @@ export function TiptapComposer({
                   <button
                     type="button"
                     onClick={() => void submitComposer("immediate")}
-                    disabled={!canSend}
-                    aria-label={
-                      submitting ? t("common.loading") : sendButtonTooltip
-                    }
-                    aria-busy={submitting || undefined}
+                    disabled={!canSend || sendButtonDisabled}
+                    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";