@agent-native/toolkit 0.216.0 → 0.218.0

package/dist/chat-history.css

@@ -46,6 +46,11 @@
   min-height: 0;
 }
 
+/* A rail inside a popover, such as All chats, scrolls instead of growing. */
+.an-chat-history--rail.an-chat-history--capped .an-chat-history__list {
+  max-height: 16rem;
+}
+
 .an-chat-history-rail .an-chat-history__state:empty {
   display: none;
 }
@@ -71,19 +76,60 @@
   padding: 0 4px;
 }
 
-.an-chat-history-row__access {
+.an-chat-history-row__owner-mark {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+/* The active row has no timestamp; keep its avatar clear of the ⋯ trigger. */
+.an-chat-history--rail
+  .an-chat-history-row--has-menu
+  .an-chat-history-row__owner-mark:last-child {
+  margin-inline-end: 18px;
+}
+
+.an-chat-owner-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: hsl(var(--muted));
+  /* guard:allow-raw-color — the initial sits on an emailToColor badge in both themes */
+  color: #fff;
+  font-size: 8px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.an-chat-owner-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.an-chat-history-owner {
   display: flex;
-  gap: 6px;
+  flex-direction: column;
+  gap: 1px;
   min-width: 0;
-  margin-top: 2px;
-  font-size: 10px;
-  color: hsl(var(--muted-foreground) / 0.7);
+  text-align: start;
 }
 
-.an-chat-history-row__owner {
+.an-chat-history-owner__name {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-weight: 500;
+}
+
+.an-chat-history-owner__access {
+  color: hsl(var(--muted-foreground));
 }
 
 .an-chat-history__state--error {
@@ -149,7 +195,10 @@
 }
 
 .an-chat-history-rail__disclosure,
-.an-chat-history-rail__new-chat {
+.an-chat-history-rail__new-chat,
+.an-chat-history-rail__section-toggle,
+.an-chat-history-rail__load-more,
+.an-chat-history-rail__retry {
   display: flex;
   align-items: center;
   border: 0;
@@ -160,17 +209,52 @@
 }
 
 .an-chat-history-rail__disclosure:hover,
-.an-chat-history-rail__new-chat:hover {
+.an-chat-history-rail__new-chat:hover,
+.an-chat-history-rail__section-toggle:hover,
+.an-chat-history-rail__load-more:hover,
+.an-chat-history-rail__retry:hover {
   background: hsl(var(--accent) / 0.5);
   color: hsl(var(--accent-foreground));
 }
 
 .an-chat-history-rail__disclosure:focus-visible,
-.an-chat-history-rail__new-chat:focus-visible {
+.an-chat-history-rail__new-chat:focus-visible,
+.an-chat-history-rail__section-toggle:focus-visible,
+.an-chat-history-rail__load-more:focus-visible,
+.an-chat-history-rail__retry:focus-visible {
   outline: 2px solid hsl(var(--ring));
   outline-offset: -2px;
 }
 
+/* Show all, Load more and Retry match New chat: 12px muted text, not a button. */
+.an-chat-history-rail__section-toggle,
+.an-chat-history-rail__load-more,
+.an-chat-history-rail__retry {
+  flex: 0 0 auto;
+  gap: 4px;
+  height: auto;
+  min-height: 26px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  box-shadow: none;
+}
+
+.an-chat-history-rail__section-toggle svg,
+.an-chat-history-rail__load-more svg,
+.an-chat-history-rail__retry svg {
+  width: 13px;
+  height: 13px;
+}
+
+.an-chat-history__state .an-chat-history-rail__retry {
+  display: inline-flex;
+  min-height: 22px;
+  margin-inline-start: 4px;
+  padding: 2px 6px;
+}
+
 .an-chat-history-rail__disclosure {
   justify-content: center;
   flex: 0 0 auto;
@@ -267,6 +351,7 @@
 
 .an-chat-history-row__title {
   min-width: 0;
+  margin-inline-end: auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -435,6 +520,21 @@
   box-shadow: var(--agent-kit-overlay-elevation);
 }
 
+.an-chat-history-row__menu-owner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 260px;
+  margin-bottom: 4px;
+  padding: 6px 8px 8px;
+  border-bottom: 1px solid hsl(var(--border));
+  font-size: 12px;
+}
+
+.an-chat-history-row__menu-owner .an-chat-history-owner__access {
+  font-size: 11px;
+}
+
 .an-chat-history-row__menu-item {
   display: flex;
   align-items: center;

package/dist/ui/sonner.d.ts

@@ -1,5 +1,5 @@
-import { Toaster as Sonner } from "sonner";
+import { toast as sonnerToast, Toaster as Sonner } from "sonner";
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 declare const Toaster: ({ className, toastOptions, ...props }: ToasterProps) => import("react").JSX.Element;
-export { Toaster };
+export { Toaster, sonnerToast };
 //# sourceMappingURL=sonner.d.ts.map

package/dist/ui/sonner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI3C,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AASxD,QAAA,MAAM,OAAO,0CAA2C,YAAY,gCAyCnE,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAIjE,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AASxD,QAAA,MAAM,OAAO,0CAA2C,YAAY,gCAyCnE,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/ui/sonner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
+import { toast as sonnerToast, Toaster as Sonner } from "sonner";
 import { cn } from "../utils.js";
 const toastWidthClasses = "group-[.toaster]:!w-[var(--width)] group-[.toaster]:!min-w-[min(20rem,calc(100vw_-_2rem))] group-[.toaster]:!max-w-[var(--width)] group-[.toaster]:!gap-3 group-[.toaster]:!break-normal";
 const toastContentClasses = "group-[.toast]:!min-w-0 group-[.toast]:!flex-1 group-[.toast]:!basis-auto group-[.toast]:break-words";
@@ -21,5 +21,5 @@ const Toaster = ({ className, toastOptions, ...props }) => {
             },
         }, ...props }));
 };
-export { Toaster };
+export { Toaster, sonnerToast };
 //# sourceMappingURL=sonner.js.map

package/dist/ui/sonner.js.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.js","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,MAAM,iBAAiB,GACrB,0LAA0L,CAAC;AAC7L,MAAM,mBAAmB,GACvB,sGAAsG,CAAC;AACzG,MAAM,kBAAkB,GACtB,4DAA4D,CAAC;AAE/D,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,YAAY,EAAE,UAAU,CAAC;IAE5C,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,KAA8B,EACrC,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,EACD,YAAY,EAAE;YACZ,GAAG,YAAY;YACf,UAAU,EAAE;gBACV,GAAG,UAAU;gBACb,KAAK,EAAE,EAAE,CACP,iBAAiB,EACjB,uIAAuI,EACvI,UAAU,EAAE,KAAK,CAClB;gBACD,KAAK,EAAE,EAAE,CAAC,4BAA4B,EAAE,UAAU,EAAE,KAAK,CAAC;gBAC1D,WAAW,EAAE,EAAE,CACb,iEAAiE,EACjE,UAAU,EAAE,WAAW,CACxB;gBACD,OAAO,EAAE,EAAE,CAAC,mBAAmB,EAAE,UAAU,EAAE,OAAO,CAAC;gBACrD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,kEAAkE,EAClE,UAAU,EAAE,YAAY,CACzB;gBACD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,8DAA8D,EAC9D,UAAU,EAAE,YAAY,CACzB;aACF;SACF,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"sonner.js","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,MAAM,iBAAiB,GACrB,0LAA0L,CAAC;AAC7L,MAAM,mBAAmB,GACvB,sGAAsG,CAAC;AACzG,MAAM,kBAAkB,GACtB,4DAA4D,CAAC;AAE/D,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,YAAY,EAAE,UAAU,CAAC;IAE5C,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,KAA8B,EACrC,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,EACD,YAAY,EAAE;YACZ,GAAG,YAAY;YACf,UAAU,EAAE;gBACV,GAAG,UAAU;gBACb,KAAK,EAAE,EAAE,CACP,iBAAiB,EACjB,uIAAuI,EACvI,UAAU,EAAE,KAAK,CAClB;gBACD,KAAK,EAAE,EAAE,CAAC,4BAA4B,EAAE,UAAU,EAAE,KAAK,CAAC;gBAC1D,WAAW,EAAE,EAAE,CACb,iEAAiE,EACjE,UAAU,EAAE,WAAW,CACxB;gBACD,OAAO,EAAE,EAAE,CAAC,mBAAmB,EAAE,UAAU,EAAE,OAAO,CAAC;gBACrD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,kEAAkE,EAClE,UAAU,EAAE,YAAY,CACzB;gBACD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,8DAA8D,EAC9D,UAAU,EAAE,YAAY,CACzB;aACF;SACF,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.216.0",
+  "version": "0.218.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -46,6 +46,13 @@
       "import": "./dist/app/chat/agent-sidebar-events.js",
       "default": "./dist/app/chat/agent-sidebar-events.js"
     },
+    "./app/chat/ownership-history": {
+      "types": "./dist/app/chat/ownership-history/index.d.ts",
+      "browser": "./dist/app/chat/ownership-history/index.js",
+      "development": "./dist/app/chat/ownership-history/index.js",
+      "import": "./dist/app/chat/ownership-history/index.js",
+      "default": "./dist/app/chat/ownership-history/index.js"
+    },
     "./app/chat": {
       "types": "./dist/app/chat/index.d.ts",
       "browser": "./dist/app/chat/index.js",
@@ -678,7 +685,7 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@agent-native/agentkit": "^0.216.0"
+    "@agent-native/agentkit": "^0.218.0"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",
@@ -702,7 +709,7 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "^0.216.0"
+    "@agent-native/core": "^0.218.0"
   },
   "peerDependencies": {
     "@agent-native/core": ">=0.205.1",

package/src/app/agent-page/AgentContextTab.spec.ts

@@ -1,7 +1,28 @@
 import type { ChatThreadSummary } from "@agent-native/core/client/agent-chat";
-import { describe, expect, it } from "vitest";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
 
-import { mostRecentlyUpdatedThread } from "./AgentContextTab.js";
+import {
+  AgentContextTab,
+  mostRecentlyUpdatedThread,
+} from "./AgentContextTab.js";
+
+const hooks = vi.hoisted(() => ({
+  threads: vi.fn(),
+  query: vi.fn((..._args: unknown[]) => ({})),
+}));
+
+vi.mock("@agent-native/core/client/agent-chat", () => ({
+  useChatThreads: hooks.threads,
+}));
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useActionQuery: hooks.query,
+}));
+vi.mock("../context-xray/index.js", () => ({
+  ContextMeter: () => null,
+  ContextTreemap: () => null,
+}));
 
 function thread(
   id: string,
@@ -32,4 +53,31 @@ describe("mostRecentlyUpdatedThread", () => {
   it("returns undefined when no threads exist", () => {
     expect(mostRecentlyUpdatedThread([])).toBeUndefined();
   });
+
+  it("requests only owned lifecycle summaries before choosing the latest snapshot", () => {
+    hooks.threads.mockReturnValue({
+      threads: [thread("old-pinned", 100, 500), thread("newest", 300)],
+    });
+    hooks.query.mockClear();
+    renderToStaticMarkup(createElement(AgentContextTab, { scope: "user" }));
+
+    expect(hooks.threads).toHaveBeenCalledWith(
+      undefined,
+      "agent-context-page",
+      null,
+      {
+        autoCreate: false,
+        restoreActiveThread: false,
+        ownership: "mine",
+      },
+    );
+    expect(hooks.query.mock.calls).toEqual([
+      ["context-preview-get", { scope: "user" }, { staleTime: 5_000 }],
+      [
+        "context-manifest-get",
+        { threadId: "newest" },
+        { enabled: true, staleTime: 1_000 },
+      ],
+    ]);
+  });
 });

package/src/app/agent-page/AgentContextTab.tsx

@@ -328,6 +328,7 @@ export function AgentContextTab({ scope }: AgentPageTabProps) {
   const threads = useChatThreads(undefined, "agent-context-page", null, {
     autoCreate: false,
     restoreActiveThread: false,
+    ownership: "mine",
   });
   const latestThread = mostRecentlyUpdatedThread(threads.threads);
   const liveManifestQuery = useActionQuery(

package/src/app/agentkit/react/components.interaction.spec.tsx

@@ -263,6 +263,7 @@ describe("AgentKitChat interactions", () => {
                 topInset: 5,
                 messageLaneWidth: 730,
                 messageLaneOffsetInline: -33,
+                messageLaneOffsetMode: "responsive",
                 messageGap: 12,
                 messageLineHeight: 20,
                 fontFamily: "IBM Plex Sans",
@@ -285,6 +286,7 @@ describe("AgentKitChat interactions", () => {
         ".agentkit-transcript-content",
       );
       expect(transcript).not.toBeNull();
+      expect(transcript!.dataset.laneOffsetMode).toBe("responsive");
       expect(
         transcript!.style.getPropertyValue("--agentkit-transcript-top-inset"),
       ).toBe("5px");

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

@@ -401,7 +401,10 @@ describe("AgentKitChat", () => {
       ".agentkit-transcript {\n  grid-column: 1;\n  grid-row: 2;",
     );
     expect(styles).toMatch(
-      /\.agentkit-transcript \{[\s\S]*inline-size: 100%;[\s\S]*overflow-y: auto;/,
+      /\.agentkit-transcript \{[\s\S]*container-name: agentkit-transcript;[\s\S]*container-type: inline-size;[\s\S]*inline-size: 100%;[\s\S]*overflow-y: auto;/,
+    );
+    expect(styles).toContain(
+      "@container agentkit-transcript (max-width: 74.999rem)",
     );
     expect(styles).not.toMatch(
       /\.agentkit-transcript \{[^}]*inline-size: min\(100%, 47rem\);/,

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

@@ -5713,6 +5713,9 @@ export function AgentKitChat({
           <div
             ref={transcriptContentRef}
             className="agentkit-transcript-content"
+            data-lane-offset-mode={
+              transcriptLayout?.messageLaneOffsetMode ?? "clamped"
+            }
             style={transcriptContentStyle(transcriptLayout)}
           >
             <AgentKitRegionSlot slot={Transcript} threadId={threadId}>

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

@@ -43,6 +43,7 @@ import {
   type ReactNode,
 } from "react";
 
+import type { AgentChatDataChartLayout } from "./data-chart-layout.js";
 import type { AgentMessageContentOrderResolver } from "./message-content-order.js";
 import type { AgentChatWorkedForRowLayout } from "./transcript-layout.js";
 
@@ -498,6 +499,7 @@ export interface AgentKitProviderProps {
   onRenderError?: (failure: AgentKitRenderFailure) => void;
   resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   workedForRowLayout?: AgentChatWorkedForRowLayout;
+  dataChartLayout?: AgentChatDataChartLayout;
   formatWorkedForDuration?: (durationMs: number) => string;
   onClientEffect?: (effect: {
     type: "client.effect" | "client.deeplink";
@@ -530,6 +532,7 @@ export interface AgentKitContextValue {
   onRenderError?: (failure: AgentKitRenderFailure) => void;
   resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   workedForRowLayout?: AgentChatWorkedForRowLayout;
+  dataChartLayout?: AgentChatDataChartLayout;
   formatWorkedForDuration?: (durationMs: number) => string;
   registerComposerFocus: (threadId: ThreadId, focus: () => void) => () => void;
   requestComposerFocus: (threadId: ThreadId) => void;
@@ -553,6 +556,7 @@ export function AgentKitProvider({
   onRenderError,
   resolveMessageContentOrder,
   workedForRowLayout,
+  dataChartLayout,
   formatWorkedForDuration,
   onClientEffect,
   children,
@@ -622,6 +626,7 @@ export function AgentKitProvider({
       onRenderError,
       resolveMessageContentOrder,
       workedForRowLayout,
+      dataChartLayout,
       formatWorkedForDuration,
       registerComposerFocus,
       requestComposerFocus,
@@ -642,6 +647,7 @@ export function AgentKitProvider({
       onRenderError,
       resolveMessageContentOrder,
       workedForRowLayout,
+      dataChartLayout,
       formatWorkedForDuration,
       registerComposerFocus,
       requestComposerFocus,

package/src/app/agentkit/react/data-chart-layout.ts

@@ -0,0 +1,25 @@
+/** Optional shared presentation controls for built-in data charts in chat. */
+export interface AgentChatDataChartLayout {
+  /** Maximum card width, in CSS pixels. The card remains responsive below it. */
+  maxWidth?: number;
+  /** Plot spacing in CSS pixels. The left inset remains data-driven. */
+  plotInsets?: { top?: number; right?: number; bottom?: number };
+  /** CSS font family for chart labels. */
+  labelFontFamily?: string;
+  /** Chart label font size, in CSS pixels. */
+  labelFontSize?: number;
+  /** Chart label color treatment. */
+  labelTone?: "foreground" | "muted";
+  /** CSS font family for the chart title. */
+  titleFontFamily?: string;
+  /** Chart title font size, in CSS pixels. */
+  titleFontSize?: number;
+  /** Chart title font weight. */
+  titleFontWeight?: number;
+  /** Chart title line height, in CSS pixels. */
+  titleLineHeight?: number;
+  /** Chart title color treatment. */
+  titleTone?: "foreground" | "muted";
+  /** Visual weight of chart display actions. */
+  actionsVariant?: "primary" | "secondary" | "quiet";
+}

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

@@ -1,6 +1,7 @@
 export * from "./chat.js";
 export * from "./components.js";
 export * from "./context.js";
+export * from "./data-chart-layout.js";
 export * from "./message-content-order.js";
 export * from "./root.js";
 export * from "./streaming-text.js";

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

@@ -30,6 +30,7 @@ import {
   type AgentKitRunUsageLoader,
   type AgentKitSlots,
 } from "./context.js";
+import type { AgentChatDataChartLayout } from "./data-chart-layout.js";
 import type { AgentMessageContentOrderResolver } from "./message-content-order.js";
 import type { AgentChatWorkedForRowLayout } from "./transcript-layout.js";
 
@@ -88,6 +89,7 @@ export interface AgentKitRootBaseProps {
   onRenderError?: (failure: AgentKitRenderFailure) => void;
   resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   workedForRowLayout?: AgentChatWorkedForRowLayout;
+  dataChartLayout?: AgentChatDataChartLayout;
   formatWorkedForDuration?: (durationMs: number) => string;
   onClientEffect?: (effect: {
     type: "client.effect" | "client.deeplink";
@@ -120,6 +122,7 @@ export function AgentKitRoot({
   onRenderError,
   resolveMessageContentOrder,
   workedForRowLayout,
+  dataChartLayout,
   formatWorkedForDuration,
   onClientEffect,
   load = "auto",
@@ -300,6 +303,7 @@ export function AgentKitRoot({
       onRenderError={onRenderError}
       resolveMessageContentOrder={resolveMessageContentOrder}
       workedForRowLayout={workedForRowLayout}
+      dataChartLayout={dataChartLayout}
       formatWorkedForDuration={formatWorkedForDuration}
       onClientEffect={onClientEffect}
     >

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

@@ -627,6 +627,8 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
 .agentkit-transcript {
   grid-column: 1;
   grid-row: 2;
+  container-name: agentkit-transcript;
+  container-type: inline-size;
   inline-size: 100%;
   min-block-size: 0;
   overflow-y: auto;
@@ -683,6 +685,22 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
   padding-block-start: var(--agentkit-transcript-top-inset, 1.5rem);
 }
 
+.agentkit-transcript-content[data-lane-offset-mode="responsive"] {
+  inset-inline-start: var(--agentkit-transcript-lane-offset-inline, 0px);
+}
+
+@container agentkit-transcript (max-width: 74.999rem) {
+  .agentkit-transcript-content[data-lane-offset-mode="responsive"] {
+    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)
+    );
+  }
+}
+
 .agentkit-scroll-to-bottom-control {
   position: sticky;
   z-index: 2;

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

@@ -7,6 +7,8 @@ export interface AgentChatTranscriptLayout {
   messageLaneWidth?: number;
   /** Signed inline offset for the centered message lane, in CSS pixels. */
   messageLaneOffsetInline?: number;
+  /** Keep the offset within the lane at all widths or allow wide-screen docking. */
+  messageLaneOffsetMode?: "clamped" | "responsive";
   /** Space after each message, in CSS pixels. */
   messageGap?: number;
   /** Assistant message line height, in CSS pixels. */

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);