@agent-native/toolkit 0.217.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.217.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.217.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.217.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/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>