@agent-native/toolkit 0.204.0 → 0.204.1-nightly-20261008065100

package/src/app/providers/AppProviders.tsx

@@ -19,6 +19,7 @@ import {
   isHumanReadableDocumentTitle,
   normalizeDocumentTitle,
 } from "@agent-native/core/shared/document-title";
+import { getMcpAppWidgetEmbedBootScriptBody } from "@agent-native/core/shared/mcp-app-widget-embed";
 import { getSsrBetaRedirectScriptBody } from "@agent-native/core/shared/ssr-beta-redirect";
 import { getSsrSessionBootstrapScriptBody } from "@agent-native/core/shared/ssr-session-bootstrap";
 import { Toaster } from "@agent-native/toolkit/ui/sonner";
@@ -98,6 +99,17 @@ function EarlyBetaRedirectScript() {
   );
 }
 
+// Marks <html> as an MCP App widget before the server-rendered skeleton below
+// paints, so the widget never flashes the app's own sidebar.
+function McpAppWidgetBootScript() {
+  return (
+    <script
+      data-agent-native-mcp-widget-boot="1"
+      dangerouslySetInnerHTML={{ __html: getMcpAppWidgetEmbedBootScriptBody() }}
+    />
+  );
+}
+
 function EarlySessionBootstrapScript() {
   return (
     <script
@@ -480,6 +492,7 @@ export function AppProviders({
 
   return (
     <>
+      <McpAppWidgetBootScript />
       {!sessionBypass && (
         <>
           <EarlySessionBootstrapScript />

package/src/app/settings/shell/pages/audit.spec.tsx

@@ -165,6 +165,7 @@ describe("Audit log page", () => {
           event({ id: "human" }),
           event({
             id: "agent",
+            caller: "tool",
             actorKind: "agent",
             actorEmail: "member@example.com",
             summary: "Turned on Require citations",
@@ -193,6 +194,35 @@ describe("Audit log page", () => {
     expect(refused.textContent).toContain("Sep 23 · member@example.com");
   });
 
+  it("names the protocol when an outside agent made the change", async () => {
+    callActionMock.mockResolvedValue(
+      page(
+        [
+          event({
+            caller: "mcp",
+            actorKind: "agent",
+            actorEmail: "bob@example.com",
+            summary: "Updated the form",
+            app: "forms",
+          }),
+        ],
+        null,
+      ),
+    );
+    await render();
+
+    const [row] = rows();
+    expect(row.textContent).toContain("Sep 23 · Forms · Agent via MCP");
+    expect(row.textContent).not.toContain("bob@example.com");
+
+    await act(async () => {
+      row.click();
+    });
+    const dialog = document.querySelector('[role="dialog"]');
+    expect(dialog?.textContent).toContain("Changed byAgent via MCP");
+    expect(dialog?.textContent).toContain("On behalf ofbob@example.com");
+  });
+
   it("names the real count in Show N more and reveals the next page", async () => {
     const first = Array.from({ length: 25 }, (_, index) =>
       event({ id: `a-${index}` }),

package/src/app/settings/shell/pages/audit.tsx

@@ -67,8 +67,19 @@ export function auditAppLabel(app: string): string {
     .join(" ");
 }
 
+const OUTSIDE_AGENT_PROTOCOLS: Record<string, string> = {
+  mcp: "MCP",
+  webmcp: "WebMCP",
+  a2a: "A2A",
+};
+
 function actorLabel(event: AuditEvent, t: Translate): string {
-  if (event.actorKind === "agent") return t("agentChat.common.agent");
+  if (event.actorKind === "agent") {
+    const protocol = OUTSIDE_AGENT_PROTOCOLS[event.caller];
+    return protocol
+      ? t("agentChat.settings.audit.agentVia", { protocol })
+      : t("agentChat.common.agent");
+  }
   if (event.actorKind === "system" || !event.actorEmail) {
     return t("agentChat.settings.audit.system");
   }

package/src/app/shared/AppShellSkeleton.tsx

@@ -1,3 +1,4 @@
+import { MCP_APP_WIDGET_EMBED_ATTRIBUTE } from "@agent-native/core/shared/mcp-app-widget-embed";
 import type { CSSProperties, ReactNode } from "react";
 
 const MUTED = "hsl(var(--muted, 240 5% 96.1%))";
@@ -1048,6 +1049,9 @@ export function AppShellSkeleton({
       }}
     >
       <style>{`
+        html[${MCP_APP_WIDGET_EMBED_ATTRIBUTE}] [data-agent-native-app-skeleton] > :not(style) {
+          display: none !important;
+        }
         [data-agent-native-skeleton-block] {
           animation: an-app-shell-skeleton-pulse 1.2s ease-in-out infinite;
         }

package/src/composer/ComposerContextMenu.tsx

@@ -95,6 +95,8 @@ export interface ComposerContextMenuProps {
   onRestoreFocus?: () => void;
   contextButtonTooltipDisabled?: boolean;
   disabled?: boolean;
+  /** Runs this action or opens its picker as a dialog; each new object is a new request. */
+  openEntry?: { id: string } | null;
 }
 interface ComposerContextPage {
   id: string;
@@ -106,6 +108,19 @@ interface ComposerContextDialogSession {
   scopeKey?: string;
 }
 
+// Without a dialog presentation a picker selects one item through onSelect,
+// which the dialog's single-select mode does too.
+function asDialogPicker(
+  picker: ComposerContextPickerConfig,
+): ComposerContextPickerConfig {
+  return typeof picker.presentation === "object"
+    ? picker
+    : ({
+        ...picker,
+        presentation: { type: "dialog", mode: "single" },
+      } as ComposerContextPickerConfig);
+}
+
 function findAction(
   items: readonly ComposerContextMenuItem[],
   id: string,
@@ -121,46 +136,73 @@ function findAction(
   }
 }
 
-export function getComposerContextMenuEntries(
+export interface ComposerContextActionMatch {
+  action: ComposerContextMenuAction;
+  /** Category ids from the searched items down to the action. */
+  path: string[];
+  /** Labels of those categories, outermost first. */
+  categories: string[];
+}
+
+/** Every action under `items` that matches `query`; an empty query matches all. */
+export function searchComposerContextActions(
   items: readonly ComposerContextMenuItem[],
-  path: readonly string[],
   query: string,
-): ComposerContextMenuItem[] {
-  let scope = items;
-  for (const id of path) {
-    const category = scope.find((item) => item.id === id);
-    if (!category?.children || category.disabled) return [];
-    scope = category.children;
-  }
+): ComposerContextActionMatch[] {
   const terms = query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
-  if (!terms.length) return [...scope];
-  const matches: ComposerContextMenuItem[] = [];
+  const matches: ComposerContextActionMatch[] = [];
   const visit = (
     entries: readonly ComposerContextMenuItem[],
-    ancestors: string[],
-    disabled = false,
+    path: string[],
+    categories: string[],
+    searchable: string[],
+    disabled: boolean,
   ) => {
     for (const entry of entries) {
-      const searchable = [
-        ...ancestors,
+      const text = [
+        ...searchable,
         entry.label,
         entry.description ?? "",
         ...(entry.keywords ?? []),
       ];
+      const entryDisabled = disabled || entry.disabled === true;
       if (entry.children)
-        visit(entry.children, searchable, disabled || entry.disabled === true);
+        visit(
+          entry.children,
+          [...path, entry.id],
+          [...categories, entry.label],
+          text,
+          entryDisabled,
+        );
       else if (
-        terms.every((term) =>
-          searchable.join(" ").toLocaleLowerCase().includes(term),
-        )
+        terms.every((term) => text.join(" ").toLocaleLowerCase().includes(term))
       )
-        matches.push(disabled ? { ...entry, disabled: true } : entry);
+        matches.push({
+          action: entryDisabled ? { ...entry, disabled: true } : entry,
+          path,
+          categories,
+        });
     }
   };
-  visit(scope, []);
+  visit(items, [], [], [], false);
   return matches;
 }
 
+export function getComposerContextMenuEntries(
+  items: readonly ComposerContextMenuItem[],
+  path: readonly string[],
+  query: string,
+): ComposerContextMenuItem[] {
+  let scope = items;
+  for (const id of path) {
+    const category = scope.find((item) => item.id === id);
+    if (!category?.children || category.disabled) return [];
+    scope = category.children;
+  }
+  if (!query.trim()) return [...scope];
+  return searchComposerContextActions(scope, query).map(({ action }) => action);
+}
+
 function ContextSubmenu({
   label,
   icon,
@@ -263,6 +305,7 @@ export function ComposerContextMenu({
   onRestoreFocus,
   contextButtonTooltipDisabled = false,
   disabled,
+  openEntry,
 }: ComposerContextMenuProps) {
   const t = useComposerRuntimeAdapters().translate!;
   const allItems = [...menuActionItems, ...items];
@@ -399,6 +442,35 @@ export function ComposerContextMenu({
     updatePath([...origin, action.id]);
     if (select && !action.picker) selectAction(action);
   };
+  const openRequestedEntry = (id: string) => {
+    if (disabled) return;
+    const action = findAction(allItems, id);
+    if (!action || action.disabled || action.render) {
+      reportError(
+        new Error(
+          t("agentChat.composer.contextActionFailed", {
+            defaultValue: "Could not add context.",
+          }),
+        ),
+      );
+      return;
+    }
+    setError(null);
+    if (!action.picker) {
+      selectAction(action);
+      return;
+    }
+    // A request starts outside the menu, so its picker opens as a dialog: a
+    // submenu opened programmatically loses focus to its parents and closes.
+    const session = { id: action.id, scopeKey: action.picker.scopeKey };
+    dialogRef.current = session;
+    setDialog(session);
+  };
+  const openRequestedEntryRef = useRef(openRequestedEntry);
+  openRequestedEntryRef.current = openRequestedEntry;
+  useEffect(() => {
+    if (openEntry) openRequestedEntryRef.current(openEntry.id);
+  }, [openEntry]);
   const currentAction = page ? findAction(allItems, page.id) : undefined;
   useEffect(() => {
     if (
@@ -718,7 +790,7 @@ export function ComposerContextMenu({
         <ComposerContextPickerDialog
           key={JSON.stringify([dialog.id, dialogAction.picker.scopeKey])}
           title={dialogAction.label}
-          config={dialogAction.picker}
+          config={asDialogPicker(dialogAction.picker)}
           onClose={() => {
             if (dialogRef.current !== dialog) return;
             dialogRef.current = null;