@agent-native/toolkit 0.22.0 → 0.22.1-nightly-20260926172134

package/src/composer/ComposerPlusMenu.tsx

@@ -45,6 +45,7 @@ export interface ComposerTerminalModeControl {
 interface ComposerPlusMenuProps {
   onSelectMode?: (mode: ComposerMode) => void;
   addAttachment?: (file: File) => Promise<unknown>;
+  attachmentsEnabled?: boolean;
   onAttachmentError?: (message: string) => void;
   attachmentAccept?: string;
   /**
@@ -309,6 +310,7 @@ function UploadOnlyAttachButton({
 export function ComposerPlusMenu({
   onSelectMode,
   addAttachment,
+  attachmentsEnabled = true,
   onAttachmentError,
   attachmentAccept,
   extensionTools = false,
@@ -316,6 +318,7 @@ export function ComposerPlusMenu({
   terminalModeControl,
 }: ComposerPlusMenuProps) {
   if (mode === "upload-only") {
+    if (!attachmentsEnabled) return null;
     return (
       <UploadOnlyAttachButton
         addAttachment={addAttachment}
@@ -333,6 +336,7 @@ export function ComposerPlusMenu({
     <ComposerPlusMenuFull
       onSelectMode={onSelectMode}
       addAttachment={addAttachment}
+      attachmentsEnabled={attachmentsEnabled}
       onAttachmentError={onAttachmentError}
       attachmentAccept={attachmentAccept}
       extensionTools={extensionTools}
@@ -410,12 +414,14 @@ function ComposerPlusMenuTerminal({
 function ComposerPlusMenuFull({
   onSelectMode,
   addAttachment,
+  attachmentsEnabled,
   onAttachmentError,
   attachmentAccept,
   extensionTools,
 }: Pick<
   ComposerPlusMenuProps,
   | "addAttachment"
+  | "attachmentsEnabled"
   | "onSelectMode"
   | "onAttachmentError"
   | "attachmentAccept"
@@ -510,7 +516,7 @@ function ComposerPlusMenuFull({
   };
 
   const handleFilesSelected = async (files: FileList | null) => {
-    if (!files || files.length === 0) return;
+    if (!attachmentsEnabled || !files || files.length === 0) return;
     try {
       await Promise.all(
         Array.from(files).map((file) =>
@@ -589,19 +595,23 @@ function ComposerPlusMenuFull({
     hoverAction?: () => void;
     isSkill?: boolean;
   }[] = [
-    {
-      icon: <IconUpload className="h-3.5 w-3.5" />,
-      label: t("agentChat.composer.menu.uploadFile", {
-        defaultValue: "Upload File",
-      }),
-      desc: t("agentChat.composer.menu.uploadFileDescription", {
-        defaultValue: "Images, PDFs, text/code, JSON, CSV",
-      }),
-      action: () => {
-        setOpen(false);
-        setTimeout(() => fileUploadRef.current?.click(), 0);
-      },
-    },
+    ...(attachmentsEnabled
+      ? [
+          {
+            icon: <IconUpload className="h-3.5 w-3.5" />,
+            label: t("agentChat.composer.menu.uploadFile", {
+              defaultValue: "Upload File",
+            }),
+            desc: t("agentChat.composer.menu.uploadFileDescription", {
+              defaultValue: "Images, PDFs, text/code, JSON, CSV",
+            }),
+            action: () => {
+              setOpen(false);
+              setTimeout(() => fileUploadRef.current?.click(), 0);
+            },
+          },
+        ]
+      : []),
     {
       icon: <IconPhotoPlus className="h-3.5 w-3.5" />,
       label: t("agentChat.composer.menu.generateImage", {
@@ -698,6 +708,7 @@ function ComposerPlusMenuFull({
         multiple
         accept={attachmentAccept}
         className="hidden"
+        disabled={!attachmentsEnabled}
         onChange={(event) => {
           void handleFilesSelected(event.target.files);
           event.target.value = "";

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

@@ -94,7 +94,7 @@ describe("controlled composer context", () => {
   }
 
   it.each(["host", "provider"] as const)(
-    "%s submission gating allows staging and blocks every send path until ready",
+    "%s submission gating prevents sends until ready",
     async (gate) => {
       const composerRef = React.createRef<TiptapComposerHandle>();
       const onSubmit = vi.fn();
@@ -152,6 +152,29 @@ describe("controlled composer context", () => {
         });
       };
       await render();
+      if (gate === "provider") {
+        expect(
+          container.querySelector('[data-testid="provider-setup"]'),
+        ).not.toBeNull();
+        expect(container.querySelector('[contenteditable="true"]')).toBeNull();
+        expect(
+          container.querySelector('button[aria-label="Add context"]'),
+        ).toBeNull();
+        expect(
+          container.querySelector<HTMLButtonElement>(
+            'button[aria-label="Send message"]',
+          )?.disabled,
+        ).toBe(true);
+        await act(async () =>
+          expect(
+            await composerRef.current!.submitWithText("Blocked prompt"),
+          ).toBe(false),
+        );
+        expect(onSubmit).not.toHaveBeenCalled();
+        expect(onDisabledClick).not.toHaveBeenCalled();
+        blocked = false;
+        await render();
+      }
       const editor = container.querySelector<HTMLElement>(
         '[contenteditable="true"]',
       )!;
@@ -196,33 +219,37 @@ describe("controlled composer context", () => {
       const send = container.querySelector<HTMLButtonElement>(
         'button[aria-label="Send message"]',
       )!;
-      expect(send.disabled).toBe(true);
-      await act(async () => {
-        send.click();
-        editor.dispatchEvent(
-          new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
-        );
-        editor.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: "Enter",
-            metaKey: true,
-            bubbles: true,
-          }),
-        );
-        editor.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: "Enter",
-            ctrlKey: true,
-            bubbles: true,
-          }),
-        );
-        expect(await composerRef.current!.submitWithText("Quick start")).toBe(
-          false,
-        );
-      });
-      expect(onSubmit).not.toHaveBeenCalled();
-      expect(editor.textContent).toBe("Staged draft");
-      expect(files).toEqual([file]);
+      if (gate === "host") {
+        expect(send.disabled).toBe(true);
+        await act(async () => {
+          send.click();
+          editor.dispatchEvent(
+            new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+          );
+          editor.dispatchEvent(
+            new KeyboardEvent("keydown", {
+              key: "Enter",
+              metaKey: true,
+              bubbles: true,
+            }),
+          );
+          editor.dispatchEvent(
+            new KeyboardEvent("keydown", {
+              key: "Enter",
+              ctrlKey: true,
+              bubbles: true,
+            }),
+          );
+          expect(await composerRef.current!.submitWithText("Quick start")).toBe(
+            false,
+          );
+        });
+        expect(onSubmit).not.toHaveBeenCalled();
+        expect(editor.textContent).toBe("Staged draft");
+        expect(files).toEqual([file]);
+      } else {
+        expect(send.disabled).toBe(false);
+      }
       blocked = false;
       await render();
       await act(async () => {
@@ -378,10 +405,9 @@ describe("controlled composer context", () => {
     ).toBe("Keep the editable draft");
   });
 
-  it("a failed provider preflight leaves the draft untouched and returns false", async () => {
+  it("keeps chat locked while provider status is unresolved", async () => {
     const composerRef = React.createRef<TiptapComposerHandle>();
     const onSubmit = vi.fn();
-    const preflight = vi.fn().mockResolvedValue("missing");
     await act(async () =>
       root.render(
         <ComposerRuntimeAdaptersProvider
@@ -391,7 +417,6 @@ describe("controlled composer context", () => {
                 state: "unknown",
                 missing: false,
               }),
-              fetchAgentEngineConfiguredState: preflight,
             },
           }}
         >
@@ -411,11 +436,12 @@ describe("controlled composer context", () => {
         false,
       ),
     );
-    expect(preflight).toHaveBeenCalledOnce();
     expect(onSubmit).not.toHaveBeenCalled();
+    expect(container.querySelector('[contenteditable="true"]')).toBeNull();
+    expect(container.querySelector('[role="status"]')).not.toBeNull();
     expect(
-      container.querySelector('[contenteditable="true"]')?.textContent,
-    ).toBe("Keep my draft");
+      container.querySelector('[contenteditable="false"]')?.textContent,
+    ).toContain("Keep my draft");
   });
 
   it.each(["click", "enter"])(

package/src/composer/PromptComposer.spec.ts

@@ -7,7 +7,9 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   buildPromptComposerSubmission,
   PromptComposer,
-  shouldGateComposerForMissingEngine,
+  resolveComposerModelStatusChecksEnabled,
+  shouldGateComposerForEngine,
+  shouldCheckModelStatus,
   type PromptComposerFile,
 } from "./PromptComposer.js";
 
@@ -25,35 +27,52 @@ afterEach(() => {
   container.remove();
 });
 
-describe("shouldGateComposerForMissingEngine", () => {
-  it("never disables the composer while the status check is unresolved", () => {
-    for (const state of ["unknown", "unavailable"]) {
-      expect(
-        shouldGateComposerForMissingEngine({ state, hasSetupComponent: true }),
-      ).toBe(false);
+describe("shouldGateComposerForEngine", () => {
+  it("blocks typing until provider status confirms the engine is configured", () => {
+    for (const state of ["unknown", "unavailable", "missing"] as const) {
+      expect(shouldGateComposerForEngine(state)).toBe(true);
     }
   });
 
-  it("gates only when a connect affordance can be rendered", () => {
+  it("leaves the composer usable once an engine is configured", () => {
+    expect(shouldGateComposerForEngine("configured")).toBe(false);
+  });
+});
+
+describe("shouldCheckModelStatus", () => {
+  it("checks hosted engines and skips local runtimes", () => {
+    expect(shouldCheckModelStatus({ selectedEngine: "openai" })).toBe(true);
+    expect(shouldCheckModelStatus({ selectedEngine: "codex-cli" })).toBe(false);
     expect(
-      shouldGateComposerForMissingEngine({
-        state: "missing",
-        hasSetupComponent: true,
-      }),
+      shouldCheckModelStatus({ enabled: true, selectedEngine: "codex-cli" }),
     ).toBe(true);
     expect(
-      shouldGateComposerForMissingEngine({
-        state: "missing",
-        hasSetupComponent: false,
-      }),
+      shouldCheckModelStatus({ enabled: false, selectedEngine: "openai" }),
     ).toBe(false);
   });
+});
 
-  it("leaves the composer usable once an engine is configured", () => {
+describe("resolveComposerModelStatusChecksEnabled", () => {
+  it("uses the persisted engine when no picker selection is provided", () => {
+    expect(
+      resolveComposerModelStatusChecksEnabled({ defaultEngine: "codex-cli" }),
+    ).toBe(false);
+    expect(
+      resolveComposerModelStatusChecksEnabled({ defaultEngine: "openai" }),
+    ).toBe(true);
+  });
+
+  it("prefers an explicit engine and honors an explicit host override", () => {
+    expect(
+      resolveComposerModelStatusChecksEnabled({
+        selectedEngine: "codex-cli",
+        defaultEngine: "openai",
+      }),
+    ).toBe(false);
     expect(
-      shouldGateComposerForMissingEngine({
-        state: "configured",
-        hasSetupComponent: true,
+      resolveComposerModelStatusChecksEnabled({
+        enabled: false,
+        selectedEngine: "openai",
       }),
     ).toBe(false);
   });

package/src/composer/PromptComposer.tsx

@@ -44,12 +44,14 @@ import { PastedTextChip } from "./PastedTextChip.js";
 import { escapePromptAttachmentAttribute } from "./prompt-attachments.js";
 import {
   type EngineModelGroup,
+  type ComposerAgentEngineState,
   type AgentChatContextItem,
   type ReasoningEffort,
   useComposerRuntimeAdapters,
 } from "./runtime-adapters.js";
 import {
   DEFAULT_VOICE_DICTATION_ENABLED,
+  isLocalRuntimeEngine,
   TiptapComposer,
   type ComposerAgentOption,
   type ComposerSubmitIntent,
@@ -193,10 +195,7 @@ export interface PromptComposerProps {
   onAgentChange?: (agent: string) => void;
   /** Called when the shared model picker opens or closes. */
   onModelSelectorOpenChange?: (open: boolean) => void;
-  /**
-   * Enable server-backed model/provider status checks. Defaults off when the
-   * host supplies model state and callbacks, otherwise on.
-   */
+  /** Enable server-backed model/provider status checks. Defaults on, except for a selected local runtime. */
   modelStatusChecksEnabled?: boolean;
   /** Called whenever the plain editor text changes. */
   onTextChange?: (text: string) => void;
@@ -294,9 +293,16 @@ function formatInlineTextFile(name: string, text: string): string {
     .join("\n");
 }
 
+/** Chat stays closed until the provider check confirms it can run. */
+export function shouldGateComposerForEngine(
+  state: ComposerAgentEngineState,
+): boolean {
+  return state !== "configured";
+}
+
 /**
- * Show the attached setup treatment only for a confirmed-missing engine with
- * a setup component. Unresolved status does not mean a provider is missing.
+ * Show setup treatment only for a confirmed-missing engine with a setup
+ * component. Unresolved status uses the retry treatment instead.
  */
 export function shouldGateComposerForMissingEngine(input: {
   state: string;
@@ -305,6 +311,24 @@ export function shouldGateComposerForMissingEngine(input: {
   return input.state === "missing" && input.hasSetupComponent;
 }
 
+export function shouldCheckModelStatus(input: {
+  enabled?: boolean;
+  selectedEngine?: string;
+}): boolean {
+  return input.enabled ?? !isLocalRuntimeEngine(input.selectedEngine);
+}
+
+export function resolveComposerModelStatusChecksEnabled(input: {
+  enabled?: boolean;
+  selectedEngine?: string;
+  defaultEngine?: string;
+}): boolean {
+  return shouldCheckModelStatus({
+    enabled: input.enabled,
+    selectedEngine: input.selectedEngine ?? input.defaultEngine,
+  });
+}
+
 export async function buildPromptComposerSubmission(options: {
   text: string;
   attachments?: ReadonlyArray<unknown>;
@@ -602,6 +626,7 @@ function PromptComposerInner({
   composerRef,
 }: PromptComposerProps) {
   const adapters = useComposerRuntimeAdapters();
+  const t = adapters.translate!;
   const modelsAdapter = adapters.models!;
   const BuilderSetupCard = modelsAdapter.BuilderSetupCard;
   const BuilderSetupContent = modelsAdapter.BuilderSetupContent;
@@ -624,13 +649,12 @@ function PromptComposerInner({
   useEffect(() => {
     onAttachmentsChangeRef.current?.(attachmentFiles);
   }, [attachmentFiles]);
-  const hostManagedModels = Boolean(
-    availableModels && selectedModel && onModelChange,
-  );
-  const resolvedModelStatusChecksEnabled =
-    modelStatusChecksEnabled ?? !hostManagedModels;
+  const requestedModelStatusChecksEnabled = shouldCheckModelStatus({
+    enabled: modelStatusChecksEnabled,
+    selectedEngine,
+  });
   const models = modelsAdapter.useChatModels!({
-    enabled: showModelSelector && resolvedModelStatusChecksEnabled,
+    enabled: showModelSelector && requestedModelStatusChecksEnabled,
   });
   const composerModel = showModelSelector
     ? (selectedModel ?? models.selectedModel)
@@ -638,6 +662,12 @@ function PromptComposerInner({
   const composerEngine = showModelSelector
     ? (selectedEngine ?? models.selectedEngine)
     : undefined;
+  const resolvedModelStatusChecksEnabled =
+    resolveComposerModelStatusChecksEnabled({
+      enabled: modelStatusChecksEnabled,
+      selectedEngine,
+      defaultEngine: models.selectedEngine,
+    });
   const composerEffort = showModelSelector
     ? (selectedEffort ?? models.selectedEffort)
     : undefined;
@@ -668,7 +698,14 @@ function PromptComposerInner({
   const agentEngineConfigured = modelsAdapter.useAgentEngineConfigured!(
     resolvedModelStatusChecksEnabled,
   );
-  const missingApiKey = agentEngineConfigured.missing;
+  const engineState = resolvedModelStatusChecksEnabled
+    ? agentEngineConfigured.state
+    : "configured";
+  const missingApiKey =
+    resolvedModelStatusChecksEnabled && engineState === "missing";
+  const engineStatusUnresolved =
+    resolvedModelStatusChecksEnabled &&
+    (engineState === "unknown" || engineState === "unavailable");
   const [missingKeyBouncePulse, setMissingKeyBouncePulse] = useState(0);
   const bounceMissingKeySetup = useCallback(() => {
     setMissingKeyBouncePulse((pulse) => pulse + 1);
@@ -682,30 +719,14 @@ function PromptComposerInner({
     }
   }, []);
   const useInlineMissingKeySetup = layoutVariant === "compact";
-  const gateComposer = shouldGateComposerForMissingEngine({
-    state: agentEngineConfigured.state,
-    hasSetupComponent: Boolean(
-      useInlineMissingKeySetup ? BuilderSetupContent : BuilderSetupCard,
-    ),
-  });
-  const ensureEngineReadyBeforeSubmit = useCallback(async () => {
-    if (agentEngineConfigured.state === "missing") {
-      bounceMissingKeySetup();
-      return false;
-    }
-    if (agentEngineConfigured.state !== "unknown") return true;
-    const state = await modelsAdapter.fetchAgentEngineConfiguredState?.(true, {
-      timeoutMs: 5_000,
-    });
-    if (state === "missing") {
-      bounceMissingKeySetup();
-      return false;
+  const gateComposer = shouldGateComposerForEngine(engineState);
+  const retryEngineStatus = useCallback(() => {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new Event("agent-engine:configured-changed"));
     }
-    return true;
-  }, [agentEngineConfigured.state, bounceMissingKeySetup, modelsAdapter]);
-
+  }, []);
   useEffect(() => {
-    if (!autoFocus || disabled) return;
+    if (!autoFocus || disabled || gateComposer) return;
     const id = window.setTimeout(() => {
       const target =
         typeof handleRef === "object" && handleRef && "current" in handleRef
@@ -714,7 +735,7 @@ function PromptComposerInner({
       target?.focus();
     }, 50);
     return () => window.clearTimeout(id);
-  }, [autoFocus, disabled, handleRef]);
+  }, [autoFocus, disabled, gateComposer, handleRef]);
 
   const handleSubmit = useCallback(
     async (
@@ -772,6 +793,27 @@ function PromptComposerInner({
           />
         </div>
       ) : null}
+      {engineStatusUnresolved ? (
+        <div
+          className="mb-2 flex items-center justify-between gap-3 rounded-md border border-border bg-muted/50 px-3 py-2 text-sm text-muted-foreground"
+          role="status"
+        >
+          <span>
+            {engineState === "unknown"
+              ? t("agentChat.setup.checkingProvider")
+              : t("agentChat.setup.providerStatusUnavailable")}
+          </span>
+          {engineState === "unavailable" ? (
+            <button
+              type="button"
+              className="shrink-0 font-medium text-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={retryEngineStatus}
+            >
+              {t("agentChat.common.retry")}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
       <AgentComposerFrame
         className={cn(
           "text-start",
@@ -783,38 +825,56 @@ function PromptComposerInner({
         style={style}
         rootStyle={rootStyle}
         layoutVariant={layoutVariant}
-        onClick={disabled ? onDisabledClick : undefined}
+        onClick={
+          gateComposer
+            ? missingApiKey
+              ? bounceMissingKeySetup
+              : retryEngineStatus
+            : disabled && onDisabledClick
+              ? () => onDisabledClick()
+              : undefined
+        }
       >
         <PromptAttachmentStrip />
         <TiptapComposer
           contextItems={contextItems}
-          contextMenuItems={contextMenuItems}
+          contextMenuItems={gateComposer ? undefined : contextMenuItems}
           onRemoveContextItem={onRemoveContextItem}
           onInspectContextItem={onInspectContextItem}
           onRetryContextItem={onRetryContextItem}
           attachmentsEnabled={attachmentsEnabled}
           ariaLabel={ariaLabel}
           focusRef={handleRef}
-          disabled={disabled}
-          submissionDisabled={
-            submissionDisabled || agentEngineConfigured.state === "missing"
-          }
+          disabled={disabled || gateComposer}
+          submissionDisabled={submissionDisabled || gateComposer}
           submitting={submitting}
           willQueue={willQueue}
           maxDocumentAttachmentBytes={maxDocumentAttachmentBytes}
           documentAttachmentLimitLabel={documentAttachmentLimitLabel}
-          placeholder={placeholder}
+          placeholder={
+            gateComposer
+              ? engineStatusUnresolved
+                ? t("agentChat.setup.checkingProvider")
+                : t("agentChat.composer.connectAbove", {
+                    defaultValue: "Connect AI above to continue...",
+                  })
+              : placeholder
+          }
           initialText={initialText}
           initialTextKey={initialTextKey}
           onSubmit={handleSubmit}
-          onBeforeSubmit={ensureEngineReadyBeforeSubmit}
           clearOnSubmit={!preserveDraftOnSubmit}
           plusMenuMode={
-            plusMenuMode ?? (attachmentsEnabled ? "upload-only" : "hidden")
+            gateComposer
+              ? "hidden"
+              : (plusMenuMode ??
+                (attachmentsEnabled ? "upload-only" : "hidden"))
           }
           terminalModeControl={terminalModeControl}
           extensionTools={extensionTools}
-          attachButton={attachButton}
+          attachButton={
+            gateComposer || !attachmentsEnabled ? null : attachButton
+          }
           modeControl={modeControl}
           execMode={execMode}
           onExecModeChange={onExecModeChange}