@agent-native/toolkit 0.205.0 → 0.206.0-nightly-20261009011246

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -66,7 +66,10 @@ import { buildSignInReturnHref } from "@agent-native/core/client/sign-in-return"
 import { useFileUploadStatus } from "@agent-native/core/client/uploads";
 import { useSession } from "@agent-native/core/client/use-session";
 import { AGENTKIT_CHAT_MIGRATION_GUIDE_URL } from "@agent-native/core/package-lifecycle/migration-message";
-import { splitAgentChatContextFromMessage } from "@agent-native/core/shared";
+import {
+  splitAgentChatContextFromMessage,
+  stripAgentChatContextFromMessage,
+} from "@agent-native/core/shared";
 import { writeClipboardText } from "@agent-native/toolkit/clipboard";
 import {
   AgentSuggestionBar,
@@ -177,6 +180,7 @@ import { formatFeedbackReport } from "./feedback-report.js";
 import { FileStorageSetupPopover } from "./FileStorageSetupPopover.js";
 import { reconcileSettledRun } from "./reconcile-settled-run.js";
 import { RunStuckBanner } from "./RunStuckBanner.js";
+import { SESSION_REPLAY_MASK_PROPS } from "./session-replay-privacy.js";
 import { ThinkingDisplayProvider } from "./thinking-display.js";
 
 export interface AgentKitAssistantChatProps extends AssistantChatProps {
@@ -4333,7 +4337,10 @@ function AgentKitComposerSurface({
             className="mx-3 mb-1.5 flex shrink-0 items-start gap-2 rounded-md border border-border bg-muted/70 px-3 py-2 text-xs text-foreground shadow-sm"
           >
             <IconAlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-            <span className="min-w-0 flex-1 break-words leading-snug">
+            <span
+              {...SESSION_REPLAY_MASK_PROPS}
+              className="min-w-0 flex-1 break-words leading-snug"
+            >
               {composerError}
             </span>
             <button
@@ -5044,7 +5051,9 @@ function AgentKitConnectionError({
           </a>
         </>
       ) : (
-        <span>{formatAgentKitErrorText(error, t)}</span>
+        <span {...SESSION_REPLAY_MASK_PROPS}>
+          {formatAgentKitErrorText(error, t)}
+        </span>
       )}
       {error.retryable ? (
         <button
@@ -5059,7 +5068,11 @@ function AgentKitConnectionError({
         </button>
       ) : null}
       {recoveryError ? (
-        <span className="mt-2 block" role="alert">
+        <span
+          {...SESSION_REPLAY_MASK_PROPS}
+          className="mt-2 block"
+          role="alert"
+        >
           {formatAgentKitErrorText(
             { code: "runtime_error", message: recoveryError.message },
             t,
@@ -5390,17 +5403,27 @@ async function uploadAgentChatAttachments(
   );
 }
 
-function agentMessageText(message: AgentMessage): string {
-  return message.parts
+function rawAgentMessageTextFromParts(parts: AgentMessage["parts"]): string {
+  return parts
     .filter((part) => part.type === "text")
-    .map((part) =>
-      part.type === "text"
-        ? splitAgentChatContextFromMessage(part.text).message
-        : "",
-    )
+    .map((part) => (part.type === "text" ? part.text : ""))
     .join("\n");
 }
 
+export function agentMessageTextFromParts(
+  parts: AgentMessage["parts"],
+): string {
+  return stripAgentChatContextFromMessage(rawAgentMessageTextFromParts(parts));
+}
+
+function rawAgentMessageText(message: AgentMessage): string {
+  return rawAgentMessageTextFromParts(message.parts);
+}
+
+function agentMessageText(message: AgentMessage): string {
+  return agentMessageTextFromParts(message.parts);
+}
+
 function persistedAgentMessage(message: AgentMessage): AgentMessage {
   return {
     ...message,
@@ -5432,14 +5455,12 @@ function createAgentKitThreadSnapshot(thread: AgentThreadState) {
       createdAt: message.createdAt,
     },
   }));
-  const firstUserText =
-    messages.find((message) => message.role === "user") &&
-    agentMessageText(messages.find((message) => message.role === "user")!);
-  const latestUserText =
-    [...messages].reverse().find((message) => message.role === "user") &&
-    agentMessageText(
-      [...messages].reverse().find((message) => message.role === "user")!,
-    );
+  const firstUser = messages.find((message) => message.role === "user");
+  const latestUser = [...messages]
+    .reverse()
+    .find((message) => message.role === "user");
+  const firstUserText = firstUser && rawAgentMessageText(firstUser);
+  const latestUserText = latestUser && agentMessageText(latestUser);
   const handoffThread = thread.thread as AgentKitHandoffThreadSnapshot | null;
   const savedTitle = handoffThread?.title?.trim();
   const titleSource: "fallback" | undefined =
@@ -5733,7 +5754,7 @@ function appendVoiceTranscriptsToThreadSnapshot(
     }),
     title:
       snapshot.title ||
-      (firstUser ? fallbackChatTitle(agentMessageText(firstUser)) : ""),
+      (firstUser ? fallbackChatTitle(rawAgentMessageText(firstUser)) : ""),
     preview: latestUser ? agentMessageText(latestUser).slice(0, 280) : "",
     messageCount: messages.length,
   };

package/src/app/chat/AgentPanel.tsx

@@ -1,3 +1,4 @@
+import type { ModelEngineConfig } from "@agent-native/core/agent/model-version";
 import { getBrowserTabId } from "@agent-native/core/client/hooks";
 import { buildSettingsRoute } from "@agent-native/core/navigation";
 import {
@@ -767,6 +768,8 @@ function AgentPanelInner({
   const t = useT();
   const location = useLocation();
   const mounted = useClientOnly();
+  const [activeChatModelEngine, setActiveChatModelEngine] =
+    useState<ModelEngineConfig | null>(null);
   const onboardingPreviewMode = useOnboardingPreviewMode();
   const firstRunOnboardingGateOwnsSurface =
     useFirstRunOnboardingGateOwnsSurface();
@@ -2402,6 +2405,7 @@ function AgentPanelInner({
               emptyStateAddon={emptyStateAddon}
               emptyStateFooter={emptyStateFooter}
               onMessageCountChange={onMessageCountChange}
+              onActiveModelEngineChange={setActiveChatModelEngine}
               suggestions={suggestions}
               dynamicSuggestions={dynamicSuggestions}
               suggestionPlacement={
@@ -2493,7 +2497,7 @@ function AgentPanelInner({
                 </div>
               }
             >
-              <ResourcesPanel />
+              <ResourcesPanel modelEngine={activeChatModelEngine} />
             </Suspense>
           </div>
         )}

package/src/app/chat/MultiTabAssistantChat.spec.tsx

@@ -18,6 +18,7 @@ import {
   sendToAgentChat,
 } from "@agent-native/core/client/agent-chat";
 import { CHAT_MODEL_SELECTION_CHANGED_EVENT } from "@agent-native/core/client/agent-chat";
+import { chatModelSelectionStorageKey } from "@agent-native/core/client/agent-chat";
 import type {
   ChatThreadScope,
   ChatThreadSummary,
@@ -116,6 +117,7 @@ const assistantChatMockState = vi.hoisted(() => ({
 
 const threadMocks = vi.hoisted(() => ({
   activeThreadId: "thread-1" as string | null,
+  isLoading: false,
   evictedThreadIds: [] as string[],
   threads: [
     {
@@ -216,12 +218,14 @@ const ANTHROPIC_ENGINES = [
   {
     name: "anthropic",
     label: "Claude",
+    defaultModel: "claude-sonnet-5-5",
     supportedModels: ["claude-sonnet-5"],
     requiredEnvVars: ["ANTHROPIC_API_KEY"],
   },
   {
     name: "ai-sdk:openai",
     label: "OpenAI",
+    defaultModel: "gpt-5.6-luna",
     supportedModels: ["gpt-5.6-luna"],
     requiredEnvVars: ["OPENAI_API_KEY"],
   },
@@ -246,6 +250,28 @@ function stubCatalog(
   builderConfigured = false,
 ) {
   invalidateClientStatusRequests();
+  const modelEngines = Object.fromEntries(
+    (
+      engines as Array<{
+        name: string;
+        label: string;
+        defaultModel?: string;
+        supportedModels?: string[];
+        acceptsCustomModels?: boolean;
+        preserveCustomModels?: boolean;
+      }>
+    ).map((engine) => [
+      engine.name,
+      {
+        name: engine.name,
+        label: engine.label,
+        defaultModel: engine.defaultModel ?? engine.supportedModels?.[0] ?? "",
+        supportedModels: engine.supportedModels ?? [],
+        ...(engine.acceptsCustomModels ? { acceptsCustomModels: true } : {}),
+        ...(engine.preserveCustomModels ? { preserveCustomModels: true } : {}),
+      },
+    ]),
+  );
   modelCatalogMocks.load = async () => ({
     state: "available",
     groups: buildChatModelGroups({
@@ -253,6 +279,8 @@ function stubCatalog(
       configuredKeys,
       builderConnected: builderConfigured,
     }),
+    modelEngines,
+    currentModelEngine: null,
     defaultModel: "gpt-5-6-luna",
     loadLiveGroups: async () => null,
   });
@@ -353,6 +381,8 @@ vi.mock("./AgentKitAssistantChat.js", async () => {
         composerDisabled?: boolean;
         composerDisabledPlaceholder?: string;
         isActiveComposer?: boolean;
+        isNewThread?: boolean;
+        isThreadStateLoading?: boolean;
         contextScope?: ChatThreadScope | null;
         contextNamespace?: string;
         onThreadRestoreNotFound?: () => void;
@@ -403,6 +433,10 @@ vi.mock("./AgentKitAssistantChat.js", async () => {
           }
           data-disabled-placeholder={props.composerDisabledPlaceholder}
           data-composer-active={props.isActiveComposer ? "true" : "false"}
+          data-new-thread={props.isNewThread ? "true" : "false"}
+          data-thread-state-loading={
+            props.isThreadStateLoading ? "true" : "false"
+          }
           data-context-scope={
             props.contextScope
               ? `${props.contextScope.type}:${props.contextScope.id}`
@@ -427,6 +461,7 @@ function resetThreadMocks() {
   assistantChatMockState.onSaveThread = undefined;
   assistantChatMockState.branchNavigation = undefined;
   threadMocks.activeThreadId = "thread-1";
+  threadMocks.isLoading = false;
   threadMocks.evictedThreadIds = [];
   threadMocks.threads = [
     {
@@ -1024,6 +1059,51 @@ describe("MultiTabAssistantChat postMessage bridge", () => {
     await view.cleanup();
   });
 
+  it("reports the active thread's exact engine to its resource panel", async () => {
+    const storageKey = "resources-engine-context";
+    const engines = [
+      {
+        name: "anthropic",
+        label: "Anthropic",
+        defaultModel: "claude-sonnet-5-5",
+        supportedModels: ["claude-sonnet-5-5", "claude-fable-5"],
+        requiredEnvVars: ["ANTHROPIC_API_KEY"],
+      },
+    ];
+    stubCatalog(engines, ["ANTHROPIC_API_KEY"]);
+    window.localStorage.setItem(
+      chatModelSelectionStorageKey(storageKey),
+      JSON.stringify({ model: "claude-sonnet-5-5", engine: "anthropic" }),
+    );
+
+    let selectedEngine: {
+      name: string;
+      supportedModels: readonly string[];
+    } | null = null;
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const localRoot = createRoot(el);
+    await act(async () => {
+      localRoot.render(
+        <MultiTabAssistantChat
+          storageKey={storageKey}
+          onActiveModelEngineChange={(engine) => {
+            selectedEngine = engine;
+          }}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(selectedEngine).toMatchObject({
+      name: "anthropic",
+      supportedModels: ["claude-sonnet-5-5", "claude-fable-5"],
+    });
+    await act(async () => localRoot.unmount());
+    el.remove();
+  });
+
   it("keeps the last model readiness when status refresh is unavailable", async () => {
     const view = await mountWithCatalog(ANTHROPIC_ENGINES, [
       "ANTHROPIC_API_KEY",
@@ -1049,25 +1129,58 @@ describe("MultiTabAssistantChat postMessage bridge", () => {
 
   it("keeps a host-supplied model catalog instead of the discovered one", async () => {
     stubCatalog(ANTHROPIC_ENGINES, ["ANTHROPIC_API_KEY"]);
+    const storageKey = "host-catalog-test";
+    window.localStorage.setItem(
+      chatModelSelectionStorageKey(storageKey),
+      JSON.stringify({ model: "host-model", engine: "anthropic" }),
+    );
+    let activeEngine: {
+      name: string;
+      defaultModel: string;
+      supportedModels: readonly string[];
+      selectableModels?: readonly string[];
+    } | null = null;
     const el = document.createElement("div");
     document.body.appendChild(el);
     const localRoot = createRoot(el);
     await act(async () => {
       localRoot.render(
         <MultiTabAssistantChat
-          storageKey="host-catalog-test"
+          storageKey={storageKey}
+          onActiveModelEngineChange={(engine) => {
+            activeEngine = engine;
+          }}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(activeEngine).toMatchObject({
+      name: "anthropic",
+      supportedModels: ["claude-sonnet-5"],
+    });
+
+    await act(async () => {
+      localRoot.render(
+        <MultiTabAssistantChat
+          storageKey={storageKey}
           availableModels={[
             {
-              engine: "host",
-              label: "Host",
-              models: ["host-model"],
+              engine: "anthropic",
+              label: "Host Anthropic",
+              models: ["host-model", "host-model-2"],
               configured: true,
             },
           ]}
+          onActiveModelEngineChange={(engine) => {
+            activeEngine = engine;
+          }}
         />,
       );
-    });
-    await act(async () => {
       await Promise.resolve();
       await Promise.resolve();
     });
@@ -1076,7 +1189,13 @@ describe("MultiTabAssistantChat postMessage bridge", () => {
       el
         .querySelector("[data-testid='assistant-chat']")
         ?.getAttribute("data-model-catalog"),
-    ).toBe("host:true");
+    ).toBe("anthropic:true");
+    expect(activeEngine).toMatchObject({
+      name: "anthropic",
+      defaultModel: "host-model",
+      supportedModels: ["host-model", "host-model-2"],
+      selectableModels: ["host-model", "host-model-2"],
+    });
 
     await act(async () => localRoot.unmount());
     el.remove();
@@ -1469,6 +1588,32 @@ describe("MultiTabAssistantChat postMessage bridge", () => {
     window.removeEventListener("agentNative.chatSubmitTarget", onTarget);
   });
 
+  it("shows a known-new chat while the separate thread list is loading", () => {
+    threadMocks.isLoading = true;
+    threadMocks.isNewThread.mockReturnValue(true);
+
+    act(() => {
+      root.render(<MultiTabAssistantChat storageKey="bridge-test" />);
+    });
+
+    const chat = container.querySelector("[data-testid='assistant-chat']");
+    expect(chat?.getAttribute("data-new-thread")).toBe("true");
+    expect(chat?.getAttribute("data-thread-state-loading")).toBe("false");
+  });
+
+  it("keeps existing thread restoration loading while the thread list loads", () => {
+    threadMocks.isLoading = true;
+    threadMocks.isNewThread.mockReturnValue(false);
+
+    act(() => {
+      root.render(<MultiTabAssistantChat storageKey="bridge-test" />);
+    });
+
+    const chat = container.querySelector("[data-testid='assistant-chat']");
+    expect(chat?.getAttribute("data-new-thread")).toBe("false");
+    expect(chat?.getAttribute("data-thread-state-loading")).toBe("true");
+  });
+
   it("creates a foreground tab when the active chat has messages", async () => {
     threadMocks.isNewThread.mockReturnValue(true);
     chatHandleMocks.exportThreadSnapshot.mockReturnValueOnce({

package/src/app/chat/MultiTabAssistantChat.tsx

@@ -1,5 +1,6 @@
 import type { AgentChatAttachment } from "@agent-native/core";
 import { CHATGPT_SUBSCRIPTION_ENGINE_NAME } from "@agent-native/core/agent/chatgpt-subscription-contract";
+import type { ModelEngineConfig } from "@agent-native/core/agent/model-version";
 import type { AgentChatMessage } from "@agent-native/core/client/agent-chat";
 import {
   DEFAULT_MODEL,
@@ -885,6 +886,8 @@ export type MultiTabAssistantChatProps = Omit<
   showScopeBadge?: boolean;
   /** Cadence for hydrating agent-team sub-agent tab status. Default: 3000. */
   agentTeamPollMs?: number;
+  /** Reports the exact model engine selected for the active thread. */
+  onActiveModelEngineChange?: (engine: ModelEngineConfig | null) => void;
 };
 
 export function MultiTabAssistantChat({
@@ -905,6 +908,7 @@ export function MultiTabAssistantChat({
   modelListError: hostModelListError,
   onRetryModelList: hostOnRetryModelList,
   onModelChange: hostOnModelChange,
+  onActiveModelEngineChange,
   ...props
 }: MultiTabAssistantChatProps) {
   const translate = useT();
@@ -1154,6 +1158,9 @@ export function MultiTabAssistantChat({
   const [discoveredModels, setDiscoveredModels] = useState<EngineModelGroup[]>(
     [],
   );
+  const [discoveredModelEngines, setDiscoveredModelEngines] = useState<
+    Readonly<Record<string, ModelEngineConfig>>
+  >({});
   const availableModels = hostAvailableModels ?? discoveredModels;
   const [discoveredModelsLoading, setModelListLoading] = useState(true);
   const [discoveredModelsError, setDiscoveredModelsError] = useState(false);
@@ -1280,6 +1287,51 @@ export function MultiTabAssistantChat({
     [availableModels, persistedModelSelection, modelSelectionVersion],
   );
 
+  useEffect(() => {
+    if (!onActiveModelEngineChange) return;
+    const selection = activeThreadId
+      ? resolveThreadModelSelection(activeThreadId)
+      : undefined;
+    const selectedModel = selection?.model ?? defaultModel;
+    const engineName =
+      selection?.engine ??
+      availableModels.find((group) => group.models.includes(selectedModel))
+        ?.engine;
+    const hostEngineGroups = hostManagedModels
+      ? availableModels.filter((group) => group.engine === engineName)
+      : [];
+    const hostSelectableModels = [
+      ...new Set(hostEngineGroups.flatMap((group) => group.models)),
+    ];
+    const hostModelEngine =
+      engineName && hostSelectableModels.length > 0
+        ? {
+            name: engineName,
+            label: hostEngineGroups[0]?.label ?? engineName,
+            defaultModel: hostSelectableModels.includes(selectedModel)
+              ? selectedModel
+              : hostSelectableModels[0]!,
+            supportedModels: hostSelectableModels,
+            selectableModels: hostSelectableModels,
+          }
+        : null;
+    onActiveModelEngineChange(
+      hostManagedModels
+        ? hostModelEngine
+        : engineName
+          ? (discoveredModelEngines[engineName] ?? null)
+          : null,
+    );
+  }, [
+    activeThreadId,
+    availableModels,
+    defaultModel,
+    discoveredModelEngines,
+    hostManagedModels,
+    onActiveModelEngineChange,
+    resolveThreadModelSelection,
+  ]);
+
   const persistModelSelection = useCallback(
     (selection: ModelSelection) => {
       setPersistedModelSelection(selection);
@@ -1425,10 +1477,25 @@ export function MultiTabAssistantChat({
         }
         setDiscoveredModelsError(false);
         setDiscoveredModels(catalog.groups);
+        setDiscoveredModelEngines(catalog.modelEngines);
         setDefaultModel(catalog.defaultModel);
         void catalog.loadLiveGroups().then((liveGroups) => {
           if (isCurrentRequest() && liveGroups) {
             setDiscoveredModels(liveGroups);
+            setDiscoveredModelEngines((current) => {
+              const next = { ...current };
+              for (const group of liveGroups) {
+                const engine = next[group.engine];
+                if (engine) {
+                  next[group.engine] = {
+                    ...engine,
+                    supportedModels: group.models,
+                    selectableModels: group.models,
+                  };
+                }
+              }
+              return next;
+            });
           }
         });
       })
@@ -3194,6 +3261,8 @@ export function MultiTabAssistantChat({
               tabId === activeThreadId || mountedTabsRef.current.has(tabId),
           )
           .map((tabId) => {
+            const isKnownNewThread =
+              newThreadIds.current.has(tabId) || isNewThread(tabId);
             const modelSelection = resolveThreadModelSelection(tabId);
             const modelSelectionPending =
               !hostManagedModels && modelListLoading && !modelSelection;
@@ -3229,9 +3298,7 @@ export function MultiTabAssistantChat({
                   isolateHistoryByScope={isolateHistoryByScope}
                   isActiveComposer={!contentHidden && tabId === activeThreadId}
                   apiUrl={apiUrl}
-                  isNewThread={
-                    newThreadIds.current.has(tabId) || isNewThread(tabId)
-                  }
+                  isNewThread={isKnownNewThread}
                   onThreadRestoreNotFound={
                     tabId === activeThreadId &&
                     (props.agentChatSurface !== "desktop" ||
@@ -3239,7 +3306,7 @@ export function MultiTabAssistantChat({
                       ? clearActiveTab
                       : undefined
                   }
-                  isThreadStateLoading={isLoading}
+                  isThreadStateLoading={isLoading && !isKnownNewThread}
                   onMessageCountChange={(count) => {
                     setMessageCounts((prev) =>
                       prev[tabId] === count

package/src/app/chat/agentkit-chat/approval-card.spec.tsx

@@ -126,6 +126,23 @@ describe("CoreAgentKitApproval", () => {
     expect(startRun).not.toHaveBeenCalled();
   });
 
+  it("masks a failed resolution's message in replays", async () => {
+    const client = new AgentKitClient({
+      transport: createTransport({
+        resolveApproval: vi.fn(async () => {
+          throw new Error("Jane Doe's calendar is locked");
+        }),
+      }),
+    });
+    renderApproval(client);
+
+    await clickButton("Approve");
+
+    const error = container.querySelector(".agentkit-command-error");
+    expect(error?.textContent).toBe("Jane Doe's calendar is locked");
+    expect(error?.hasAttribute("data-an-mask")).toBe(true);
+  });
+
   it("uses a generic summary when the tool name is not safe to display", () => {
     const client = new AgentKitClient({ transport: createTransport() });
     renderApproval(client, {

package/src/app/chat/agentkit-chat/approval-card.tsx

@@ -12,6 +12,7 @@ import {
 } from "../../agentkit/react/context.js";
 import { ActionCard } from "../chat/widgets/ActionCard.js";
 import { compactOutlineButtonClassName } from "../components/ui/button-classes.js";
+import { SESSION_REPLAY_MASK_PROPS } from "../session-replay-privacy.js";
 
 type ApprovalSlotProps = AgentKitRenderProps<AgentApprovalRequest> & {
   runId: string;
@@ -160,6 +161,7 @@ function SimpleToolApproval({
       />
       {resolution.error ? (
         <p
+          {...SESSION_REPLAY_MASK_PROPS}
           role="alert"
           className="agentkit-command-error block px-3 pb-3 text-xs"
         >