@agent-native/toolkit 0.214.0 → 0.217.0

package/src/app/auth/AuthPage.interaction.spec.tsx

@@ -247,6 +247,80 @@ describe("AuthPage interactions", () => {
     }
   });
 
+  it("stores no visitor id on the sign-in page before analytics consent", async () => {
+    const originalHref = window.location.href;
+    const sendBeacon = vi.fn(() => true);
+    Object.defineProperty(navigator, "sendBeacon", {
+      value: sendBeacon,
+      configurable: true,
+    });
+    window.happyDOM.setURL("https://clips.agent-native.com/signup");
+    // Earlier renders in this file already settled the region.
+    Reflect.deleteProperty(
+      globalThis,
+      Symbol.for("agent-native.client.consent"),
+    );
+    window.localStorage.removeItem("agent-native.anonymous_id");
+    document.cookie = "an_aid=; path=/; max-age=0";
+    window.sessionStorage.setItem("an_consent_region", "consent");
+    (
+      window as Window & { __AGENT_NATIVE_CONFIG__?: Record<string, string> }
+    ).__AGENT_NATIVE_CONFIG__ = {
+      agentNativeAnalyticsPublicKey: "anpk_test",
+      agentNativeAnalyticsEndpoint: "https://analytics.agent-native.com/track",
+    };
+
+    try {
+      await act(async () => {
+        root.render(
+          <AuthPage
+            {...propsFromHtml(
+              getOnboardingHtml({
+                requestHost: "clips.agent-native.com",
+                requestPath: "/signup",
+              }),
+            )}
+            initialView="signup"
+          />,
+        );
+        await Promise.resolve();
+      });
+
+      const email = container.querySelector<HTMLInputElement>("#s-email");
+      await act(async () => {
+        Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value",
+        )!.set!.call(email, "person@example.com");
+        email!.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+
+      expect(sendBeacon).toHaveBeenCalled();
+      for (const [, body] of sendBeacon.mock.calls as unknown as [
+        string,
+        string,
+      ][]) {
+        const sent = JSON.parse(body);
+        expect(sent.anonymousId).toBeUndefined();
+        expect(sent.properties.analytics_consent).toBe("withheld");
+      }
+      expect(window.localStorage.getItem("agent-native.anonymous_id")).toBe(
+        null,
+      );
+      expect(document.cookie).not.toMatch(/an_aid=[^;]/);
+    } finally {
+      delete (window as Window & { __AGENT_NATIVE_CONFIG__?: unknown })
+        .__AGENT_NATIVE_CONFIG__;
+      window.sessionStorage.removeItem("an_consent_region");
+      Reflect.deleteProperty(
+        globalThis,
+        Symbol.for("agent-native.client.consent"),
+      );
+      Reflect.deleteProperty(navigator, "sendBeacon");
+      window.happyDOM.setURL(originalHref);
+    }
+  });
+
   it("sends a beta app's sign-up events to beta Analytics", async () => {
     const originalHref = window.location.href;
     const sendBeacon = vi.fn(() => true);

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.spec.tsx

@@ -1054,6 +1054,27 @@ describe("AgentKitAssistantChat host behavior", () => {
     expect(chatMocks.composerProps.isReferenceTarget).toBe(true);
   });
 
+  it("passes the worked-for row layout into the shared AgentKit root", async () => {
+    const layout = {
+      chevronSize: 12,
+      iconGap: 8,
+      fontSize: 13,
+      lineHeight: 16,
+      paddingBlock: 2,
+      paddingInline: 4,
+    };
+    const formatWorkedForDuration = (durationMs: number) =>
+      `${Math.round(durationMs / 1000)} seconds`;
+    await mount(
+      baseProps({ workedForRowLayout: layout, formatWorkedForDuration }),
+    );
+
+    expect(chatMocks.rootProps.workedForRowLayout).toEqual(layout);
+    expect(chatMocks.rootProps.formatWorkedForDuration).toBe(
+      formatWorkedForDuration,
+    );
+  });
+
   it("reports whether a composer can hold a prefill with its current context", async () => {
     const ref = createRef<AssistantChatHandle>();
     await mount(baseProps(), ref);
@@ -3271,6 +3292,24 @@ describe("AgentKitAssistantChat host behavior", () => {
     ).not.toBeNull();
   });
 
+  it("forwards transcript layout options to the shared chat component", async () => {
+    const transcriptLayout = {
+      topInset: 5,
+      messageLaneWidth: 730,
+      messageLaneOffsetInline: -33,
+      messageGap: 12,
+      messageLineHeight: 20,
+      fontFamily: "IBM Plex Sans",
+      userBubbleLineHeight: 18,
+      userBubbleMaxWidth: 600,
+      userBubbleOffsetInline: 10,
+      userBubblePadding: { block: 8, inline: 13 },
+    };
+    await mount(baseProps({ transcriptLayout }));
+
+    expect(chatMocks.chatProps.transcriptLayout).toBe(transcriptLayout);
+  });
+
   it("anchors the composer at the bottom while restoring a persisted thread", async () => {
     await mount(
       baseProps({

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -2107,6 +2107,8 @@ export const AgentKitAssistantChat = forwardRef<
           branchNavigation={props.branchNavigation}
           loadRunUsage={loadRunUsage}
           buildFeedbackReport={formatFeedbackReport}
+          workedForRowLayout={props.workedForRowLayout}
+          formatWorkedForDuration={props.formatWorkedForDuration}
           onThreadForked={(thread) => props.onForkedThread?.(thread.id)}
           onCopyMessage={({ text }) => {
             const html = renderMarkdownToClipboardHtml(text);
@@ -5054,6 +5056,7 @@ const AgentKitAssistantChatBody = forwardRef<
         className={props.className}
         composerProps={{ attachmentsEnabled: fileStorageConfigured }}
         hasRenderedMessages={hasRenderedMessages}
+        transcriptLayout={props.transcriptLayout}
         emptyComposerPlacement={
           props.centerComposerWhenEmpty && !isRestoring ? "center" : "bottom"
         }
@@ -6470,6 +6473,8 @@ function AgentKitTool({ value, active }: AgentKitRenderProps<AgentToolCall>) {
           chatUI={asRecord(metadata.chatUI) as never}
           activity={metadata.activity === true}
           isActiveTail={active === true}
+          workedForRowLayout={surface.props.workedForRowLayout}
+          formatWorkedForDuration={surface.props.formatWorkedForDuration}
         />
       </SuppressInlineOpenAppContext.Provider>
     </ChatRunningContext.Provider>

package/src/app/chat/AgentPanel.page-header-share.spec.tsx

@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { AgentPanel } from "./AgentPanel.js";
+
+type MockHeaderProps = {
+  renderOverlay?: (props: never) => React.ReactNode;
+};
+
+vi.mock("./MultiTabAssistantChat.js", () => ({
+  MultiTabAssistantChat: ({ renderOverlay }: MockHeaderProps) =>
+    renderOverlay?.({
+      tabs: [{ id: "thread-1", label: "Current thread", status: "completed" }],
+      activeTabId: "thread-1",
+      activeTabMessageCount: 1,
+      activeTabIsPersisted: true,
+      setActiveTabId: vi.fn(),
+      addTab: vi.fn(),
+      closeTab: vi.fn(),
+      closeOtherTabs: vi.fn(),
+      closeAllTabs: vi.fn(),
+      clearActiveTab: vi.fn(),
+      showHistory: false,
+      toggleHistory: vi.fn(),
+      tabCount: 1,
+    } as never) ?? null,
+}));
+
+vi.mock("../sharing/index.js", () => ({
+  ShareButton: ({
+    triggerContent,
+    triggerClassName,
+  }: {
+    triggerContent?: React.ReactNode;
+    triggerClassName?: string;
+  }) => (
+    <button data-testid="share-trigger" data-trigger-class={triggerClassName}>
+      {triggerContent ?? "Share"}
+    </button>
+  ),
+}));
+
+describe("AgentPanel page header share trigger", () => {
+  let root: Root | null = null;
+  let container: HTMLDivElement | null = null;
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    container?.remove();
+    root = null;
+    container = null;
+    localStorage.clear();
+  });
+
+  it("renders the default icon and host-provided content through ShareButton", async () => {
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+
+    const renderPanel = async (triggerContent?: React.ReactNode) =>
+      act(async () => {
+        root!.render(
+          <MemoryRouter>
+            <AgentPanel
+              storageKey="page-header-share-test"
+              showHeader={false}
+              showPageHeader
+              pageHeaderShareTriggerContent={triggerContent}
+            />
+          </MemoryRouter>,
+        );
+      });
+
+    await renderPanel();
+    const defaultButton = container.querySelector<HTMLButtonElement>(
+      '[data-testid="share-trigger"]',
+    );
+    expect(defaultButton?.querySelector("svg")).not.toBeNull();
+    expect(defaultButton?.dataset.triggerClass).toContain("size-8");
+
+    await renderPanel(
+      <span className="flex items-center gap-1.5">
+        <svg data-testid="custom-share-icon" aria-hidden="true" />
+        <span>Share</span>
+      </span>,
+    );
+    const customButton = container.querySelector<HTMLButtonElement>(
+      '[data-testid="share-trigger"]',
+    );
+    expect(customButton?.textContent).toBe("Share");
+    expect(
+      customButton?.querySelector('[data-testid="custom-share-icon"]'),
+    ).not.toBeNull();
+    expect(customButton?.dataset.triggerClass).toContain("w-auto");
+    expect(customButton?.dataset.triggerClass).toContain("px-2");
+  });
+});

package/src/app/chat/AgentPanel.tsx

@@ -610,6 +610,8 @@ export interface AgentPanelProps extends Omit<
   /** Hide the default page title menu while keeping the shared page actions. */
   showPageTitleMenu?: boolean;
   pageHeaderLeadingSlot?: React.ReactNode;
+  /** Override the shared page header share button's icon and label contents. */
+  pageHeaderShareTriggerContent?: React.ReactNode;
   /** Render host page actions alongside Share, with the active chat controls. */
   pageToolbarSlot?:
     | React.ReactNode
@@ -809,6 +811,7 @@ function AgentPanelInner({
   showPageHeaderWhenEmpty = false,
   showPageTitleMenu = true,
   pageHeaderLeadingSlot,
+  pageHeaderShareTriggerContent,
   pageToolbarSlot,
   onPageHeaderVisibilityChange,
   chatOnly = false,
@@ -1836,9 +1839,17 @@ function AgentPanelInner({
                       resourceTitle={activeTab.label || t("agentPanel.chat")}
                       shareUrl={getChatThreadShareUrl(activeTab.id)}
                       triggerContent={
-                        <IconShare3 size={15} aria-hidden="true" />
+                        pageHeaderShareTriggerContent ?? (
+                          <IconShare3 size={15} aria-hidden="true" />
+                        )
                       }
-                      triggerClassName="size-8 p-0 border-0 bg-transparent shadow-none hover:bg-accent/60"
+                      triggerClassName={cn(
+                        "h-8 border-0 bg-transparent shadow-none hover:bg-accent/60",
+                        pageHeaderShareTriggerContent === undefined ||
+                          pageHeaderShareTriggerContent === null
+                          ? "size-8 p-0"
+                          : "w-auto px-2",
+                      )}
                     />
                   ) : null}
                   {toolbarSlot}
@@ -1869,6 +1880,7 @@ function AgentPanelInner({
       headerMenuOpen,
       onPageHeaderVisibilityChange,
       pageHeaderLeadingSlot,
+      pageHeaderShareTriggerContent,
       pageToolbarSlot,
       pendingHeaderOverlayRef,
       setHeaderMenuOpen,

package/src/app/chat/chat/index.ts

@@ -53,6 +53,8 @@ export type {
   AssistantChatSubmitResult,
   AgentChatSurfaceKind,
 } from "./surface-types.js";
+export type { AgentChatTranscriptLayout } from "../../agentkit/react/transcript-layout.js";
+export type { AgentChatWorkedForRowLayout } from "../../agentkit/react/transcript-layout.js";
 export type {
   MultiTabAssistantChatProps,
   MultiTabAssistantChatHeaderProps,

package/src/app/chat/chat/surface-types.ts

@@ -28,6 +28,10 @@ import type * as React from "react";
 
 import type { AgentKitWorkedForSummaryRenderProps } from "../../agentkit/react/context.js";
 import type { AgentMessageContentOrderResolver } from "../../agentkit/react/message-content-order.js";
+import type {
+  AgentChatTranscriptLayout,
+  AgentChatWorkedForRowLayout,
+} from "../../agentkit/react/transcript-layout.js";
 import type { AssistantChatHistoryConfig } from "./history-types.js";
 import type { BuilderSetupCardLayout } from "./run-recovery.js";
 
@@ -238,6 +242,12 @@ export interface AssistantChatProps {
   /** Optional content rendered in the empty state, below the suggestion
    *  buttons. Unlike `threadFooterSlot` this never survives the first message. */
   emptyStateFooter?: React.ReactNode;
+  /** Optional transcript geometry. Omitted values keep the shared defaults. */
+  transcriptLayout?: AgentChatTranscriptLayout;
+  /** Optional elapsed-work row geometry. Omitted values keep the shared defaults. */
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  /** Optional duration text for the shared completed-work row. */
+  formatWorkedForDuration?: (durationMs: number) => string;
   /** Whether to show the header bar. Default: true */
   showHeader?: boolean;
   /** CSS class for the outer container */

package/src/app/chat/chat/tool-call-display.spec.tsx

@@ -2698,9 +2698,17 @@ describe("WorkedForSummary", () => {
 
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    builderHandoffMocks.useAgentChatContext.mockReturnValue({ items: [] });
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
+    const render = root.render.bind(root);
+    root.render = (children: ReactNode) =>
+      render(
+        <AgentNativeI18nProvider persistPreference={false}>
+          {children}
+        </AgentNativeI18nProvider>,
+      );
   });
 
   afterEach(() => {
@@ -2740,6 +2748,17 @@ describe("WorkedForSummary", () => {
               response: ["The query returned a 12% increase."],
             },
           }}
+          workedForRowLayout={{
+            chevronSize: 16,
+            iconGap: 4,
+            fontSize: 14,
+            lineHeight: 20,
+            paddingBlock: 12,
+            paddingInline: 12,
+          }}
+          formatWorkedForDuration={(durationMs) =>
+            `${durationMs / 1000} seconds`
+          }
         />,
       );
     });
@@ -2748,6 +2767,8 @@ describe("WorkedForSummary", () => {
       container.querySelectorAll<HTMLButtonElement>("button[aria-expanded]"),
     ).find((button) => button.textContent?.includes("Worked for"));
     expect(workedFor).not.toBeNull();
+    expect(workedFor?.style.fontSize).toBe("14px");
+    expect(workedFor?.textContent).toContain("Worked for 5 seconds");
     act(() => workedFor?.click());
 
     expect(container.textContent).not.toContain("This private thought");
@@ -2795,6 +2816,68 @@ describe("WorkedForSummary", () => {
     expect(container.textContent).toContain("Worked for 5m");
   });
 
+  it("keeps the disclosure chevron before the duration label", () => {
+    act(() => {
+      root.render(
+        <WorkedForSummary durationMs={5_000}>
+          <div>Details</div>
+        </WorkedForSummary>,
+      );
+    });
+
+    const button = container.querySelector("button[aria-expanded]");
+    expect(button?.children[0]?.tagName.toLowerCase()).toBe("svg");
+    expect(button?.children[1]?.textContent).toBe("Worked for 5s");
+    const buttonClasses = button?.className.split(/\s+/) ?? [];
+    expect(buttonClasses).toContain("gap-1");
+    expect(buttonClasses).toContain("p-3");
+    expect(buttonClasses).toContain("text-start");
+    expect(buttonClasses).not.toContain("text-left");
+    const chevron = button?.children[0];
+    expect(chevron?.getAttribute("class")?.split(/\s+/)).toContain(
+      "rtl:-scale-x-100",
+    );
+
+    act(() => button?.click());
+
+    expect(chevron?.getAttribute("class")?.split(/\s+/)).toContain(
+      "rtl:-rotate-90",
+    );
+  });
+
+  it("applies optional geometry to the completed-work disclosure row", () => {
+    act(() => {
+      root.render(
+        <WorkedForSummary
+          durationMs={5_000}
+          layout={{
+            chevronSize: 16,
+            iconGap: 4,
+            fontSize: 14,
+            lineHeight: 20,
+            paddingBlock: 12,
+            paddingInline: 12,
+          }}
+        >
+          <div>Details</div>
+        </WorkedForSummary>,
+      );
+    });
+
+    const button = container.querySelector<HTMLButtonElement>(
+      "button[aria-expanded]",
+    );
+    const icon = button?.querySelector<SVGElement>("svg");
+    expect(button?.style.gap).toBe("4px");
+    expect(button?.style.fontSize).toBe("14px");
+    expect(button?.style.lineHeight).toBe("20px");
+    expect(button?.style.paddingBlock).toBe("12px");
+    expect(button?.style.paddingInline).toBe("12px");
+    expect(button?.style.fontFamily).toBe("inherit");
+    expect(icon?.style.width).toBe("16px");
+    expect(icon?.style.height).toBe("16px");
+  });
+
   it("applies the running shimmer while the work summary is live", () => {
     act(() => {
       root.render(