@agent-native/toolkit 0.214.0 → 0.217.0

package/src/app/agentkit/react/context.tsx

@@ -44,6 +44,7 @@ import {
 } from "react";
 
 import type { AgentMessageContentOrderResolver } from "./message-content-order.js";
+import type { AgentChatWorkedForRowLayout } from "./transcript-layout.js";
 
 export interface AgentKitRenderProps<T> {
   value: T;
@@ -87,6 +88,7 @@ export interface AgentKitWorkedForSummaryRenderProps {
   expandable: boolean;
   open: boolean;
   current?: ReactNode;
+  layout?: AgentChatWorkedForRowLayout;
 }
 
 export interface AgentConnectionErrorRenderProps {
@@ -495,6 +497,8 @@ export interface AgentKitProviderProps {
   /** Receives full renderer failures while the UI shows a safe fallback. */
   onRenderError?: (failure: AgentKitRenderFailure) => void;
   resolveMessageContentOrder?: AgentMessageContentOrderResolver;
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  formatWorkedForDuration?: (durationMs: number) => string;
   onClientEffect?: (effect: {
     type: "client.effect" | "client.deeplink";
     name: string;
@@ -525,6 +529,8 @@ export interface AgentKitContextValue {
   onConnectionRequest?: AgentKitProviderProps["onConnectionRequest"];
   onRenderError?: (failure: AgentKitRenderFailure) => void;
   resolveMessageContentOrder?: AgentMessageContentOrderResolver;
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  formatWorkedForDuration?: (durationMs: number) => string;
   registerComposerFocus: (threadId: ThreadId, focus: () => void) => () => void;
   requestComposerFocus: (threadId: ThreadId) => void;
 }
@@ -546,6 +552,8 @@ export function AgentKitProvider({
   onConnectionRequest,
   onRenderError,
   resolveMessageContentOrder,
+  workedForRowLayout,
+  formatWorkedForDuration,
   onClientEffect,
   children,
 }: AgentKitProviderProps) {
@@ -613,6 +621,8 @@ export function AgentKitProvider({
       onConnectionRequest,
       onRenderError,
       resolveMessageContentOrder,
+      workedForRowLayout,
+      formatWorkedForDuration,
       registerComposerFocus,
       requestComposerFocus,
     }),
@@ -631,6 +641,8 @@ export function AgentKitProvider({
       onConnectionRequest,
       onRenderError,
       resolveMessageContentOrder,
+      workedForRowLayout,
+      formatWorkedForDuration,
       registerComposerFocus,
       requestComposerFocus,
     ],

package/src/app/agentkit/react/index.ts

@@ -4,3 +4,4 @@ export * from "./context.js";
 export * from "./message-content-order.js";
 export * from "./root.js";
 export * from "./streaming-text.js";
+export * from "./transcript-layout.js";

package/src/app/agentkit/react/lifecycle.spec.tsx

@@ -185,7 +185,7 @@ describe("AgentChat lifecycle", () => {
     });
     const tree = mount();
 
-    await tree.render(
+    const renderChat = (enablePostWidgetText: boolean) => (
       <AgentKitProvider
         controller={observable.controller}
         threadId={threadId}
@@ -213,24 +213,152 @@ describe("AgentChat lifecycle", () => {
           },
         }}
         slots={{
-          text: ({ value }) => <span data-chat-part>{value.text}</span>,
+          text: ({ value }) => (
+            <div className="agentkit-markdown" data-chat-part>
+              <p>{value.text}</p>
+            </div>
+          ),
         }}
       >
-        <AgentKitChat composer={false} />
-      </AgentKitProvider>,
+        <AgentKitChat
+          composer={false}
+          transcriptLayout={
+            enablePostWidgetText
+              ? {
+                  postWidgetText: {
+                    tone: "muted",
+                    paragraphPaddingBlock: 4,
+                  },
+                }
+              : undefined
+          }
+        />
+      </AgentKitProvider>
     );
+    await tree.render(renderChat(true));
 
     const content = tree.container.querySelector(
       `[data-message-id="${message.id}"] .agentkit-message-content`,
     );
+    const transcriptContent = tree.container.querySelector(
+      ".agentkit-transcript-content",
+    );
     const renderedOrder = [...(content?.children ?? [])].map((element) =>
-      element.hasAttribute("data-chat-part")
+      element.hasAttribute("data-post-widget-text")
         ? element.textContent
-        : element.hasAttribute("data-chart-result")
-          ? "chart"
-          : "other",
+        : element.hasAttribute("data-chat-part")
+          ? element.textContent
+          : element.hasAttribute("data-chart-result")
+            ? "chart"
+            : "other",
     );
     expect(renderedOrder).toEqual(["Intro. ", "chart", "Summary."]);
+    expect(content?.children[0].hasAttribute("data-post-widget-text")).toBe(
+      false,
+    );
+    expect(content?.children[2].hasAttribute("data-post-widget-text")).toBe(
+      true,
+    );
+    expect(
+      content?.children[2].querySelector(".agentkit-markdown p"),
+    ).not.toBeNull();
+    expect(transcriptContent?.getAttribute("style")).toContain(
+      "--agentkit-transcript-post-widget-text-color: var(--agentkit-text-muted)",
+    );
+    expect(transcriptContent?.getAttribute("style")).toContain(
+      "--agentkit-transcript-post-widget-paragraph-padding-block: 4px",
+    );
+
+    await tree.render(renderChat(false));
+    const defaultContent = tree.container.querySelector(
+      `[data-message-id="${message.id}"] .agentkit-message-content`,
+    );
+    expect(
+      [...(defaultContent?.children ?? [])].some((element) =>
+        element.hasAttribute("data-post-widget-text"),
+      ),
+    ).toBe(false);
+    await tree.unmount();
+  });
+
+  it("styles assistant text after an embedded widget part", async () => {
+    const threadId = "thread-embedded-content-order";
+    const widget = {
+      id: "chart-embedded-content-order",
+      kind: "test-chart",
+      data: {},
+    };
+    const message = {
+      id: "assistant-embedded-content-order",
+      role: "assistant" as const,
+      status: "complete" as const,
+      parts: [
+        { type: "text" as const, text: "Intro." },
+        { type: "widget" as const, widget },
+        { type: "text" as const, text: "Summary." },
+      ],
+    };
+    const thread = {
+      ...createAgentThreadState(threadId),
+      messages: [message],
+    };
+    const observable = observableController({
+      connection: "connected",
+      capabilities: {},
+      capabilitiesStatus: "ready",
+      threads: { [threadId]: thread },
+      revision: 0,
+    });
+    const tree = mount();
+
+    await tree.render(
+      <AgentKitProvider
+        controller={observable.controller}
+        threadId={threadId}
+        registry={{
+          widgets: {
+            "test-chart": () => <span data-chart-result>Chart</span>,
+          },
+        }}
+        slots={{
+          text: ({ value }) => (
+            <div data-chat-part>
+              <p>{value.text}</p>
+            </div>
+          ),
+        }}
+      >
+        <AgentKitChat
+          composer={false}
+          transcriptLayout={{
+            postWidgetText: {
+              tone: "muted",
+              paragraphPaddingBlock: 4,
+            },
+          }}
+        />
+      </AgentKitProvider>,
+    );
+
+    const content = tree.container.querySelector(
+      `[data-message-id="${message.id}"] .agentkit-message-content`,
+    );
+    const renderedOrder = [...(content?.children ?? [])].map((element) =>
+      element.hasAttribute("data-post-widget-text")
+        ? element.textContent
+        : element.hasAttribute("data-chat-part")
+          ? element.textContent
+          : element.hasAttribute("data-chart-result")
+            ? "chart"
+            : "other",
+    );
+    expect(renderedOrder).toEqual(["Intro.", "chart", "Summary."]);
+    expect(content?.children[0].hasAttribute("data-post-widget-text")).toBe(
+      false,
+    );
+    expect(content?.children[2].hasAttribute("data-post-widget-text")).toBe(
+      true,
+    );
     await tree.unmount();
   });
 
@@ -1686,7 +1814,7 @@ describe("AgentChat lifecycle", () => {
     await tree.unmount();
   });
 
-  it("preserves visible reasoning without a Thinking history row", async () => {
+  it("preserves visible reasoning and applies the worked-row layout", async () => {
     const threadId = "thread-reasoning-work";
     const runId = "run-reasoning-work";
     const base = (sequence: number, seconds: number = sequence) => ({
@@ -1771,10 +1899,24 @@ describe("AgentChat lifecycle", () => {
     });
     const observable = observableController(snapshot(0));
     const tree = mount();
+    const workedForRowLayout = {
+      chevronSize: 12,
+      iconGap: 8,
+      marginBlockStart: -12,
+      fontSize: 13,
+      lineHeight: 16,
+      paddingBlock: 2,
+      paddingInline: 4,
+    };
+    const formatWorkedForDuration = (durationMs: number) =>
+      `${Math.round(durationMs / 1000)} seconds`;
     await tree.render(
-      <AgentKitProvider
+      <AgentKitRoot
         controller={observable.controller}
         threadId={threadId}
+        load="manual"
+        workedForRowLayout={workedForRowLayout}
+        formatWorkedForDuration={formatWorkedForDuration}
         registry={{
           activities: {
             reasoning: ({ value }) => (
@@ -1791,11 +1933,15 @@ describe("AgentChat lifecycle", () => {
         }}
       >
         <AgentKitChat composer={false} />
-      </AgentKitProvider>,
+      </AgentKitRoot>,
     );
     const work = tree.container.querySelector<HTMLDetailsElement>(
       ".agentkit-activities",
     )!;
+    expect(
+      work.querySelector<HTMLElement>(".agentkit-activities-summary")?.style
+        .marginBlockStart,
+    ).toBe("-12px");
     expect(work.open).toBe(false);
     expect(
       tree.container.querySelectorAll(".agentkit-activities"),
@@ -1821,10 +1967,19 @@ describe("AgentChat lifecycle", () => {
         ".agentkit-activities-summary > .agentkit-summary-chevron",
       ),
     ).not.toBeNull();
+    expect(work.querySelector("summary")?.getAttribute("style")).toContain(
+      "gap: 8px",
+    );
+    expect(
+      work.querySelector<HTMLElement>(".agentkit-summary-chevron")?.style.width,
+    ).toBe("12px");
     await tree.render(
-      <AgentKitProvider
+      <AgentKitRoot
         controller={observable.controller}
         threadId={threadId}
+        load="manual"
+        workedForRowLayout={workedForRowLayout}
+        formatWorkedForDuration={formatWorkedForDuration}
         registry={{
           activities: {
             reasoning: ({ value }) => (
@@ -1838,8 +1993,12 @@ describe("AgentChat lifecycle", () => {
               {value.text}
             </span>
           ),
-          workedForSummary: ({ label, open, current }) => (
-            <span data-work-summary data-open={open}>
+          workedForSummary: ({ label, open, current, layout }) => (
+            <span
+              data-work-summary
+              data-open={open}
+              data-icon-gap={layout?.iconGap}
+            >
               <span>{label}</span>
               <span data-work-chevron aria-hidden="true">
                 ›
@@ -1850,12 +2009,15 @@ describe("AgentChat lifecycle", () => {
         }}
       >
         <AgentKitChat composer={false} />
-      </AgentKitProvider>,
+      </AgentKitRoot>,
     );
     expect(work.querySelector("[data-work-summary]")?.textContent).toContain(
       "Searching documentation",
     );
     expect(work.querySelector("[data-work-chevron]")).not.toBeNull();
+    expect(work.querySelector("[data-work-summary]")?.dataset.iconGap).toBe(
+      "8",
+    );
     expect(
       work.querySelector("[data-work-summary]")?.getAttribute("data-open"),
     ).toBe("false");
@@ -1880,7 +2042,15 @@ describe("AgentChat lifecycle", () => {
     await flush();
     expect(tree.container.querySelector(".agentkit-activities")).toBe(work);
     expect(work.open).toBe(false);
-    expect(work.querySelector("summary")?.textContent).toBe("Worked for 18s›");
+    expect(work.querySelector("summary")?.textContent).toBe(
+      "Worked for 18 seconds›",
+    );
+    expect(work.querySelector<HTMLElement>("summary")?.style.fontSize).toBe(
+      "13px",
+    );
+    expect(work.querySelector<HTMLElement>("summary")?.style.lineHeight).toBe(
+      "16px",
+    );
     expect(work.querySelector("[data-agentkit-current-activity]")).toBeNull();
     expect(tree.container.querySelectorAll("article")).toHaveLength(1);
     const answer = tree.container.querySelector(

package/src/app/agentkit/react/root.tsx

@@ -31,6 +31,7 @@ import {
   type AgentKitSlots,
 } from "./context.js";
 import type { AgentMessageContentOrderResolver } from "./message-content-order.js";
+import type { AgentChatWorkedForRowLayout } from "./transcript-layout.js";
 
 const mountedManagedClients = new WeakMap<AgentKitClient, number>();
 
@@ -86,6 +87,8 @@ export interface AgentKitRootBaseProps {
   ) => Promise<AgentConnectionResponse>;
   onRenderError?: (failure: AgentKitRenderFailure) => void;
   resolveMessageContentOrder?: AgentMessageContentOrderResolver;
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  formatWorkedForDuration?: (durationMs: number) => string;
   onClientEffect?: (effect: {
     type: "client.effect" | "client.deeplink";
     name: string;
@@ -116,6 +119,8 @@ export function AgentKitRoot({
   onConnectionRequest,
   onRenderError,
   resolveMessageContentOrder,
+  workedForRowLayout,
+  formatWorkedForDuration,
   onClientEffect,
   load = "auto",
   onLoadError,
@@ -294,6 +299,8 @@ export function AgentKitRoot({
       onConnectionRequest={onConnectionRequest}
       onRenderError={onRenderError}
       resolveMessageContentOrder={resolveMessageContentOrder}
+      workedForRowLayout={workedForRowLayout}
+      formatWorkedForDuration={formatWorkedForDuration}
       onClientEffect={onClientEffect}
     >
       {children}

package/src/app/agentkit/react/styles.css

@@ -669,11 +669,18 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
 }
 
 .agentkit-transcript-content {
+  position: relative;
   box-sizing: border-box;
-  inline-size: min(100%, 47rem);
+  inline-size: min(100%, var(--agentkit-transcript-lane-width, 47rem));
   min-inline-size: 0;
   margin-inline: auto;
+  inset-inline-start: clamp(
+    calc((100% - min(100%, var(--agentkit-transcript-lane-width, 47rem))) / -2),
+    var(--agentkit-transcript-lane-offset-inline, 0px),
+    calc((100% - min(100%, var(--agentkit-transcript-lane-width, 47rem))) / 2)
+  );
   padding: 1.5rem 1rem;
+  padding-block-start: var(--agentkit-transcript-top-inset, 1.5rem);
 }
 
 .agentkit-scroll-to-bottom-control {
@@ -710,13 +717,21 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-block: 0 1.25rem;
+  margin-block: 0 var(--agentkit-transcript-message-gap, 1.25rem);
   font-size: 0.875rem;
-  line-height: 1.52;
+  font-family: var(
+    --agentkit-transcript-font-family,
+    var(--font-sans, inherit)
+  );
+  line-height: var(--agentkit-transcript-message-line-height, 1.52);
 }
 
 .agentkit-message[data-role="user"] {
   align-items: flex-end;
+  line-height: var(
+    --agentkit-user-bubble-line-height,
+    var(--agentkit-transcript-message-line-height, 1.52)
+  );
 }
 
 .agentkit-message-content {
@@ -726,8 +741,11 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
 }
 
 .agentkit-message[data-role="user"] .agentkit-message-content {
-  max-inline-size: min(88%, 38rem);
-  padding: 0.625rem 0.8125rem;
+  position: relative;
+  inset-inline-start: var(--agentkit-user-bubble-offset-inline, 0px);
+  max-inline-size: min(88%, var(--agentkit-user-bubble-max-width, 38rem));
+  padding: var(--agentkit-user-bubble-padding-block, 0.625rem)
+    var(--agentkit-user-bubble-padding-inline, 0.8125rem);
   border-radius: var(--agentkit-radius-inner);
   background: var(--agentkit-subtle);
 }
@@ -845,6 +863,25 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
   background: var(--agentkit-canvas);
 }
 
+.agentkit-message-content [data-post-widget-text="true"] {
+  display: contents;
+  color: var(--agentkit-transcript-post-widget-text-color, inherit);
+}
+
+.agentkit-message-content [data-post-widget-text="true"] > p,
+.agentkit-message-content [data-post-widget-text="true"] .agentkit-markdown p {
+  padding-block: var(
+    --agentkit-transcript-post-widget-paragraph-padding-block,
+    0px
+  );
+}
+
+.agentkit-message-content
+  > [data-post-widget-text="true"]:last-child
+  > :last-child {
+  margin-block-end: 0;
+}
+
 .agentkit-image-preview img {
   max-inline-size: 92vw;
   max-block-size: 90vh;
@@ -2133,6 +2170,6 @@ button.agentkit-object {
   }
 
   .agentkit-message[data-role="user"] .agentkit-message-content {
-    max-inline-size: 94%;
+    max-inline-size: min(94%, var(--agentkit-user-bubble-max-width, 38rem));
   }
 }

package/src/app/agentkit/react/transcript-layout.spec.ts

@@ -0,0 +1,72 @@
+import type { AgentKitController } from "@agent-native/agentkit/client";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { useAgentKit } from "./context.js";
+import { AgentKitRoot } from "./root.js";
+import {
+  workedForRowChevronStyle,
+  workedForRowSummaryStyle,
+} from "./transcript-layout.js";
+
+function WorkedForLayoutProbe() {
+  const { workedForRowLayout, formatWorkedForDuration } = useAgentKit();
+  return createElement("span", {
+    "data-icon-gap": workedForRowLayout?.iconGap,
+    "data-duration": formatWorkedForDuration?.(16_000),
+  });
+}
+
+describe("worked-for row layout", () => {
+  it("applies shared dimensions to the summary and leading chevron", () => {
+    const layout = {
+      chevronSize: 12,
+      iconGap: 8,
+      fontSize: 13,
+      lineHeight: 16,
+      paddingBlock: 2,
+      paddingInline: 4,
+    };
+
+    expect(workedForRowSummaryStyle(layout)).toEqual({
+      gap: "8px",
+      fontSize: "13px",
+      lineHeight: "16px",
+      paddingBlock: "2px",
+      paddingInline: "4px",
+      fontFamily: "inherit",
+    });
+    expect(workedForRowChevronStyle(layout)).toEqual({
+      width: "12px",
+      height: "12px",
+    });
+  });
+
+  it("rejects invalid CSS dimensions", () => {
+    expect(() => workedForRowSummaryStyle({ fontSize: 0 })).toThrow(
+      "workedForRowLayout.fontSize must be a valid CSS length",
+    );
+  });
+
+  it("carries the layout from the AgentKit root into shared context", () => {
+    const layout = { iconGap: 8 };
+    const formatWorkedForDuration = (durationMs: number) =>
+      `${Math.round(durationMs / 1000)} seconds`;
+    const markup = renderToStaticMarkup(
+      createElement(
+        AgentKitRoot,
+        {
+          controller: {} as AgentKitController,
+          threadId: "thread",
+          workedForRowLayout: layout,
+          formatWorkedForDuration,
+        },
+        createElement(WorkedForLayoutProbe),
+      ),
+    );
+
+    expect(markup).toContain('data-icon-gap="8"');
+    expect(markup).toContain('data-duration="16 seconds"');
+  });
+});

package/src/app/agentkit/react/transcript-layout.ts

@@ -0,0 +1,97 @@
+import type { CSSProperties } from "react";
+
+export interface AgentChatTranscriptLayout {
+  /** Top padding above transcript messages, in CSS pixels. */
+  topInset?: number;
+  /** Maximum centered message lane width, in CSS pixels. */
+  messageLaneWidth?: number;
+  /** Signed inline offset for the centered message lane, in CSS pixels. */
+  messageLaneOffsetInline?: number;
+  /** Space after each message, in CSS pixels. */
+  messageGap?: number;
+  /** Assistant message line height, in CSS pixels. */
+  messageLineHeight?: number;
+  /** Font family for transcript messages. Omitted uses the shared semantic font. */
+  fontFamily?: string;
+  /** Optional appearance for assistant text displayed after a widget. */
+  postWidgetText?: {
+    tone?: "muted";
+    paragraphPaddingBlock?: number;
+  };
+  /** User bubble line height, in CSS pixels. */
+  userBubbleLineHeight?: number;
+  /** Maximum user bubble width, in CSS pixels. */
+  userBubbleMaxWidth?: number;
+  /** Signed inline offset for the user bubble, in CSS pixels. */
+  userBubbleOffsetInline?: number;
+  /** User bubble padding on the block and inline axes, in CSS pixels. */
+  userBubblePadding?: { block?: number; inline?: number };
+}
+
+/** Optional geometry for the completed-work disclosure row in chat. */
+export interface AgentChatWorkedForRowLayout {
+  /** Chevron width and height, in CSS pixels. */
+  chevronSize?: number;
+  /** Space between the chevron and label, in CSS pixels. */
+  iconGap?: number;
+  /** Signed margin before the row, in CSS pixels. */
+  marginBlockStart?: number;
+  /** Label font size, in CSS pixels. */
+  fontSize?: number;
+  /** Label line height, in CSS pixels. */
+  lineHeight?: number;
+  /** Padding on the block axis, in CSS pixels. */
+  paddingBlock?: number;
+  /** Padding on the inline axis, in CSS pixels. */
+  paddingInline?: number;
+}
+
+function workedForRowLength(
+  value: number | undefined,
+  name: keyof AgentChatWorkedForRowLayout,
+  positive = false,
+) {
+  if (value === undefined) return undefined;
+  if (!Number.isFinite(value) || value < 0 || (positive && value === 0)) {
+    throw new RangeError(
+      `workedForRowLayout.${name} must be a valid CSS length`,
+    );
+  }
+  return `${value}px`;
+}
+
+function workedForRowOffset(
+  value: number | undefined,
+  name: keyof AgentChatWorkedForRowLayout,
+) {
+  if (value === undefined) return undefined;
+  if (!Number.isFinite(value)) {
+    throw new RangeError(`workedForRowLayout.${name} must be finite`);
+  }
+  return `${value}px`;
+}
+
+export function workedForRowSummaryStyle(
+  layout?: AgentChatWorkedForRowLayout,
+): CSSProperties | undefined {
+  if (!layout) return undefined;
+  return {
+    gap: workedForRowLength(layout.iconGap, "iconGap"),
+    marginBlockStart: workedForRowOffset(
+      layout.marginBlockStart,
+      "marginBlockStart",
+    ),
+    fontSize: workedForRowLength(layout.fontSize, "fontSize", true),
+    lineHeight: workedForRowLength(layout.lineHeight, "lineHeight", true),
+    paddingBlock: workedForRowLength(layout.paddingBlock, "paddingBlock"),
+    paddingInline: workedForRowLength(layout.paddingInline, "paddingInline"),
+    fontFamily: "inherit",
+  };
+}
+
+export function workedForRowChevronStyle(
+  layout?: AgentChatWorkedForRowLayout,
+): CSSProperties | undefined {
+  const size = workedForRowLength(layout?.chevronSize, "chevronSize", true);
+  return size ? { width: size, height: size } : undefined;
+}

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

@@ -129,6 +129,12 @@ async function recordBoth(
 
 describe("AuthPage attribution", () => {
   beforeEach(() => {
+    // Attribution storage depends on the visitor's time zone, so pin it.
+    const realOptions = new Intl.DateTimeFormat().resolvedOptions();
+    vi.spyOn(Intl.DateTimeFormat.prototype, "resolvedOptions").mockReturnValue({
+      ...realOptions,
+      timeZone: "America/Los_Angeles",
+    });
     vi.useFakeTimers({ toFake: ["Date"] });
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
     vi.stubGlobal(