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

package/src/app/onboarding/GettingStartedCard.tsx

@@ -157,7 +157,7 @@ export function GettingStartedCard({
                 <span
                   aria-hidden
                   className={cn(
-                    "flex size-4 shrink-0 items-center justify-center rounded-full border",
+                    "flex size-4 shrink-0 items-center justify-center rounded-sm border",
                     step.complete
                       ? "border-primary bg-primary text-primary-foreground"
                       : "border-muted-foreground/60",

package/src/app/onboarding/first-run-builder-credits-flag.spec.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+
+import { FIRST_RUN_BUILDER_CREDITS_V2_FLAG } from "./first-run-builder-credits-flag.js";
+
+describe("first-run Builder credits v2 feature flag", () => {
+  it("uses one default-off definition for every onboarding app", () => {
+    expect(FIRST_RUN_BUILDER_CREDITS_V2_FLAG).toMatchObject({
+      key: "clips-first-run-credits-v2",
+      defaultValue: false,
+      displayName: "First-run Builder credits v2",
+    });
+  });
+});

package/src/app/onboarding/first-run-builder-credits-flag.ts

@@ -0,0 +1,9 @@
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
+import { FIRST_RUN_BUILDER_CREDITS_V2_FLAG_KEY } from "@agent-native/core/shared";
+
+export const FIRST_RUN_BUILDER_CREDITS_V2_FLAG = defineFeatureFlag({
+  key: FIRST_RUN_BUILDER_CREDITS_V2_FLAG_KEY,
+  displayName: "First-run Builder credits v2",
+  description:
+    "Enable the account-assigned v2 credits flow across Design, Slides, and Clips.",
+});

package/src/app/providers/AppProviders.spec.tsx

@@ -735,3 +735,112 @@ describe("AppProviders session gate", () => {
     await vi.waitFor(() => expect(document.title).toBe("Manage agent"));
   });
 });
+
+describe("AppProviders MCP approval review", () => {
+  const ID = "0b7f4c1e-2f4a-4d1c-9a43-5f1e8f0d2c6b";
+
+  beforeEach(() => {
+    (window.location as { hash: string }).hash = `#mcpApproval=${ID}`;
+  });
+
+  function reviewShown() {
+    return vi
+      .mocked(window.fetch)
+      .mock.calls.some(([url]) => url === `/_agent-native/mcp/approvals/${ID}`);
+  }
+
+  it("shows the review the URL names in place of the app", () => {
+    useSessionMock.mockReturnValue(SIGNED_IN_SESSION);
+
+    renderProviders({ disableWebMcp: true });
+
+    expect(reviewShown()).toBe(true);
+    expect(container.querySelector('[data-testid="app-content"]')).toBeNull();
+  });
+
+  it("sends a signed-out reader to sign in and back to the same review", () => {
+    useSessionMock.mockReturnValue(SIGNED_OUT_SESSION);
+
+    renderProviders({});
+
+    expect(replaceMock).toHaveBeenCalledWith(
+      `/sign-in?c=${encodeContinuation(`/inbox#mcpApproval=${ID}`)}`,
+    );
+  });
+
+  it("lets a phone decide, where the app itself hands off to a larger screen", () => {
+    useSessionMock.mockReturnValue(SIGNED_IN_SESSION);
+    const matchMedia = window.matchMedia;
+    const screen = Object.getOwnPropertyDescriptors(window.screen);
+    window.matchMedia = ((query: string) => ({
+      matches: true,
+      media: query,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+    })) as unknown as typeof window.matchMedia;
+    Object.defineProperty(window.screen, "width", {
+      value: 390,
+      configurable: true,
+    });
+    Object.defineProperty(window.screen, "height", {
+      value: 844,
+      configurable: true,
+    });
+    try {
+      act(() => {
+        root.render(
+          <AppProviders
+            queryClient={new QueryClient()}
+            i18n={false}
+            toaster={null}
+            disableWebMcp
+            unsupportedDevice={{ appName: "Slides" }}
+          >
+            <div data-testid="app-content">content</div>
+          </AppProviders>,
+        );
+      });
+
+      expect(reviewShown()).toBe(true);
+    } finally {
+      window.matchMedia = matchMedia;
+      for (const key of ["width", "height"] as const) {
+        if (screen[key]) Object.defineProperty(window.screen, key, screen[key]);
+        else delete (window.screen as unknown as Record<string, unknown>)[key];
+      }
+    }
+  });
+
+  it("stays out of the server render, which has no window to read the review from", () => {
+    useSessionMock.mockReturnValue(SIGNED_IN_SESSION);
+    vi.stubGlobal("window", undefined);
+    let markup: string;
+    try {
+      markup = renderToStaticMarkup(
+        <AppProviders queryClient={new QueryClient()} i18n={false}>
+          <div>content</div>
+        </AppProviders>,
+      );
+    } finally {
+      vi.unstubAllGlobals();
+    }
+
+    expect(markup).toContain('data-agent-native-app-skeleton="true"');
+  });
+
+  it.each([
+    ["a token-authenticated surface", { sessionBypass: true }],
+    ["a public page", { isPublicPath: true }],
+  ])("never shows a review on %s", (_label, props) => {
+    useSessionMock.mockReturnValue(SIGNED_IN_SESSION);
+
+    renderProviders({ ...props, disableWebMcp: true });
+
+    expect(reviewShown()).toBe(false);
+    expect(
+      container.querySelector('[data-testid="app-content"]'),
+    ).not.toBeNull();
+  });
+});

package/src/app/providers/AppProviders.tsx

@@ -33,6 +33,10 @@ import React, { useContext, useEffect, useRef } from "react";
 import { useInRouterContext } from "react-router";
 
 import { RequireSession } from "../auth/RequireSession.js";
+import {
+  McpApprovalReviewGate,
+  McpApprovalReviewSkeleton,
+} from "../mcp-approval/McpApprovalReview.js";
 import { FirstRunOnboardingStartupGate } from "../onboarding/first-run-startup-gate.js";
 import {
   AppShellSkeleton,
@@ -416,6 +420,40 @@ function AgentRunAwareness({ persistUnread }: { persistUnread?: boolean }) {
   );
 }
 
+/**
+ * An MCP approval review the URL names replaces the app. It sits outside the
+ * device gate, so a phone can decide, and outside first-run onboarding, so a
+ * new user can decide before setting up the app.
+ */
+function McpApprovalReviewBoundary({
+  appName,
+  themeFamily,
+  children,
+}: {
+  appName: string | undefined;
+  themeFamily: boolean;
+  children: React.ReactNode;
+}) {
+  const name = appName ?? readDocumentTitleFallback();
+  return (
+    <McpApprovalReviewGate
+      appName={name}
+      wrap={(review) => (
+        <RequireSession fallback={<McpApprovalReviewSkeleton appName={name} />}>
+          {themeFamily ? (
+            <React.Suspense fallback={null}>
+              <ThemeFamilySync />
+            </React.Suspense>
+          ) : null}
+          {review}
+        </RequireSession>
+      )}
+    >
+      {children}
+    </McpApprovalReviewGate>
+  );
+}
+
 function ProvidersInner({
   queryClient,
   defaultTheme = "system",
@@ -589,7 +627,7 @@ export function AppProviders({
     </RequireSession>
   );
 
-  const gated = unsupportedDevice ? (
+  const deviceGated = unsupportedDevice ? (
     <UnsupportedDeviceGate {...unsupportedDevice}>
       {sessionGated}
     </UnsupportedDeviceGate>
@@ -597,6 +635,20 @@ export function AppProviders({
     sessionGated
   );
 
+  // A token-authenticated embed or an app inside another app's document
+  // never shows a review: neither is the reader's own top-level page.
+  const gated =
+    sessionBypass || !ownsDocument ? (
+      deviceGated
+    ) : (
+      <McpApprovalReviewBoundary
+        appName={documentTitleFallback}
+        themeFamily={enableThemeFamily}
+      >
+        {deviceGated}
+      </McpApprovalReviewBoundary>
+    );
+
   return (
     <>
       {ownsDocument ? <McpAppWidgetBootScript /> : null}

package/src/app/resources/McpConnectionSuggestion.spec.ts

@@ -73,34 +73,99 @@ describe("findMcpConnectionSuggestionIntegration", () => {
         variant: "response",
       })?.id,
     ).toBe("slack");
+  });
+
+  it("reads provider names through markdown emphasis", () => {
+    for (const [text, id] of [
+      ["Please connect **Slack** to continue.", "slack"],
+      ["**Slack** isn't connected.", "slack"],
+      ["You'll need to connect `Notion` first.", "notion"],
+    ] as const) {
+      expect(
+        findMcpConnectionSuggestionIntegration({ text, variant: "response" })
+          ?.id,
+      ).toBe(id);
+    }
+  });
+
+  it("does not read a provider name inside a longer word", () => {
     expect(
       findMcpConnectionSuggestionIntegration({
-        text: "I couldn’t complete the Slack auth.test call because the Dispatch connection requires authentication.",
-        contextText:
-          "Use Slack auth.test and surface a connection request if needed.",
+        text: "The NonLinear isn't connected yet.",
+        variant: "response",
+      }),
+    ).toBeNull();
+  });
+
+  it("selects a provider whose access is required", () => {
+    expect(
+      findMcpConnectionSuggestionIntegration({
+        text: "Notion access is required to continue.",
         variant: "response",
       })?.id,
-    ).toBe("slack");
+    ).toBe("notion");
   });
 
-  it("uses the preceding user mention when the agent asks to connect it", () => {
+  it("selects the provider a real agent reply asks to connect", () => {
     expect(
       findMcpConnectionSuggestionIntegration({
-        text: "I don't have access yet - please connect it to continue.",
-        contextText: "Pull the latest HubSpot deals.",
+        text: "Slack isn’t connected, so `auth.test` couldn’t be run. I opened **Settings → Channels → Slack** to surface the connection setup. Connect a Slack workspace there, then I can test it.",
         variant: "response",
       })?.id,
-    ).toBe("hubspot");
+    ).toBe("slack");
+    expect(
+      findMcpConnectionSuggestionIntegration({
+        text: "I opened **Settings → Integrations**. Connect Notion there, then tell me when it’s connected and which project page to open.",
+        variant: "response",
+      })?.id,
+    ).toBe("notion");
   });
 
-  it("selects response connections only from the user's branded phrase", () => {
+  it("selects the provider a sent message asks to connect", () => {
     expect(
       findMcpConnectionSuggestionIntegration({
-        text: "I cannot read that page.",
-        contextText: "Connect Notion and open the project page.",
+        text: "Connect Notion and open the project page.",
         variant: "response",
       })?.id,
     ).toBe("notion");
+    expect(
+      findMcpConnectionSuggestionIntegration({
+        text: "Can you connect my Slack?",
+        variant: "response",
+      })?.id,
+    ).toBe("slack");
+  });
+
+  it("never offers a connection for a prompt that only mentions a provider or links to it", () => {
+    const prompt =
+      "You are designing a production-ready HTML email for Builder.io. Primary button: Continue your build (href https://www.builder.io/app/projects). Secondary link: More prompt tips. EMAIL-SAFE REQUIREMENTS (HubSpot). If you cannot extract a value, ask me.";
+    expect(
+      findMcpConnectionSuggestionIntegration({
+        text: prompt,
+        variant: "response",
+      }),
+    ).toBeNull();
+    expect(
+      findMcpConnectionSuggestionIntegration({
+        text: "I updated the secondary link. No changes to your copy.",
+        contextText: prompt,
+        variant: "response",
+      }),
+    ).toBeNull();
+  });
+
+  it("does not read product copy, quoted labels, or look-alike words as a request", () => {
+    for (const text of [
+      "Build an onboarding flow. Step 3: users can connect Slack from settings to get alerts.",
+      "The CTA reads “Connect Slack”.",
+      "No need to connect GitHub, here's the diff:",
+      "Connect the linear gradient to the hero background.",
+      "Connect Linear-style progress bars to each step.",
+    ]) {
+      expect(
+        findMcpConnectionSuggestionIntegration({ text, variant: "response" }),
+      ).toBeNull();
+    }
   });
 
   it("ignores provider names and URLs inside hidden composer context", () => {
@@ -156,7 +221,7 @@ describe("findMcpConnectionSuggestionIntegration", () => {
     expect(
       findMcpConnectionSuggestionIntegration({
         text: "Connect Gong so I can query calls.",
-        requestedByUser: true,
+        variant: "response",
         excludedIntegrationIds: ["GONG"],
       }),
     ).toBeNull();

package/src/app/resources/McpConnectionSuggestion.tsx

@@ -5,12 +5,9 @@ import {
   saveMcpConnectionResume,
 } from "@agent-native/core/client/resources/mcp-connection-resume";
 import {
-  findMcpIntegrationForText,
   getMcpIntegrationApiFallback,
   getDefaultMcpIntegrations,
   isMcpIntegrationUrl,
-  isMcpConnectionFailureText,
-  isMcpConnectionSuggestionText,
   type DefaultMcpIntegration,
 } from "@agent-native/core/client/resources/mcp-integration-catalog";
 import {
@@ -33,8 +30,6 @@ export interface McpConnectionSuggestionProps {
   contextText?: string;
   variant?: McpConnectionSuggestionVariant;
   requestedByAgent?: boolean;
-  /** Offer a composer connection card when the user names a known provider. */
-  requestedByUser?: boolean;
   integrations?: DefaultMcpIntegration[];
   excludedIntegrationIds?: readonly string[];
   integrationId?: string;
@@ -119,12 +114,73 @@ function visibleUserAuthoredText(text: string): string {
     .trim();
 }
 
+// A request reads "please connect Slack", "you'll need to reconnect Linear",
+// or "Notion isn't connected". Product copy ("Users can connect Slack"), quoted
+// button labels ("Connect Notion"), negations ("no need to connect GitHub"),
+// and links never count: pasted prompts and drafted copy are full of them.
+const CONNECT_REQUEST_LEAD = String.raw`(?:^|[.!?]\s+|\bplease\s+|\b(?:you|you['’]ll|you\s+will)\s+(?:need|have)\s+to\s+|\byou\s+(?:must|should)\s+|\bneed\s+you\s+to\s+|\b(?:can|could|would|will)\s+you(?:\s+please)?\s+|\b(?:if|once|when|after)\s+you\s+|\b(?:to\s+continue|first|then|just),?\s+|,\s+|\b(?:settings|integrations)\s+and\s+|\b(?:i|we)(?:\s+(?:want|need|would\s+like)|['’]d\s+like)\s+to\s+|\bhelp\s+(?:me|us)\s+|\bhow\s+(?:do|can)\s+(?:i|we)\s+|\blet['’]?s\s+)`;
+const CONNECT_REQUEST_VERB = String.raw`(?:re-?)?(?:connect|authori[sz]e)|(?:sign|log)\s+in(?:to|\s+to)`;
+const CONNECTION_MISSING = String.raw`(?:(?:is|has|was)(?:\s+not|n['’]t)(?:\s+(?:been|yet|currently))?\s+connected|(?:access|connection)\s+(?:(?:has\s+)?expired|(?:is\s+)?required))`;
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function findRequestedMcpIntegration(
+  markdown: string,
+  integrations: readonly DefaultMcpIntegration[],
+): DefaultMcpIntegration | null {
+  // Agents bold or code-format the provider: "please connect **Slack**".
+  const text = markdown.replace(/\*\*|__|`/g, "");
+  if (!/connect|authori[sz]e|sign\s+in|log\s+in|expired|required/i.test(text)) {
+    return null;
+  }
+  const byName = new Map<
+    string,
+    { integration: DefaultMcpIntegration; name: string }
+  >();
+  for (const integration of integrations) {
+    for (const alias of [
+      ...(integration.promptAliases ?? [integration.name]),
+      ...(integration.brandAliases ?? []),
+    ]) {
+      const name = alias.replace(/^connect\s+/i, "");
+      byName.set(name.toLowerCase(), { integration, name });
+    }
+  }
+  if (byName.size === 0) return null;
+  const names = `(${[...byName.values()]
+    .map(({ name }) => name)
+    .sort((a, b) => b.length - a.length)
+    .map(escapeRegExp)
+    .join("|")})(?![\\w-])`;
+  const patterns = [
+    new RegExp(
+      `(?<=${CONNECT_REQUEST_LEAD})(?:${CONNECT_REQUEST_VERB})\\s+(?:to\\s+|with\\s+)?(?:my\\s+|our\\s+|your\\s+|the\\s+)?${names}`,
+      "gi",
+    ),
+  ];
+  if (/\b(?:connected|expired|required)\b/i.test(text)) {
+    patterns.push(
+      new RegExp(`(?<![\\w-])${names}\\s+${CONNECTION_MISSING}`, "gi"),
+    );
+  }
+  for (const pattern of patterns) {
+    for (const match of text.matchAll(pattern)) {
+      const found = match.at(1);
+      if (!found) continue;
+      const entry = byName.get(found.toLowerCase());
+      // Brand names are capitalized: "linear gradient" is not Linear.
+      if (entry && found[0] === entry.name[0]) return entry.integration;
+    }
+  }
+  return null;
+}
+
 export function findMcpConnectionSuggestionIntegration({
   text,
-  contextText = "",
   variant = "composer",
   requestedByAgent = false,
-  requestedByUser = false,
   integrations = getDefaultMcpIntegrations(),
   excludedIntegrationIds,
   integrationId,
@@ -147,37 +203,11 @@ export function findMcpConnectionSuggestionIntegration({
       ) ?? null
     );
   }
-  const responseText = visibleUserAuthoredText(text);
-  if (variant !== "response") {
-    if (requestedByUser) {
-      return findMcpIntegrationForText(responseText, availableIntegrations);
-    }
-    if (requestedByAgent) {
-      if (
-        !isMcpConnectionSuggestionText(responseText) &&
-        !isMcpConnectionFailureText(responseText)
-      ) {
-        return null;
-      }
-    } else {
-      return null;
-    }
-  }
-
-  if (
-    isMcpConnectionSuggestionText(responseText) ||
-    isMcpConnectionFailureText(responseText)
-  ) {
-    return (
-      findMcpIntegrationForText(responseText, availableIntegrations) ??
-      findMcpIntegrationForText(
-        visibleUserAuthoredText(contextText),
-        availableIntegrations,
-      )
-    );
-  }
-
-  return null;
+  if (variant !== "response" && !requestedByAgent) return null;
+  return findRequestedMcpIntegration(
+    visibleUserAuthoredText(text),
+    availableIntegrations,
+  );
 }
 
 export function shouldRenderMcpIntegrationFallback(
@@ -209,7 +239,6 @@ export function McpConnectionSuggestion({
   contextText = "",
   variant = "composer",
   requestedByAgent = false,
-  requestedByUser = false,
   integrations: integrationOptions,
   excludedIntegrationIds,
   integrationId,
@@ -238,21 +267,17 @@ export function McpConnectionSuggestion({
     () =>
       findMcpConnectionSuggestionIntegration({
         text,
-        contextText,
         variant,
         requestedByAgent,
-        requestedByUser,
         integrations,
         excludedIntegrationIds,
         integrationId,
       }),
     [
-      contextText,
       excludedIntegrationIds,
       integrationId,
       integrations,
       requestedByAgent,
-      requestedByUser,
       text,
       variant,
     ],
@@ -281,14 +306,7 @@ export function McpConnectionSuggestion({
     dismissedAt !== undefined &&
     Date.now() - dismissedAt < MCP_SUGGESTION_DISMISSAL_WINDOW_MS;
   const shouldSuggest =
-    mcpServersQuery.isSuccess &&
-    integration &&
-    !connected &&
-    !dismissed &&
-    (Boolean(integrationId) ||
-      variant === "composer" ||
-      isMcpConnectionFailureText(text) ||
-      isMcpConnectionSuggestionText(text));
+    mcpServersQuery.isSuccess && integration && !connected && !dismissed;
 
   useEffect(() => {
     if (integration && connected) onConnected?.();

package/src/app/settings/VoiceChatSettings.spec.tsx

@@ -165,7 +165,12 @@ describe("VoiceChatSettings", () => {
 
     expect(appState.set).toHaveBeenLastCalledWith(
       REALTIME_VOICE_PREFERENCES_KEY,
-      { language: "ja", intelligence: "deep", voice: "marin" },
+      {
+        language: "ja",
+        intelligence: "deep",
+        voice: "marin",
+        intelligenceChosen: true,
+      },
       { requestSource: "realtime-voice" },
     );
     expect(select("Voice style")?.value).toBe("marin");

package/src/app/settings/account/PreferencesSettings.spec.tsx

@@ -2,14 +2,35 @@
 
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
+import { renderToString } from "react-dom/server";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const localeState = vi.hoisted(() => ({ value: {} as object | null }));
+const sessionState = vi.hoisted(() => ({
+  value: {
+    session: null as { email?: string } | null,
+    status: "loading" as "loading" | "authenticated" | "unauthenticated",
+  },
+}));
+const appConfigState = vi.hoisted(() => ({
+  value: {
+    themeFamily: {
+      families: ["original", "agent-native"],
+      defaultFamily: "agent-native",
+    },
+  } as object,
+}));
 
 vi.mock("@agent-native/core/client/i18n", async (importOriginal) => ({
   ...(await importOriginal<typeof import("@agent-native/core/client/i18n")>()),
   useOptionalLocale: () => localeState.value,
 }));
+vi.mock("@agent-native/core/client/use-session", () => ({
+  useSession: () => sessionState.value,
+}));
+vi.mock("@agent-native/core/client/app-config", () => ({
+  injectedAgentNativeConfig: () => appConfigState.value,
+}));
 vi.mock("../../shared/index.js", () => ({
   LanguagePicker: ({ label }: { label?: string }) => (
     <button type="button" data-testid="language-picker">
@@ -52,6 +73,16 @@ describe("PreferencesSettings", () => {
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
     localeState.value = {};
+    sessionState.value = {
+      session: { email: "steve@builder.io" },
+      status: "authenticated",
+    };
+    appConfigState.value = {
+      themeFamily: {
+        families: ["original", "agent-native"],
+        defaultFamily: "agent-native",
+      },
+    };
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -125,6 +156,48 @@ describe("PreferencesSettings", () => {
     expect(container.querySelector("#timezone")).not.toBeNull();
   });
 
+  it("never renders the theme switch during server rendering", () => {
+    const html = renderToString(
+      <AgentNativeI18nProvider
+        catalog={toolkitI18nCatalog}
+        persistPreference={false}
+      >
+        <PreferencesSettings />
+      </AgentNativeI18nProvider>,
+    );
+
+    expect(html).not.toContain('id="theme-family"');
+  });
+
+  it("never shows the theme switch to a non-Builder account", async () => {
+    sessionState.value = {
+      session: { email: "person@example.com" },
+      status: "authenticated",
+    };
+    await render();
+
+    expect(container.querySelector("#theme-family")).toBeNull();
+  });
+
+  it("hides the theme switch when an app declares only its original family", async () => {
+    appConfigState.value = {
+      themeFamily: { families: ["original"], defaultFamily: "original" },
+    };
+    await render();
+
+    expect(container.querySelector("#theme-family")).toBeNull();
+  });
+
+  it("keeps the theme switch hidden until the signed-in session is loaded", async () => {
+    sessionState.value = {
+      session: null,
+      status: "loading",
+    };
+    await render();
+
+    expect(container.querySelector("#theme-family")).toBeNull();
+  });
+
   it("anchors every Preferences search entry to a row", async () => {
     await render();
     for (const entry of PREFERENCES_SEARCH_ENTRIES) {