@agent-native/toolkit 0.221.0-same-host-mcp-20261027-20261027081850 → 0.221.0

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

@@ -1258,9 +1258,9 @@ describe("controlled composer context", () => {
         expect(
           container.querySelector('[data-testid="provider-setup"]'),
         ).not.toBeNull();
-        // A draft can be typed before connecting; only sending is gated.
+        // Nothing can be typed until AI is connected.
         expect(
-          container.querySelector('[contenteditable="true"]'),
+          container.querySelector('[contenteditable="false"]'),
         ).not.toBeNull();
         const uploadTrigger = container.querySelector<HTMLButtonElement>(
           'button[aria-label="Add context"]',
@@ -1271,7 +1271,7 @@ describe("controlled composer context", () => {
           container
             .querySelector('[role="textbox"]')
             ?.getAttribute("aria-disabled"),
-        ).toBe("false");
+        ).toBe("true");
         await act(async () =>
           uploadTrigger.dispatchEvent(
             new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
@@ -1290,6 +1290,10 @@ describe("controlled composer context", () => {
           ).toBe(false),
         );
         expect(onSubmit).not.toHaveBeenCalled();
+        expect(onDisabledClick).not.toHaveBeenCalled();
+        await act(async () =>
+          container.querySelector<HTMLElement>(".ProseMirror")!.click(),
+        );
         expect(onDisabledClick).toHaveBeenCalledOnce();
         onDisabledClick.mockClear();
         blocked = false;
@@ -1662,7 +1666,7 @@ describe("controlled composer context", () => {
         expect(
           container.querySelector('[data-testid="provider-setup"]'),
         ).not.toBeNull();
-        expect(editor.getAttribute("contenteditable")).toBe("true");
+        expect(editor.getAttribute("contenteditable")).toBe("false");
         expect(editor.textContent).toBe("Typed while readiness was checking");
       } else {
         expect(onSubmit).not.toHaveBeenCalled();

package/src/composer/PromptComposer.setup-card.spec.tsx

@@ -0,0 +1,170 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { PromptComposer } from "./PromptComposer.js";
+import {
+  ComposerRuntimeAdaptersProvider,
+  type ComposerAgentEngineState,
+} from "./runtime-adapters.js";
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+
+function SetupCard({ bouncePulse }: { bouncePulse?: number }) {
+  return <div data-testid="setup-card" data-bounce={bouncePulse ?? 0} />;
+}
+
+async function render({
+  readiness,
+  configured,
+  otherProviderConfigured = false,
+  catalogFailed = false,
+  onModelConnectionRequiredChange,
+}: {
+  readiness: ComposerAgentEngineState;
+  configured: boolean;
+  otherProviderConfigured?: boolean;
+  catalogFailed?: boolean;
+  onModelConnectionRequiredChange?: (required: boolean) => void;
+}) {
+  await act(async () => {
+    root.render(
+      <ComposerRuntimeAdaptersProvider
+        adapters={{
+          models: {
+            useAgentEngineConfigured: () => ({
+              missing: readiness === "missing",
+              state: readiness,
+            }),
+            BuilderSetupCard: SetupCard,
+          },
+        }}
+      >
+        <PromptComposer
+          autoFocus={false}
+          onSubmit={vi.fn()}
+          requireAgentEngine
+          modelStatusChecksEnabled={false}
+          availableModels={
+            catalogFailed
+              ? []
+              : [
+                  {
+                    engine: "anthropic",
+                    label: "Anthropic",
+                    models: ["example-model"],
+                    configured,
+                  },
+                  ...(otherProviderConfigured
+                    ? [
+                        {
+                          engine: "openai",
+                          label: "OpenAI",
+                          models: ["other-model"],
+                          configured: true,
+                        },
+                      ]
+                    : []),
+                ]
+          }
+          selectedModel="example-model"
+          selectedEngine="anthropic"
+          onModelChange={vi.fn()}
+          onConnectProvider={vi.fn()}
+          modelListLoading={catalogFailed ? false : undefined}
+          onModelConnectionRequiredChange={onModelConnectionRequiredChange}
+          includeDefaultMentionSearch={false}
+          includeDefaultSlashSkills={false}
+          voiceEnabled={false}
+        />
+      </ComposerRuntimeAdaptersProvider>,
+    );
+  });
+}
+
+const card = () =>
+  container.querySelector<HTMLElement>('[data-testid="setup-card"]');
+const editor = () => container.querySelector<HTMLElement>(".ProseMirror");
+
+describe("PromptComposer with no AI connected", () => {
+  it("shows the setup card and closes the prompt before readiness answers", async () => {
+    const onRequired = vi.fn();
+    await render({
+      readiness: "unknown",
+      configured: false,
+      onModelConnectionRequiredChange: onRequired,
+    });
+
+    expect(card()).not.toBeNull();
+    expect(editor()?.getAttribute("contenteditable")).toBe("false");
+    expect(onRequired).toHaveBeenLastCalledWith(true);
+  });
+
+  it("points a click on the closed prompt at the setup card", async () => {
+    await render({ readiness: "unknown", configured: false });
+
+    await act(async () => {
+      editor()!.click();
+    });
+
+    expect(card()?.dataset.bounce).toBe("1");
+  });
+
+  it("keeps the prompt open once readiness says AI is configured", async () => {
+    await render({ readiness: "configured", configured: false });
+
+    expect(card()).toBeNull();
+    expect(editor()?.getAttribute("contenteditable")).toBe("true");
+  });
+
+  it("keeps the prompt open when only the selected model's provider is unconnected", async () => {
+    const onRequired = vi.fn();
+    await render({
+      readiness: "unknown",
+      configured: false,
+      otherProviderConfigured: true,
+      onModelConnectionRequiredChange: onRequired,
+    });
+
+    expect(card()).toBeNull();
+    expect(editor()?.getAttribute("contenteditable")).toBe("true");
+    expect(onRequired).not.toHaveBeenCalledWith(true);
+  });
+
+  it("keeps the prompt open when the model catalog failed to load", async () => {
+    const onRequired = vi.fn();
+    await render({
+      readiness: "unavailable",
+      configured: false,
+      catalogFailed: true,
+      onModelConnectionRequiredChange: onRequired,
+    });
+
+    expect(card()).toBeNull();
+    expect(editor()?.getAttribute("contenteditable")).toBe("true");
+    expect(onRequired).not.toHaveBeenCalledWith(true);
+  });
+
+  it("keeps the prompt open while the model list has a connected provider", async () => {
+    await render({ readiness: "unknown", configured: true });
+
+    expect(card()).toBeNull();
+    expect(editor()?.getAttribute("contenteditable")).toBe("true");
+  });
+});

package/src/composer/PromptComposer.tsx

@@ -16,7 +16,7 @@ import {
   CompositeAttachmentAdapter,
   SimpleImageAttachmentAdapter,
 } from "@assistant-ui/react";
-import { IconX } from "@tabler/icons-react";
+import { IconAlertTriangle, IconX } from "@tabler/icons-react";
 import {
   useCallback,
   useEffect,
@@ -51,12 +51,19 @@ import type { ComposerTerminalModeControl } from "./ComposerPlusMenu.js";
 import type { ComposerContextSnapshot } from "./context-items.js";
 import { isPastedTextAttachmentName } from "./pasted-text.js";
 import { PastedTextChip } from "./PastedTextChip.js";
-import { escapePromptAttachmentAttribute } from "./prompt-attachments.js";
 import {
+  escapePromptAttachmentAttribute,
+  getUnshrinkableImageError,
+  probeAgentPromptAttachment,
+  type AgentPromptAttachmentReadError,
+} from "./prompt-attachments.js";
+import {
+  type ComposerTranslate,
   type EngineModelGroup,
   type ComposerAgentEngineState,
   type AgentChatContextItem,
   type ReasoningEffort,
+  fallbackTranslate,
   useComposerRuntimeAdapters,
 } from "./runtime-adapters.js";
 import {
@@ -162,6 +169,11 @@ export interface PromptComposerProps {
    * whether this composer shows its own setup card.
    */
   setupCardVisible?: boolean;
+  /**
+   * Reports whether the loaded model list offers only connect paths, so a
+   * host that owns the setup card can show it before readiness answers.
+   */
+  onModelConnectionRequiredChange?: (required: boolean) => void;
   /** Disable only the send control while the submission is being accepted. */
   sendButtonDisabled?: boolean;
   /** Prevent submission while preserving editor focus and draft entry. */
@@ -197,6 +209,8 @@ export interface PromptComposerProps {
   voiceEnabled?: boolean;
   /** Let an empty draft turn Send into the voice-chat button (default: true). Dictation is unaffected. */
   voiceChatEnabled?: boolean;
+  /** Starts voice chat from the empty Send slot in place of the provider's default start. */
+  onVoiceChatStart?: () => void;
   /** Show file upload controls and pass submitted files to onSubmit (default: true). */
   attachmentsEnabled?: boolean;
   /** Opens host-owned storage setup when the user chooses an upload action. */
@@ -362,8 +376,19 @@ class BinaryDocumentAttachmentAdapter implements AttachmentAdapter {
 
 class RasterImageAttachmentAdapter extends SimpleImageAttachmentAdapter {
   public override accept = IMAGE_ATTACHMENT_ACCEPT;
+  private readonly translate: ComposerTranslate;
+
+  constructor(translate: ComposerTranslate) {
+    super();
+    this.translate = translate;
+  }
 
   public override async add(state: { file: File }): Promise<PendingAttachment> {
+    const limitError = await getUnshrinkableImageError(
+      state.file,
+      this.translate,
+    );
+    if (limitError) throw new Error(limitError);
     return { ...(await super.add(state)), id: crypto.randomUUID() };
   }
 }
@@ -374,9 +399,11 @@ class ChatDocumentAttachmentAdapter extends BinaryDocumentAttachmentAdapter {
   public override accept = CHAT_DOCUMENT_ATTACHMENT_ACCEPT;
 }
 
-export function createChatAttachmentAdapter(): AttachmentAdapter {
+export function createChatAttachmentAdapter(
+  translate: ComposerTranslate = fallbackTranslate,
+): AttachmentAdapter {
   return new CompositeAttachmentAdapter([
-    new RasterImageAttachmentAdapter(),
+    new RasterImageAttachmentAdapter(translate),
     new ChatDocumentAttachmentAdapter(),
     new TextAttachmentAdapter(),
   ]);
@@ -576,7 +603,28 @@ function ImagePreviewLightbox({
   );
 }
 
-function AttachmentChip({
+function useAttachmentReadError(
+  attachment: Attachment,
+): AgentPromptAttachmentReadError | null {
+  const file = "file" in attachment ? attachment.file : undefined;
+  const [readError, setReadError] =
+    useState<AgentPromptAttachmentReadError | null>(null);
+  useEffect(() => {
+    setReadError(null);
+    if (!file) return;
+    let active = true;
+    void probeAgentPromptAttachment(file).then((error) => {
+      if (active) setReadError(error);
+    });
+    return () => {
+      active = false;
+    };
+  }, [file]);
+  return readError;
+}
+
+/** @internal exported for unit tests only */
+export function AttachmentChip({
   attachment,
   onRemove,
 }: {
@@ -587,8 +635,48 @@ function AttachmentChip({
   const isImage =
     getAttachmentImageFile(attachment) !== null ||
     getAttachmentContentImageSrc(attachment) !== null;
+  const readError = useAttachmentReadError(attachment);
   const t = useComposerRuntimeAdapters().translate!;
 
+  if (readError) {
+    const message =
+      readError === "too-large"
+        ? t("agentChat.composer.attachmentTooLarge", {
+            defaultValue: "File is over 8 MB",
+          })
+        : readError === "not-utf8"
+          ? t("agentChat.composer.attachmentNotUtf8", {
+              defaultValue: "File isn't UTF-8 text",
+            })
+          : t("agentChat.composer.attachmentReadFailed", {
+              defaultValue: "Couldn't read this file",
+            });
+    return (
+      <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"
+      >
+        <IconAlertTriangle className="h-4 w-4 shrink-0 text-amber-500" />
+        <span className="flex min-w-0 flex-col">
+          <span className="truncate font-medium">{attachment.name}</span>
+          <span className="truncate text-muted-foreground">{message}</span>
+        </span>
+        <button
+          type="button"
+          onClick={() => onRemove(attachment.id)}
+          aria-label={t("agentChat.composer.removeAttachment", {
+            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"
+        >
+          <IconX className="h-3 w-3" />
+        </button>
+      </div>
+    );
+  }
+
   if (isPastedTextAttachmentName(attachment.name)) {
     return <PastedTextChip attachment={attachment} onRemove={onRemove} />;
   }
@@ -704,6 +792,7 @@ function PromptComposerInner({
   submissionDisabled,
   showMissingApiKeySetup = true,
   setupCardVisible: hostSetupCardVisible,
+  onModelConnectionRequiredChange,
   sendButtonDisabled,
   submitting,
   willQueue = false,
@@ -724,6 +813,7 @@ function PromptComposerInner({
   showAutoModelOption = true,
   voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED,
   voiceChatEnabled = true,
+  onVoiceChatStart,
   attachmentsEnabled = true,
   onAttachmentRequest,
   contextButtonTooltipDisabled = false,
@@ -886,7 +976,21 @@ function PromptComposerInner({
   const engineState = engineStatusChecksEnabled
     ? agentEngineConfigured.state
     : "configured";
-  const missingApiKey = engineStatusChecksEnabled && engineState === "missing";
+  const [modelListNeedsConnection, setModelListNeedsConnection] =
+    useState(false);
+  const handleModelConnectionRequiredChange = useCallback(
+    (required: boolean) => {
+      setModelListNeedsConnection(required);
+      onModelConnectionRequiredChange?.(required);
+    },
+    [onModelConnectionRequiredChange],
+  );
+  // The model list knows nothing is connected well before the readiness
+  // check answers; an answer of "configured" still wins.
+  const missingApiKey =
+    engineStatusChecksEnabled &&
+    (engineState === "missing" ||
+      (engineState !== "configured" && modelListNeedsConnection));
   const [setupBouncePulse, setSetupBouncePulse] = useState(0);
   const [providerCheckPending, setProviderCheckPending] = useState(false);
   const heldProviderDraftRef = useRef<ComposerDraftSnapshot | null>(null);
@@ -897,13 +1001,16 @@ function PromptComposerInner({
     }
   }, []);
   const engineSubmissionBlocked = shouldGateComposerForEngine(engineState);
-  // A missing provider leaves the draft editable; the send gate below holds
-  // the draft and points at the setup card instead.
-  const composerDisabled = Boolean(disabled);
   const ownSetupCardVisible = Boolean(
     missingApiKey && showMissingApiKeySetup && BuilderSetupCard,
   );
   const setupCardVisible = hostSetupCardVisible ?? ownSetupCardVisible;
+  // With nothing connected the prompt is closed to typing and a click on it
+  // points at the setup card; without a card on screen it stays open, since a
+  // closed prompt with nothing to explain it is a dead end.
+  const composerDisabled = Boolean(
+    disabled || (missingApiKey && setupCardVisible),
+  );
   const handleDisabledComposerClick = useCallback(() => {
     if (missingApiKey) setSetupBouncePulse((pulse) => pulse + 1);
     onDisabledClick?.();
@@ -1043,7 +1150,9 @@ function PromptComposerInner({
       <AgentComposerFrame
         className={cn(
           "text-start",
-          (composerDisabled || missingApiKey) &&
+          (composerDisabled ||
+            (engineStatusChecksEnabled && engineState === "missing") ||
+            (missingApiKey && setupCardVisible)) &&
             "agent-composer-area--attached-above",
           className,
         )}
@@ -1138,6 +1247,7 @@ function PromptComposerInner({
           onSlashCommand={onSlashCommand}
           voiceEnabled={voiceEnabled}
           voiceChatEnabled={voiceChatEnabled}
+          onVoiceChatStart={onVoiceChatStart}
           onTextChange={onTextChange}
           mentionItems={mentionItems}
           mentionItemsError={mentionItemsError}
@@ -1170,6 +1280,7 @@ function PromptComposerInner({
           onConnectLocalRuntime={onConnectLocalRuntime}
           imageModelMenu={imageModelMenu}
           setupCardVisible={setupCardVisible}
+          onModelConnectionRequiredChange={handleModelConnectionRequiredChange}
         />
       </AgentComposerFrame>
     </>
@@ -1188,17 +1299,17 @@ function PromptComposerInner({
  * without needing the outer chat to be mounted.
  */
 function PromptComposerRuntime(props: PromptComposerProps) {
-  const StaleIndexBoundary =
-    useComposerRuntimeAdapters().agentChat!.StaleIndexBoundary!;
+  const adapters = useComposerRuntimeAdapters();
+  const StaleIndexBoundary = adapters.agentChat.StaleIndexBoundary;
   const attachmentAdapter = useMemo(
     () =>
       props.attachmentAdapter ??
       new CompositeAttachmentAdapter([
-        new RasterImageAttachmentAdapter(),
+        new RasterImageAttachmentAdapter(adapters.translate),
         new BinaryDocumentAttachmentAdapter(),
         new TextAttachmentAdapter(),
       ]),
-    [props.attachmentAdapter],
+    [props.attachmentAdapter, adapters.translate],
   );
   const runtime = useLocalRuntime(NOOP_ADAPTER, {
     adapters: { attachments: attachmentAdapter },

package/src/composer/RealtimeVoiceMode.spec.tsx

@@ -68,6 +68,12 @@ const copy: RealtimeVoiceModeCopy = {
     error: "Voice mode needs attention",
     ending: "Ending voice mode",
   },
+  thinking: "Thinking",
+  approval: {
+    question: (toolLabel) => `Approve to run ${toolLabel}?`,
+    approve: "Approve",
+    deny: "Deny",
+  },
   errors: {
     unsupported: "Unsupported",
     responseFailed: "Response failed",
@@ -93,6 +99,9 @@ function voiceSession(
     start: vi.fn(async () => {}),
     end: vi.fn(),
     dismissError: vi.fn(),
+    currentToolName: null,
+    approvals: [],
+    resolveApproval: vi.fn(async () => {}),
     ...overrides,
   } as unknown as RealtimeVoiceModeApi;
 }
@@ -171,6 +180,45 @@ describe("RealtimeVoiceComposerControls", () => {
     expect(new Set(bars())).toEqual(new Set(["scaleY(0.4)"]));
   });
 
+  it("names the step it is working on, and says it is thinking between steps", () => {
+    const status = () =>
+      slot("voice-chat-status")?.querySelector('[role="status"]')?.textContent;
+    renderControls(voiceSession({ state: "working" }));
+    expect(status()).toBe("Thinking");
+
+    renderControls(
+      voiceSession({ state: "working", currentToolName: "patch-deck" }),
+    );
+    expect(status()).toBe("Patch deck");
+  });
+
+  it("asks to approve a waiting tool call in place of the status", () => {
+    const voice = voiceSession({
+      state: "working",
+      approvals: [{ callId: "call-delete", toolName: "delete-slide" }],
+    });
+    renderControls(voice);
+
+    expect(slot("voice-chat-status")).toBeNull();
+    const approval = slot("voice-chat-approval")!;
+    expect(approval.querySelector('[role="status"]')?.textContent).toBe(
+      "Approve to run Delete slide?",
+    );
+    const [approve, deny] = Array.from(approval.querySelectorAll("button"));
+    act(() => approve!.click());
+    act(() => deny!.click());
+    expect(voice.resolveApproval).toHaveBeenNthCalledWith(
+      1,
+      "call-delete",
+      true,
+    );
+    expect(voice.resolveApproval).toHaveBeenNthCalledWith(
+      2,
+      "call-delete",
+      false,
+    );
+  });
+
   it("toggles speaker and microphone mute with pressed states", () => {
     const voice = voiceSession();
     renderControls(voice);

package/src/composer/RealtimeVoiceMode.tsx

@@ -7,7 +7,9 @@ import {
   IconX,
 } from "@tabler/icons-react";
 
+import { Button } from "../ui/button.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { realtimeVoiceToolLabel } from "./realtime-voice-transcript.js";
 import type { RealtimeVoiceModeApi } from "./useRealtimeVoiceMode.js";
 import { VoiceLevelWaveform } from "./voice-waveform.js";
 
@@ -55,6 +57,13 @@ export interface RealtimeVoiceModeCopy {
     >;
   };
   status: Record<RealtimeVoiceModeState, string>;
+  /** Shown while working with no tool running: the model is deciding. */
+  thinking: string;
+  approval: {
+    question: (toolLabel: string) => string;
+    approve: string;
+    deny: string;
+  };
   errors: {
     unsupported: string;
     responseFailed: string;
@@ -115,9 +124,39 @@ export function RealtimeVoiceComposerControls({
     ? copy.unmuteMicrophone
     : copy.muteMicrophone;
 
+  const approval = state === "ending" ? undefined : voice.approvals[0];
+
   return (
     <>
-      {state !== "error" ? (
+      {approval ? (
+        <div
+          data-agent-composer-slot="voice-chat-approval"
+          className="flex min-w-0 shrink items-center gap-1"
+        >
+          <span
+            role="status"
+            aria-live="polite"
+            className="min-w-0 truncate ps-1 agent-kit-caption-copy text-foreground"
+          >
+            {copy.approval.question(realtimeVoiceToolLabel(approval.toolName))}
+          </span>
+          <Button
+            type="button"
+            size="xs"
+            onClick={() => void voice.resolveApproval(approval.callId, true)}
+          >
+            {copy.approval.approve}
+          </Button>
+          <Button
+            type="button"
+            size="xs"
+            variant="ghost"
+            onClick={() => void voice.resolveApproval(approval.callId, false)}
+          >
+            {copy.approval.deny}
+          </Button>
+        </div>
+      ) : state !== "error" ? (
         <div
           data-agent-composer-slot="voice-chat-status"
           data-voice-speaker={
@@ -157,7 +196,11 @@ export function RealtimeVoiceComposerControls({
             aria-live="polite"
             className="min-w-0 truncate agent-kit-caption-copy text-muted-foreground"
           >
-            {copy.status[state]}
+            {state === "working"
+              ? voice.currentToolName
+                ? realtimeVoiceToolLabel(voice.currentToolName)
+                : copy.thinking
+              : copy.status[state]}
           </span>
         </div>
       ) : null}