@agent-native/toolkit 0.216.0 → 0.218.0

package/src/app/auth/AuthPage.tsx

@@ -2,6 +2,7 @@
 
 import {
   captureAttribution,
+  getAnalyticsAnonymousId,
   getAnalyticsSessionId,
 } from "@agent-native/core/client/analytics";
 import { frameworkRoutePrefix } from "@agent-native/core/client/api-path";
@@ -12,6 +13,7 @@ import {
   normalizeOAuthReturnPath,
   shouldRetryAuthSessionProbe,
 } from "@agent-native/core/client/auth/auth-page-helpers";
+import { whenConsentDecided } from "@agent-native/core/client/consent";
 import { openOAuthPopup } from "@agent-native/core/client/oauth-popup";
 import { navigateForSession } from "@agent-native/core/client/use-session";
 import { normalizeLocaleCode } from "@agent-native/core/localization/shared";
@@ -65,7 +67,6 @@ type AuthRequestResult = {
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const TAB_STORAGE_KEY = "an.onboarding.tab";
 const PENDING_SIGNUP_EMAIL_STORAGE_KEY = "an.onboarding.pendingSignupEmail";
-const ANALYTICS_ANONYMOUS_ID_KEY = "agent-native.anonymous_id";
 const GOOGLE_AUTH_URL_PATH = "/_agent-native/google/auth-url";
 const BUILDER_DESKTOP_RETURN_ORIGIN = "http://127.0.0.1:8080";
 const useIsomorphicLayoutEffect =
@@ -261,15 +262,6 @@ async function requestJson(
   return { response, data, readable };
 }
 
-function generateAnonymousId(): string {
-  try {
-    if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
-  } catch {
-    // coercion-ok: the browser fallback remains usable when crypto is unavailable.
-  }
-  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
-}
-
 function trackAuth(
   app: string,
   name: string,
@@ -298,9 +290,8 @@ function trackAuth(
       }
     ).__AGENT_NATIVE_CONFIG__;
     if (!config?.agentNativeAnalyticsPublicKey) return;
-    const anonymousId = readStorage(ANALYTICS_ANONYMOUS_ID_KEY);
-    if (!anonymousId) return;
     const sessionId = getAnalyticsSessionId();
+    const timestamp = new Date().toISOString();
     const endpoint = resolveLaneEndpoint(
       config.agentNativeAnalyticsEndpoint ??
         "https://analytics.agent-native.com/track",
@@ -313,23 +304,33 @@ function trackAuth(
     }> = [{ name, properties: legacyProperties }];
     const canonical = canonicalTrackingEvent(name, legacyProperties);
     if (canonical) events.push(canonical);
-    for (const event of events) {
-      const body = JSON.stringify({
-        publicKey: config.agentNativeAnalyticsPublicKey,
-        event: event.name,
-        properties: event.properties,
-        anonymousId,
-        sessionId,
-        timestamp: new Date().toISOString(),
-      });
-      if (navigator.sendBeacon?.(endpoint, body)) continue;
-      void fetch(endpoint, {
-        method: "POST",
-        body,
-        keepalive: true,
-        headers: { "Content-Type": "text/plain;charset=UTF-8" },
-      }).catch(() => undefined);
-    }
+    const publicKey = config.agentNativeAnalyticsPublicKey;
+    // The visitor id waits for analytics consent, as in the app bundle.
+    whenConsentDecided((decided) => {
+      const anonymousId = decided ? getAnalyticsAnonymousId() : undefined;
+      for (const event of events) {
+        const body = JSON.stringify({
+          publicKey,
+          event: event.name,
+          properties: anonymousId
+            ? event.properties
+            : {
+                ...event.properties,
+                analytics_consent: decided ? "withheld" : "unknown",
+              },
+          anonymousId,
+          sessionId,
+          timestamp,
+        });
+        if (navigator.sendBeacon?.(endpoint, body)) continue;
+        void fetch(endpoint, {
+          method: "POST",
+          body,
+          keepalive: true,
+          headers: { "Content-Type": "text/plain;charset=UTF-8" },
+        }).catch(() => undefined);
+      }
+    });
   } catch {
     // coercion-ok: analytics is best effort and cannot block authentication.
   }
@@ -1036,16 +1037,8 @@ export function AuthPage(props: AuthPageProps) {
   }, [apiPath, redirectToSignedInApp, runtimeBasePathResolved, view]);
 
   React.useEffect(() => {
-    let anonymousId = readStorage(ANALYTICS_ANONYMOUS_ID_KEY);
-    if (!/^[A-Za-z0-9_-]{1,128}$/.test(anonymousId)) {
-      anonymousId = generateAnonymousId();
-      writeStorage(ANALYTICS_ANONYMOUS_ID_KEY, anonymousId);
-    }
-    try {
-      document.cookie = `an_aid=${encodeURIComponent(anonymousId)}; path=/; max-age=2592000; SameSite=Lax`;
-    } catch {
-      // coercion-ok: attribution cookies are optional for authentication.
-    }
+    // Stores `an_aid` only with analytics consent, and asks for the region.
+    getAnalyticsAnonymousId();
     // Capture is once per page load, so it must wait for a workspace's
     // inferred base path or `landing_path` falls back to the wrong home.
     if (runtimeBasePathResolved) {

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -2108,6 +2108,7 @@ export const AgentKitAssistantChat = forwardRef<
           loadRunUsage={loadRunUsage}
           buildFeedbackReport={formatFeedbackReport}
           workedForRowLayout={props.workedForRowLayout}
+          dataChartLayout={props.dataChartLayout}
           formatWorkedForDuration={props.formatWorkedForDuration}
           onThreadForked={(thread) => props.onForkedThread?.(thread.id)}
           onCopyMessage={({ text }) => {
@@ -6474,6 +6475,7 @@ function AgentKitTool({ value, active }: AgentKitRenderProps<AgentToolCall>) {
           activity={metadata.activity === true}
           isActiveTail={active === true}
           workedForRowLayout={surface.props.workedForRowLayout}
+          dataChartLayout={surface.props.dataChartLayout}
           formatWorkedForDuration={surface.props.formatWorkedForDuration}
         />
       </SuppressInlineOpenAppContext.Provider>

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

@@ -34,6 +34,7 @@ import React, { act } from "react";
 import { flushSync } from "react-dom";
 import { createRoot, type Root } from "react-dom/client";
 import { MemoryRouter } from "react-router";
+import { toast } from "sonner";
 import {
   afterEach,
   beforeEach,
@@ -7874,6 +7875,8 @@ describe("MultiTabAssistantChat page overlay", () => {
 describe("MultiTabAssistantChat history popover", () => {
   let container: HTMLDivElement;
   let root: Root;
+  let sharedHistoryRows: ChatThreadSummary[];
+  let mineHistoryRows: ChatThreadSummary[] | undefined;
 
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
@@ -7882,6 +7885,8 @@ describe("MultiTabAssistantChat history popover", () => {
       return 0;
     });
     resetThreadMocks();
+    sharedHistoryRows = [];
+    mineHistoryRows = undefined;
     const now = Date.now();
     threadMocks.activeThreadId = "thread-1";
     const historyThreads: ChatThreadSummary[] = [
@@ -7917,7 +7922,32 @@ describe("MultiTabAssistantChat history popover", () => {
     threadMocks.threads = historyThreads;
     vi.stubGlobal(
       "fetch",
-      vi.fn(async () => Response.json({ value: null })),
+      vi.fn(async (input: RequestInfo | URL) => {
+        const url = new URL(String(input), "http://test.local");
+        const ownership = url.searchParams.get("ownership");
+        if (ownership) {
+          const source =
+            ownership === "mine"
+              ? (mineHistoryRows ?? threadMocks.threads).map((thread) => ({
+                  ...thread,
+                  ownerEmail: "me@example.com",
+                  accessBasis: "owner",
+                  visibility: "private",
+                }))
+              : sharedHistoryRows;
+          const query = url.searchParams.get("q") ?? "";
+          const matching = source.filter((row) =>
+            row.title.toLowerCase().includes(query.toLowerCase()),
+          );
+          const offset = Number(url.searchParams.get("offset") ?? 0);
+          const limit = Number(url.searchParams.get("limit") ?? 50);
+          return Response.json({
+            threads: matching.slice(offset, offset + limit),
+            hasMore: matching.length > offset + limit,
+          });
+        }
+        return Response.json({ value: null });
+      }),
     );
     window.localStorage.clear();
     window.localStorage.setItem(
@@ -7947,7 +7977,7 @@ describe("MultiTabAssistantChat history popover", () => {
       'button[aria-label="All chats"]',
     );
     expect(historyButton).not.toBeNull();
-    act(() => {
+    await act(async () => {
       historyButton!.click();
     });
   }
@@ -7965,13 +7995,224 @@ describe("MultiTabAssistantChat history popover", () => {
     });
   }
 
+  it.each(["local", "owner"] as const)(
+    "keeps the active proven-%s empty chat before persistence and hides inactive blanks",
+    async (proof) => {
+      mineHistoryRows = [];
+      threadMocks.isNewThread.mockImplementation(() => proof === "local");
+      threadMocks.threads = threadMocks.threads.slice(0, 2).map((thread) => ({
+        ...thread,
+        messageCount: 0,
+        ...(proof === "owner"
+          ? {
+              accessBasis: "owner" as const,
+              ownerEmail: "me@example.com",
+              visibility: "private" as const,
+            }
+          : {}),
+      }));
+      await openHistory();
+
+      const mine = container.querySelector(
+        '.an-chat-history__section[data-section-id="mine"]',
+      )!;
+      expect(
+        Array.from(mine.querySelectorAll(".an-chat-history-row__title")).map(
+          (element) => element.textContent,
+        ),
+      ).toEqual(["Active chat"]);
+      expect(mine.querySelector(".an-chat-history-row--active")).not.toBeNull();
+      expect(
+        mine.querySelector(".an-chat-history-row__timestamp")?.textContent,
+      ).toBe("Active");
+      expect(threadMocks.saveThreadData).not.toHaveBeenCalled();
+    },
+  );
+
+  it.each([false, true])(
+    "never recasts an active shared empty chat as Mine (server row loaded: %s)",
+    async (loaded) => {
+      mineHistoryRows = [];
+      threadMocks.isNewThread.mockReturnValue(true);
+      const shared: ChatThreadSummary = {
+        ...threadMocks.threads[0],
+        messageCount: 0,
+        accessBasis: "direct",
+        ownerEmail: "pat@example.com",
+        visibility: "private",
+      };
+      threadMocks.threads = [shared];
+      sharedHistoryRows = loaded ? [shared] : [];
+      await openHistory();
+
+      expect(
+        container.querySelector(
+          '.an-chat-history__section[data-section-id="mine"] .an-chat-history-row',
+        ),
+      ).toBeNull();
+      const sharedSection = container.querySelector(
+        '.an-chat-history__section[data-section-id="shared"]',
+      );
+      expect(
+        sharedSection?.querySelectorAll(".an-chat-history-row").length ?? 0,
+      ).toBe(loaded ? 1 : 0);
+      const trigger =
+        sharedSection?.querySelector<HTMLButtonElement>(
+          ".an-chat-history-row__menu-trigger",
+        ) ?? null;
+      if (!loaded) {
+        expect(trigger).toBeNull();
+        return;
+      }
+      await openRowMenu(trigger!);
+      expect(
+        Array.from(
+          document.body.querySelectorAll(".an-chat-history-row__menu-item"),
+          (element) => element.textContent,
+        ),
+      ).toEqual(["Copy link"]);
+    },
+  );
+
+  it("loads both ownership lists only while open and debounces search to both", async () => {
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="history-test" />);
+    });
+    const fetchMock = vi.mocked(fetch);
+    const ownershipRequests = () =>
+      fetchMock.mock.calls
+        .map(([input]) => new URL(String(input), "http://test.local"))
+        .filter((url) => url.searchParams.has("ownership"));
+    expect(ownershipRequests()).toHaveLength(0);
+    await openHistory();
+    expect(
+      ownershipRequests().map((url) => url.searchParams.get("ownership")),
+    ).toEqual(["mine", "shared"]);
+    vi.useFakeTimers();
+    try {
+      const input = container.querySelector<HTMLInputElement>(
+        ".an-chat-history__search-input",
+      )!;
+      act(() => {
+        Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value",
+        )!.set!.call(input, "Other");
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+      expect(ownershipRequests()).toHaveLength(2);
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(250);
+      });
+      expect(
+        ownershipRequests()
+          .slice(-2)
+          .map((url) => [
+            url.searchParams.get("ownership"),
+            url.searchParams.get("q"),
+          ]),
+      ).toEqual([
+        ["mine", "Other"],
+        ["shared", "Other"],
+      ]);
+      expect(threadMocks.searchThreads).not.toHaveBeenCalled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("previews five shared rows without owner pins or actions and switches through history", async () => {
+    sharedHistoryRows = Array.from({ length: 51 }, (_, index) => ({
+      id: `shared-${index}`,
+      title: `Shared ${index}`,
+      preview: "",
+      messageCount: 1,
+      createdAt: 1,
+      updatedAt: 1,
+      scope: null,
+      accessBasis: index === 0 ? "organization" : "direct",
+      ownerEmail: "pat@example.com",
+      visibility: "org",
+      pinnedAt: 10,
+    }));
+    await openHistory();
+    const sharedSection = container.querySelector(
+      '.an-chat-history__section[data-section-id="shared"]',
+    )!;
+    expect(sharedSection.querySelectorAll(".an-chat-history-row")).toHaveLength(
+      5,
+    );
+    expect(sharedSection.textContent).toContain("pat@example.com");
+    expect(sharedSection.textContent).toContain(
+      "Shared with your organization",
+    );
+    await openRowMenu(
+      sharedSection.querySelector<HTMLButtonElement>(
+        ".an-chat-history-row__menu-trigger",
+      )!,
+    );
+    expect(
+      Array.from(
+        document.body.querySelectorAll(".an-chat-history-row__menu-item"),
+        (element) => element.textContent,
+      ),
+    ).toEqual(["Copy link"]);
+    await act(async () => {
+      document.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+      );
+    });
+    expect(
+      sharedSection.querySelector(".an-chat-history-row--pinned"),
+    ).toBeNull();
+    expect(container.querySelector(".an-chat-history-rail__footer")).toBeNull();
+    await act(async () => {
+      sharedSection
+        .querySelector<HTMLButtonElement>(
+          ".an-chat-history-rail__section-toggle",
+        )!
+        .click();
+    });
+    expect(sharedSection.querySelectorAll(".an-chat-history-row")).toHaveLength(
+      50,
+    );
+    await act(async () => {
+      sharedSection
+        .querySelector<HTMLButtonElement>(".an-chat-history-rail__load-more")!
+        .click();
+    });
+    expect(sharedSection.querySelectorAll(".an-chat-history-row")).toHaveLength(
+      51,
+    );
+    await act(async () => {
+      sharedSection
+        .querySelector<HTMLButtonElement>(
+          ".an-chat-history-rail__section-toggle",
+        )!
+        .click();
+    });
+    expect(sharedSection.querySelectorAll(".an-chat-history-row")).toHaveLength(
+      5,
+    );
+    await act(async () => {
+      sharedSection
+        .querySelector<HTMLButtonElement>(".an-chat-history-row__button")!
+        .click();
+    });
+    expect(threadMocks.switchThread).toHaveBeenCalledWith("shared-0");
+    expect(container.querySelector(".an-chat-history")).toBeNull();
+    expect(
+      chatThreadHookMocks.useChatThreads.mock.calls.at(-1)?.[3]?.ownership,
+    ).toBeUndefined();
+  });
+
   it("groups pinned threads into a dedicated section, sorted ahead of the rest", async () => {
     await openHistory();
 
     const labels = Array.from(
       container.querySelectorAll(".an-chat-history__section-label"),
     ).map((el) => el.textContent);
-    expect(labels).toEqual(["Pinned"]);
+    expect(labels).toEqual(["Pinned", "My chats"]);
 
     const titles = Array.from(
       container.querySelectorAll(".an-chat-history-row__title"),
@@ -8055,6 +8296,32 @@ describe("MultiTabAssistantChat history popover", () => {
     expect(threadMocks.pinThread).toHaveBeenCalledWith("thread-3", true);
   });
 
+  it("shows the localized save failure when a history pin fails", async () => {
+    const toastError = vi
+      .spyOn(toast, "error")
+      .mockReturnValue("failure-toast");
+    threadMocks.pinThread.mockResolvedValue(false);
+    try {
+      await openHistory();
+      const row = container.querySelectorAll(".an-chat-history-row")[2];
+      await openRowMenu(
+        row.querySelector<HTMLButtonElement>(
+          ".an-chat-history-row__menu-trigger",
+        )!,
+      );
+      const pinItem = Array.from(
+        document.body.querySelectorAll<HTMLButtonElement>(
+          ".an-chat-history-row__menu-item",
+        ),
+      ).find((element) => element.textContent?.includes("Pin to top"))!;
+      await act(async () => pinItem.click());
+      expect(threadMocks.pinThread).toHaveBeenCalledWith("thread-3", true);
+      expect(toastError).toHaveBeenCalledExactlyOnceWith("Save failed");
+    } finally {
+      toastError.mockRestore();
+    }
+  });
+
   it("unpins an already-pinned thread via the row action menu", async () => {
     await openHistory();