@agent-native/toolkit 0.217.0 → 0.219.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.217.0",
+  "version": "0.219.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.217.0"
+    "@agent-native/agentkit": "^0.219.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.217.0"
+    "@agent-native/core": "^0.219.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\);/,
@@ -500,17 +503,19 @@ describe("AgentKitChat", () => {
     expect(styles).toMatch(
       /@media \(max-width: 40rem\)[\s\S]*\[data-agent-composer-slot="area"\][\s\S]*padding-inline: 0;/,
     );
-    expect(styles).toMatch(
-      /\[data-agent-composer-slot="model-button"\] \{[\s\S]*max-inline-size: 11rem;/,
-    );
+    const modelButtonRule = styles.match(
+      /\.agentkit-composer \[data-agent-composer-slot="model-button"\] \{([^}]*)\}/,
+    )?.[1];
+    expect(modelButtonRule).toContain("max-inline-size: 11rem;");
+    expect(modelButtonRule).toContain("flex: 0 1 auto;");
     expect(styles).toMatch(
       /\[data-agent-composer-slot="mode-button"\] \{[\s\S]*min-inline-size: 3\.5rem;/,
     );
     expect(styles).toMatch(
-      /@media \(max-width: 40rem\)[\s\S]*\[data-agent-composer-slot="model-button"\][\s\S]*max-inline-size: 7\.5rem;/,
+      /@container \(max-width: 24rem\)[\s\S]*\[data-agent-composer-slot="model-button"\][\s\S]*max-inline-size: 7\.5rem;/,
     );
     expect(styles).toMatch(
-      /@media \(max-width: 40rem\)[\s\S]*\.agent-composer-model-effort[\s\S]*display: none;/,
+      /@container \(max-width: 24rem\)[\s\S]*\.agent-composer-model-effort[\s\S]*display: none;/,
     );
     const composerPopoverRule = styles.match(
       /\[data-agent-native-composer-popover="true"\] \{([^}]*)\}/,

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

@@ -104,6 +104,7 @@
     var(--agent-kit-composer-surface, var(--agentkit-surface))
   );
   box-shadow: var(--agentkit-elevation);
+  container-type: inline-size;
 }
 
 .agentkit-composer[data-agent-composer-slot="root"]:focus-within {
@@ -161,9 +162,11 @@
   flex: 1;
 }
 
+/* Only the model picker shrinks, so narrow composers never push out send. */
 .agentkit-composer [data-agent-composer-slot="model-button"] {
-  flex: none;
+  flex: 0 1 auto;
   max-inline-size: 11rem;
+  overflow: hidden;
 }
 
 .agentkit-composer [data-agent-composer-slot="mode-button"] {
@@ -627,6 +630,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 +688,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;
@@ -2151,9 +2172,16 @@ button.agentkit-object {
     padding-inline: 0;
   }
 
+  .agentkit-message[data-role="user"] .agentkit-message-content {
+    max-inline-size: min(94%, var(--agentkit-user-bubble-max-width, 38rem));
+  }
+}
+
+/* Composer width, not viewport: desktop side panels are as narrow as phones. */
+@container (max-width: 24rem) {
   .agentkit-composer [data-agent-composer-slot="toolbar"] {
     gap: 0.125rem;
-    padding-inline: 0.5rem;
+    padding-inline: 0.375rem;
   }
 
   .agentkit-composer [data-agent-composer-slot="model-button"] {
@@ -2162,14 +2190,11 @@ button.agentkit-object {
   }
 
   .agentkit-composer [data-agent-composer-slot="mode-button"] {
+    min-inline-size: 0;
     padding-inline: 0.375rem;
   }
 
   .agentkit-composer .agent-composer-model-effort {
     display: none;
   }
-
-  .agentkit-message[data-role="user"] .agentkit-message-content {
-    max-inline-size: min(94%, var(--agentkit-user-bubble-max-width, 38rem));
-  }
 }

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. */