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

package/src/app/chat/conversation/AgentConversation.spec.tsx

@@ -1,11 +1,23 @@
 // @vitest-environment happy-dom
 
 import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
+import { SESSION_REPLAY_BLOCK_ATTRIBUTE } from "@agent-native/core/client/session-replay-privacy";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { AgentConversationMessageView } from "./AgentConversation.js";
+import {
+  clearToolRenderersForTests,
+  registerToolRenderer,
+} from "../chat/tool-render-registry.js";
+import {
+  AgentConversation,
+  AgentConversationMessageView,
+} from "./AgentConversation.js";
+
+vi.mock("../mcp-apps/McpAppRenderer.js", () => ({
+  McpAppRenderer: () => <div data-testid="conversation-mcp-app" />,
+}));
 
 vi.mock("../../extensions/index.js", () => ({
   InlineExtensionFrame: ({ extensionId, extension }: any) => (
@@ -34,10 +46,187 @@ describe("AgentConversationMessageView", () => {
       root.unmount();
     });
     container.remove();
+    clearToolRenderersForTests();
     vi.restoreAllMocks();
     vi.unstubAllGlobals();
   });
 
+  it("masks the conversation error without masking its container", () => {
+    act(() =>
+      root.render(
+        <AgentConversation
+          messages={[]}
+          error="Example Person's example run failed."
+        />,
+      ),
+    );
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert?.querySelector("span")?.hasAttribute("data-an-mask")).toBe(
+      true,
+    );
+    expect(alert?.hasAttribute("data-an-mask")).toBe(false);
+  });
+
+  it.each(["errored", "completed"] as const)(
+    "masks only errored conversation tool diagnostics (%s)",
+    (state) => {
+      act(() =>
+        root.render(
+          <AgentConversationMessageView
+            message={{
+              id: "message-example",
+              role: "assistant",
+              parts: [
+                {
+                  id: "tool-example",
+                  type: "tool",
+                  tool: {
+                    id: "tool-example",
+                    name: "example-tool",
+                    state,
+                    summary: "Example Person's example notes.",
+                    result: "Example Document failed.",
+                  },
+                },
+              ],
+            }}
+          />,
+        ),
+      );
+      const summary = container.querySelector(
+        ".agent-conversation-tool__summary",
+      );
+      const result = container.querySelector("pre span");
+      expect(summary?.hasAttribute("data-an-mask")).toBe(state === "errored");
+      expect(result?.textContent).toBe("Example Document failed.");
+      expect(result?.hasAttribute("data-an-mask")).toBe(state === "errored");
+      expect(
+        container
+          .querySelector(".agent-conversation-tool__name")
+          ?.closest("[data-an-mask]"),
+      ).toBeNull();
+      expect(
+        container.querySelector("pre strong")?.closest("[data-an-mask]"),
+      ).toBeNull();
+    },
+  );
+
+  it("shows an errored tool through the masked fallback, not its renderer", () => {
+    registerToolRenderer({
+      id: "example-renderer",
+      match: "example-tool",
+      Component: ({ context }) => (
+        <div data-testid="example-renderer">{context.resultText}</div>
+      ),
+    });
+    act(() =>
+      root.render(
+        <AgentConversationMessageView
+          message={{
+            id: "message-example",
+            role: "assistant",
+            parts: [
+              {
+                id: "tool-example",
+                type: "tool",
+                tool: {
+                  id: "tool-example",
+                  name: "example-tool",
+                  state: "errored",
+                  result: "Example Document failed.",
+                },
+              },
+            ],
+          }}
+        />,
+      ),
+    );
+    expect(container.querySelector('[data-testid="example-renderer"]')).toBe(
+      null,
+    );
+    expect(
+      container.querySelector("pre span")?.hasAttribute("data-an-mask"),
+    ).toBe(true);
+  });
+
+  it.each(["errored", "completed"] as const)(
+    "blocks only an errored tool's MCP App from replays (%s)",
+    (state) => {
+      act(() =>
+        root.render(
+          <AgentConversationMessageView
+            message={{
+              id: "message-example",
+              role: "assistant",
+              parts: [
+                {
+                  id: "tool-example",
+                  type: "tool",
+                  tool: {
+                    id: "tool-example",
+                    name: "example-tool",
+                    state,
+                    result: "Example Document failed.",
+                    mcpApp: {
+                      serverId: "server",
+                      toolName: "example-tool",
+                      originalToolName: "example-tool",
+                      resourceUri: "ui://example-tool",
+                      toolInput: {},
+                      toolResult: {},
+                    },
+                  },
+                },
+              ],
+            }}
+          />,
+        ),
+      );
+      const app = container.querySelector(
+        '[data-testid="conversation-mcp-app"]',
+      );
+      expect(app).not.toBeNull();
+      expect(app?.closest(`[${SESSION_REPLAY_BLOCK_ATTRIBUTE}]`) !== null).toBe(
+        state === "errored",
+      );
+    },
+  );
+
+  it.each(["error", "warning", "info"] as const)(
+    "masks notice text but not its title or action (%s)",
+    (tone) => {
+      act(() =>
+        root.render(
+          <AgentConversationMessageView
+            message={{
+              id: "message-example",
+              role: "assistant",
+              notices: [
+                {
+                  id: "notice-example",
+                  tone,
+                  title: "Run status",
+                  text: "Example Person's example run status.",
+                  action: <button>Retry</button>,
+                },
+              ],
+            }}
+          />,
+        ),
+      );
+      const notice = container.querySelector(".agent-conversation-notice");
+      expect(notice?.querySelector("span")?.hasAttribute("data-an-mask")).toBe(
+        true,
+      );
+      expect(
+        notice?.querySelector("strong")?.closest("[data-an-mask]"),
+      ).toBeNull();
+      expect(
+        notice?.querySelector("button")?.closest("[data-an-mask]"),
+      ).toBeNull();
+    },
+  );
+
   it("renders text and tool parts in transcript order", () => {
     act(() => {
       root.render(

package/src/app/chat/conversation/AgentConversation.tsx

@@ -34,6 +34,10 @@ import {
 } from "../components/ui/message-scroller.js";
 import { HighlightedCodeBlock as SharedHighlightedCodeBlock } from "../HighlightedCodeBlock.js";
 import { McpAppRenderer } from "../mcp-apps/McpAppRenderer.js";
+import {
+  SESSION_REPLAY_BLOCK_PROPS,
+  SESSION_REPLAY_MASK_PROPS,
+} from "../session-replay-privacy.js";
 import type {
   AgentConversationAttachment,
   AgentConversationArtifact,
@@ -70,7 +74,7 @@ export function AgentConversation({
       {error && (
         <div className="agent-conversation__error" role="alert">
           <IconAlertTriangle size={15} strokeWidth={1.8} />
-          <span>{error}</span>
+          <span {...SESSION_REPLAY_MASK_PROPS}>{error}</span>
         </div>
       )}
       <MessageScrollerProvider autoScroll>
@@ -412,9 +416,11 @@ function ConversationToolCall({ tool }: { tool: AgentConversationToolCall }) {
     chatUI: tool.chatUI,
   };
   const NativeToolRenderer =
-    resolveBuiltinActionChatRenderer(nativeToolContext) ??
-    resolveToolRenderer(nativeToolContext) ??
-    resolveBuiltinFallbackToolRenderer(nativeToolContext);
+    tool.state === "errored"
+      ? null
+      : (resolveBuiltinActionChatRenderer(nativeToolContext) ??
+        resolveToolRenderer(nativeToolContext) ??
+        resolveBuiltinFallbackToolRenderer(nativeToolContext));
   if (NativeToolRenderer) {
     return (
       <ActionChatUiSurface
@@ -446,7 +452,12 @@ function ConversationToolCall({ tool }: { tool: AgentConversationToolCall }) {
         {toolLabel(t, tool.name)}
       </span>
       {tool.summary && (
-        <span className="agent-conversation-tool__summary">{tool.summary}</span>
+        <span
+          {...(tool.state === "errored" ? SESSION_REPLAY_MASK_PROPS : {})}
+          className="agent-conversation-tool__summary"
+        >
+          {tool.summary}
+        </span>
       )}
     </>
   );
@@ -468,7 +479,14 @@ function ConversationToolCall({ tool }: { tool: AgentConversationToolCall }) {
         />
       </summary>
       <div className="agent-conversation-tool__details">
-        {tool.mcpApp && <McpAppRenderer app={tool.mcpApp} />}
+        {tool.mcpApp && (
+          // The recorder keeps iframe attributes, and a snapshot's srcdoc can show the failure.
+          <div
+            {...(tool.state === "errored" ? SESSION_REPLAY_BLOCK_PROPS : {})}
+          >
+            <McpAppRenderer app={tool.mcpApp} />
+          </div>
+        )}
         {tool.input && (
           <pre>
             <strong>input</strong>
@@ -478,7 +496,11 @@ function ConversationToolCall({ tool }: { tool: AgentConversationToolCall }) {
         {tool.result && (
           <pre>
             <strong>result</strong>
-            {tool.result}
+            <span
+              {...(tool.state === "errored" ? SESSION_REPLAY_MASK_PROPS : {})}
+            >
+              {tool.result}
+            </span>
           </pre>
         )}
       </div>
@@ -497,7 +519,9 @@ function ConversationNotice({ notice }: { notice: AgentConversationNotice }) {
       <IconAlertTriangle size={15} />
       <div>
         {notice.title && <strong>{notice.title}</strong>}
-        <span>{notice.text}</span>
+        {/* Tone doesn't mark failures: a harness error that mentions approval
+            is classified as an approval and rendered with the warning tone. */}
+        <span {...SESSION_REPLAY_MASK_PROPS}>{notice.text}</span>
       </div>
       {notice.action}
     </div>

package/src/app/chat/fallback-chat-title.spec.ts

@@ -0,0 +1,44 @@
+import { appendAgentChatContextToMessage } from "@agent-native/core/shared";
+import { describe, expect, it } from "vitest";
+
+import { fallbackChatTitle } from "./fallback-chat-title.js";
+
+describe("fallbackChatTitle", () => {
+  it("strips inline legacy context whether it is closed or unclosed", () => {
+    expect(fallbackChatTitle("Plan <context>private</context> next")).toBe(
+      "Plan next",
+    );
+    expect(fallbackChatTitle("Plan <context>private remainder")).toBe("Plan");
+  });
+
+  it("does not let a nested encoded-looking marker escape legacy context", () => {
+    expect(
+      fallbackChatTitle(
+        'Plan <context>private <context data-agentkit-context-encoding="entities-v1">nested</context> private</context> next',
+      ),
+    ).toBe("Plan next");
+  });
+
+  it("does not strip longer or dotted tag names", () => {
+    const prompt =
+      "<context-menu>ok</context-menu> <Context.Provider>ok</Context.Provider>";
+
+    expect(fallbackChatTitle(prompt)).toBe(prompt);
+  });
+
+  it("preserves raw lookalike tags before a canonical encoded context block", () => {
+    const message =
+      "A <context-menu>x</context-menu> <Context.Provider>y</Context.Provider>";
+    const prompt = `${message}\n\n<context data-agentkit-context-encoding="entities-v1">\nprivate\n</context>`;
+
+    expect(fallbackChatTitle(prompt)).toBe(message);
+  });
+
+  it("preserves an authored exact marker through the encoded producer", () => {
+    expect(
+      fallbackChatTitle(
+        appendAgentChatContextToMessage("<context>", "private </context>"),
+      ),
+    ).toBe("<context>");
+  });
+});

package/src/app/chat/fallback-chat-title.ts

@@ -1,8 +1,7 @@
+import { stripAgentChatContextFromMessage } from "@agent-native/core/shared";
+
 export function fallbackChatTitle(message: string): string {
-  return message
-    .replace(/<context\b[^>]*>[\s\S]*?<\/context>\n?/gi, "")
-    .replace(/<context\b[^>]*>[\s\S]*$/gi, "")
-    .replace(/<\/context>/gi, "")
+  return stripAgentChatContextFromMessage(message)
     .replace(/@\[([^\]|]+)\|[^\]]*\]/g, "@$1")
     .replace(/\s+/g, " ")
     .trim()

package/src/app/chat/mcp-apps/McpAppRenderer.spec.ts

@@ -78,6 +78,7 @@ vi.mock(
   },
 );
 
+import { SESSION_REPLAY_BLOCK_ATTRIBUTE } from "@agent-native/core/client/session-replay-privacy";
 import {
   AGENT_NATIVE_EMBED_MESSAGE_TYPES,
   AGENT_NATIVE_EMBED_PROTOCOL,
@@ -291,6 +292,29 @@ describe("McpAppRenderer security helpers", () => {
     );
   });
 
+  it("blocks the frame from replays once the app fails on its own", async () => {
+    vi.useFakeTimers();
+    const payload = mcpAppPayload({
+      resourceHtml: "<!doctype html><html><body>Jane Doe's notes</body></html>",
+      openUrl: "https://plan.agent-native.com/plans/plan-123",
+    });
+
+    await act(async () => {
+      root.render(React.createElement(McpAppRenderer, { app: payload }));
+    });
+
+    const iframe = container.querySelector("iframe");
+    expect(iframe?.hasAttribute(SESSION_REPLAY_BLOCK_ATTRIBUTE)).toBe(false);
+
+    await act(async () => {
+      vi.advanceTimersByTime(MCP_APP_INITIALIZE_TIMEOUT_MS + 1);
+    });
+
+    expect(container.querySelector(".agent-mcp-app__error-box")).toBeTruthy();
+    expect(container.querySelector("iframe")).toBe(iframe);
+    expect(iframe?.hasAttribute(SESSION_REPLAY_BLOCK_ATTRIBUTE)).toBe(true);
+  });
+
   it("initializes the v2 bridge and proxies MCP tool listing and calls through the app API", async () => {
     appBridgeHarness.enabled = true;
     const callTool = vi.fn(async () => ({

package/src/app/chat/mcp-apps/McpAppRenderer.tsx

@@ -32,6 +32,11 @@ import {
   useState,
 } from "react";
 
+import {
+  SESSION_REPLAY_BLOCK_PROPS,
+  SESSION_REPLAY_MASK_PROPS,
+} from "../session-replay-privacy.js";
+
 type CallToolResult = Parameters<
   InstanceType<typeof AppBridge>["sendToolResult"]
 >[0];
@@ -409,12 +414,13 @@ export function McpAppRenderer({
           <div className="agent-mcp-app__error" role="alert">
             <div className="agent-mcp-app__error-box">
               <IconAlertTriangle size={15} />
-              <span>{error}</span>
+              <span {...SESSION_REPLAY_MASK_PROPS}>{error}</span>
             </div>
           </div>
         )}
         {srcDoc ? (
           <iframe
+            {...(error ? SESSION_REPLAY_BLOCK_PROPS : {})}
             ref={iframeRef}
             title={app.tool?.title ?? app.originalToolName}
             srcDoc={srcDoc}
@@ -454,7 +460,7 @@ export function McpAppRenderer({
         <div className="agent-mcp-app__error" role="alert">
           <div className="agent-mcp-app__error-box">
             <IconAlertTriangle size={15} />
-            <span>{error}</span>
+            <span {...SESSION_REPLAY_MASK_PROPS}>{error}</span>
             {externalOpenUrl && !readOnly && (
               <button
                 type="button"
@@ -469,7 +475,9 @@ export function McpAppRenderer({
           </div>
         </div>
       )}
+      {/* A failed app stays mounted, and the recorder keeps its frame attributes. */}
       <iframe
+        {...(error ? SESSION_REPLAY_BLOCK_PROPS : {})}
         ref={iframeRef}
         title={app.tool?.title ?? app.originalToolName}
         srcDoc={srcDoc}

package/src/app/chat/session-replay-privacy.spec.ts

@@ -0,0 +1,14 @@
+import * as core from "@agent-native/core/client/session-replay-privacy";
+import { describe, expect, it } from "vitest";
+
+import {
+  SESSION_REPLAY_BLOCK_PROPS,
+  SESSION_REPLAY_MASK_PROPS,
+} from "./session-replay-privacy.js";
+
+describe("toolkit session replay markers", () => {
+  it("match the markers core's recorder honors", () => {
+    expect(SESSION_REPLAY_MASK_PROPS).toEqual(core.SESSION_REPLAY_MASK_PROPS);
+    expect(SESSION_REPLAY_BLOCK_PROPS).toEqual(core.SESSION_REPLAY_BLOCK_PROPS);
+  });
+});

package/src/app/chat/session-replay-privacy.ts

@@ -0,0 +1,5 @@
+// Toolkit's core peer range includes releases without
+// @agent-native/core/client/session-replay-privacy, so it repeats core's replay
+// markers instead of importing them. Its spec asserts core's attribute names.
+export const SESSION_REPLAY_MASK_PROPS = { "data-an-mask": "" } as const;
+export const SESSION_REPLAY_BLOCK_PROPS = { "data-an-block": "" } as const;

package/src/app/extensions/ExtensionViewer.tsx

@@ -36,7 +36,14 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  type ReactNode,
+} from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 
 import { AgentToggleButton } from "../chat/AgentSidebar.js";
@@ -124,6 +131,8 @@ interface Extension {
 
 export interface ExtensionViewerProps {
   extensionId: string;
+  /** Trailing toolbar controls. Defaults to the agent toggle. */
+  headerActions?: ReactNode;
 }
 
 function readExtensionTitleSuffix(): string | null {
@@ -698,7 +707,10 @@ function ExtensionHistoryPopover({
   );
 }
 
-export function ExtensionViewer({ extensionId }: ExtensionViewerProps) {
+export function ExtensionViewer({
+  extensionId,
+  headerActions = <AgentToggleButton />,
+}: ExtensionViewerProps) {
   const t = useT();
   const location = useLocation();
   const navigate = useNavigate();
@@ -1242,7 +1254,7 @@ export function ExtensionViewer({ extensionId }: ExtensionViewerProps) {
                 />
               </>
             )}
-            <AgentToggleButton />
+            {headerActions}
           </div>
         </div>
         {isLocalExtension && (

package/src/app/extensions/ExtensionViewerPage.tsx

@@ -1,13 +1,17 @@
 import { agentNativePath } from "@agent-native/core/client/api-path";
 import { getBrowserTabId } from "@agent-native/core/client/hooks";
-import { useEffect } from "react";
+import { useEffect, type ReactNode } from "react";
 import { useParams } from "react-router";
 
 import { incrementExtensionView } from "./extension-popularity.js";
 import { ExtensionsListPage } from "./ExtensionsListPage.js";
 import { ExtensionViewer } from "./ExtensionViewer.js";
 
-export function ExtensionViewerPage() {
+export function ExtensionViewerPage({
+  headerActions,
+}: {
+  headerActions?: ReactNode;
+} = {}) {
   const { id } = useParams<{ id: string }>();
 
   useEffect(() => {
@@ -33,5 +37,5 @@ export function ExtensionViewerPage() {
     return <ExtensionsListPage />;
   }
   if (!id) return null;
-  return <ExtensionViewer extensionId={id} />;
+  return <ExtensionViewer extensionId={id} headerActions={headerActions} />;
 }