@agent-native/toolkit 0.213.1 → 0.214.0

package/src/app/agentkit/react/message-content-order.spec.ts

@@ -0,0 +1,190 @@
+import type {
+  AgentEvent,
+  AgentMessage,
+  AgentWidget,
+} from "@agent-native/agentkit/protocol";
+import { describe, expect, it } from "vitest";
+
+import {
+  orderMessageContent,
+  type AgentMessageContentOrderResolver,
+} from "./message-content-order.js";
+
+const widget: AgentWidget = {
+  id: "chart-1",
+  kind: "core.data-chart",
+  data: { toolCallId: "tool-1" },
+};
+
+function event(
+  sequence: number,
+  payload: Omit<
+    AgentEvent,
+    "id" | "threadId" | "runId" | "sequence" | "occurredAt"
+  >,
+): AgentEvent {
+  return {
+    id: `event-${sequence}`,
+    threadId: "thread-1",
+    runId: "run-1",
+    sequence,
+    occurredAt: `2026-10-21T00:00:0${sequence}.000Z`,
+    ...payload,
+  } as AgentEvent;
+}
+
+describe("orderMessageContent", () => {
+  it("keeps an attached chart between the streamed introduction and conclusion", () => {
+    const message: AgentMessage = {
+      id: "assistant-1",
+      role: "assistant",
+      status: "complete",
+      parts: [
+        {
+          type: "text",
+          text: "Intro before chart. Conclusion after chart.",
+          format: "markdown",
+        },
+      ],
+    };
+    const events: AgentEvent[] = [
+      event(1, {
+        type: "message.created",
+        message: { ...message, status: "streaming", parts: [] },
+      }),
+      event(2, {
+        type: "message.delta",
+        messageId: message.id,
+        text: "Intro before chart. ",
+        format: "markdown",
+      }),
+      event(3, { type: "widget.created", messageId: message.id, widget }),
+      event(4, {
+        type: "message.delta",
+        messageId: message.id,
+        text: "Conclusion after chart.",
+        format: "markdown",
+      }),
+      event(5, { type: "message.completed", message }),
+    ];
+
+    const result = orderMessageContent(
+      message,
+      message.parts,
+      [widget],
+      events,
+    );
+
+    expect(result.map((item) => item.type)).toEqual(["part", "widget", "part"]);
+    expect(result[0]).toMatchObject({
+      type: "part",
+      part: { text: "Intro before chart. " },
+    });
+    expect(result[1]).toMatchObject({ type: "widget", widget });
+    expect(result[2]).toMatchObject({
+      type: "part",
+      part: { text: "Conclusion after chart." },
+    });
+  });
+
+  it("keeps legacy append order when streamed text cannot be matched exactly", () => {
+    const message: AgentMessage = {
+      id: "assistant-2",
+      role: "assistant",
+      parts: [{ type: "text", text: "Final answer" }],
+    };
+
+    const result = orderMessageContent(message, message.parts, [widget], []);
+
+    expect(result.map((item) => item.type)).toEqual(["part", "widget"]);
+  });
+
+  it("lets a host split text around a widget when stream order is unavailable", () => {
+    const message: AgentMessage = {
+      id: "assistant-3",
+      role: "assistant",
+      parts: [{ type: "text", text: "Intro. Summary." }],
+    };
+    const textPart = message.parts[0];
+    if (textPart?.type !== "text") throw new Error("Expected text part");
+
+    const result = orderMessageContent(
+      message,
+      message.parts,
+      [widget],
+      [],
+      ({ parts, widgets }) => {
+        const part = parts[0];
+        const chart = widgets[0];
+        if (part?.type !== "text" || !chart) return [];
+        return [
+          {
+            key: "intro",
+            type: "part",
+            part: { ...part, text: "Intro. " },
+          },
+          { key: chart.id, type: "widget", widget: chart },
+          {
+            key: "summary",
+            type: "part",
+            part: { ...part, text: "Summary." },
+          },
+        ];
+      },
+    );
+
+    expect(result.map((item) => item.type)).toEqual(["part", "widget", "part"]);
+    expect(result[0]).toMatchObject({ part: { text: "Intro. " } });
+    expect(result[1]).toMatchObject({ type: "widget", widget });
+    expect(result[2]).toMatchObject({ part: { text: "Summary." } });
+    expect(textPart.text).toBe("Intro. Summary.");
+  });
+
+  it("falls back when the host ordering result drops all visible content", () => {
+    const message: AgentMessage = {
+      id: "assistant-4",
+      role: "assistant",
+      parts: [{ type: "text", text: "A saved answer" }],
+    };
+
+    const result = orderMessageContent(
+      message,
+      message.parts,
+      [widget],
+      [],
+      () => [],
+    );
+
+    expect(result).toEqual([
+      {
+        key: "assistant-4-0",
+        type: "part",
+        part: message.parts[0],
+      },
+      { key: widget.id, type: "widget", widget },
+    ]);
+  });
+
+  it("falls back when the host ordering result loses text or a widget", () => {
+    const message: AgentMessage = {
+      id: "assistant-5",
+      role: "assistant",
+      parts: [{ type: "text", text: "Visible answer" }],
+    };
+    const incompleteOrders: AgentMessageContentOrderResolver[] = [
+      () => [{ key: widget.id, type: "widget" as const, widget }],
+      ({ defaultOrder }) => defaultOrder.slice(0, 1),
+    ];
+
+    for (const resolveOrder of incompleteOrders) {
+      const result = orderMessageContent(
+        message,
+        message.parts,
+        [widget],
+        [],
+        resolveOrder,
+      );
+      expect(result.map((item) => item.type)).toEqual(["part", "widget"]);
+    }
+  });
+});

package/src/app/agentkit/react/message-content-order.ts

@@ -0,0 +1,246 @@
+import type {
+  AgentEvent,
+  AgentMessage,
+  AgentMessagePart,
+  AgentWidget,
+} from "@agent-native/agentkit/protocol";
+
+export type AgentMessageContentItem =
+  | { key: string; type: "part"; part: AgentMessagePart }
+  | { key: string; type: "widget"; widget: AgentWidget };
+
+export interface AgentMessageContentOrderInput {
+  message: AgentMessage;
+  parts: AgentMessagePart[];
+  widgets: AgentWidget[];
+  events: AgentEvent[];
+  defaultOrder: AgentMessageContentItem[];
+}
+
+export type AgentMessageContentOrderResolver = (
+  input: AgentMessageContentOrderInput,
+) => AgentMessageContentItem[];
+
+type TextContentOrderItem = Extract<
+  AgentMessageContentItem,
+  { type: "part" }
+> & {
+  part: Extract<AgentMessagePart, { type: "text" }>;
+};
+
+function isTextContentOrderItem(
+  item: AgentMessageContentItem | null | undefined,
+): item is TextContentOrderItem {
+  return (
+    item?.type === "part" &&
+    typeof item.key === "string" &&
+    item.part?.type === "text" &&
+    typeof item.part.text === "string"
+  );
+}
+
+function resolvedItemsPreserveContent(
+  defaultOrder: AgentMessageContentItem[],
+  resolvedOrder: AgentMessageContentItem[],
+): AgentMessageContentItem[] | undefined {
+  if (!Array.isArray(resolvedOrder)) return undefined;
+
+  const defaultText = defaultOrder
+    .filter(isTextContentOrderItem)
+    .map((item) => item.part.text)
+    .join("");
+  const resolvedText = resolvedOrder
+    .filter(isTextContentOrderItem)
+    .map((item) => item.part.text)
+    .join("");
+  if (defaultText !== resolvedText) return undefined;
+
+  const expectedItems = new Map<string, AgentMessageContentItem[]>();
+  for (const item of defaultOrder) {
+    if (item.type === "part" && item.part.type === "text") continue;
+    const identity = `${item.type}:${item.key}`;
+    const matchingItems = expectedItems.get(identity) ?? [];
+    matchingItems.push(item);
+    expectedItems.set(identity, matchingItems);
+  }
+
+  const preservedItems: AgentMessageContentItem[] = [];
+  for (const item of resolvedOrder) {
+    if (!item || typeof item !== "object") return undefined;
+    if (item.type === "part" && item.part?.type === "text") {
+      if (typeof item.key !== "string" || typeof item.part.text !== "string") {
+        return undefined;
+      }
+      preservedItems.push(item);
+      continue;
+    }
+
+    if (
+      (item.type !== "part" && item.type !== "widget") ||
+      typeof item.key !== "string"
+    ) {
+      return undefined;
+    }
+
+    const identity = `${item.type}:${item.key}`;
+    const matchingItems = expectedItems.get(identity);
+    const original = matchingItems?.shift();
+    if (!original) return undefined;
+    preservedItems.push(original);
+  }
+
+  if (
+    [...expectedItems.values()].some((matchingItems) => matchingItems.length)
+  ) {
+    return undefined;
+  }
+  return preservedItems;
+}
+
+/** Uses the stream timeline only when it reconstructs the saved text exactly. */
+export function orderMessageContent(
+  message: AgentMessage,
+  visibleParts: AgentMessagePart[],
+  attachedWidgets: AgentWidget[],
+  events: AgentEvent[],
+  resolveOrder?: AgentMessageContentOrderResolver,
+): AgentMessageContentItem[] {
+  const fallback = [
+    ...visibleParts.map((part, index) => ({
+      key: `${message.id}-${index}`,
+      type: "part" as const,
+      part,
+    })),
+    ...attachedWidgets.map((widget) => ({
+      key: widget.id,
+      type: "widget" as const,
+      widget,
+    })),
+  ];
+  const resolve = (defaultOrder: AgentMessageContentItem[]) => {
+    const resolvedOrder = resolveOrder?.({
+      message,
+      parts: visibleParts,
+      widgets: attachedWidgets,
+      events,
+      defaultOrder,
+    });
+    if (resolvedOrder == null) return defaultOrder;
+    return (
+      resolvedItemsPreserveContent(defaultOrder, resolvedOrder) ?? defaultOrder
+    );
+  };
+
+  if (
+    attachedWidgets.length === 0 ||
+    message.parts.length !== 1 ||
+    message.parts[0]?.type !== "text" ||
+    visibleParts.length !== 1 ||
+    visibleParts[0]?.type !== "text" ||
+    visibleParts[0].text !== message.parts[0].text
+  ) {
+    return resolve(fallback);
+  }
+
+  const widgetIds = new Set(attachedWidgets.map((widget) => widget.id));
+  const widgetOffsets = new Map<string, number>();
+  const widgetEventOrder = new Map<string, number>();
+  let reconstructedText = "";
+  let textOffset = 0;
+
+  for (const [eventIndex, event] of events.entries()) {
+    if (event.type === "message.created" && event.message.id === message.id) {
+      const createdParts = event.message.parts;
+      if (
+        createdParts.length > 1 ||
+        createdParts.some((part) => part.type !== "text")
+      ) {
+        return resolve(fallback);
+      }
+      reconstructedText =
+        createdParts[0]?.type === "text" ? createdParts[0].text : "";
+      textOffset = reconstructedText.length;
+      continue;
+    }
+
+    if (event.type === "message.delta" && event.messageId === message.id) {
+      reconstructedText += event.text;
+      textOffset += event.text.length;
+      continue;
+    }
+
+    if (
+      (event.type === "widget.created" || event.type === "widget.updated") &&
+      event.messageId === message.id &&
+      widgetIds.has(event.widget.id) &&
+      !widgetOffsets.has(event.widget.id)
+    ) {
+      widgetOffsets.set(event.widget.id, textOffset);
+      widgetEventOrder.set(event.widget.id, eventIndex);
+    }
+  }
+
+  const fullText = message.parts[0].text;
+  if (
+    reconstructedText !== fullText ||
+    widgetOffsets.size !== attachedWidgets.length ||
+    [...widgetOffsets.values()].some((offset) => {
+      if (offset === 0 || offset === fullText.length) return false;
+      const preceding = fullText.charCodeAt(offset - 1);
+      const following = fullText.charCodeAt(offset);
+      return (
+        preceding >= 0xd800 &&
+        preceding <= 0xdbff &&
+        following >= 0xdc00 &&
+        following <= 0xdfff
+      );
+    })
+  ) {
+    return resolve(fallback);
+  }
+
+  const widgetsAtOffset = new Map<number, AgentWidget[]>();
+  for (const widget of attachedWidgets) {
+    const offset = widgetOffsets.get(widget.id)!;
+    const widgets = widgetsAtOffset.get(offset) ?? [];
+    widgets.push(widget);
+    widgetsAtOffset.set(offset, widgets);
+  }
+  for (const widgets of widgetsAtOffset.values()) {
+    widgets.sort(
+      (first, second) =>
+        widgetEventOrder.get(first.id)! - widgetEventOrder.get(second.id)!,
+    );
+  }
+
+  const insertions = [...widgetsAtOffset.entries()].sort(
+    ([first], [second]) => first - second,
+  );
+  const part = visibleParts[0];
+  if (part.type !== "text") return resolve(fallback);
+
+  const ordered: AgentMessageContentItem[] = [];
+  let cursor = 0;
+  for (const [offset, widgets] of insertions) {
+    if (offset > cursor) {
+      ordered.push({
+        key: `${message.id}-text-${cursor}`,
+        type: "part",
+        part: { ...part, text: part.text.slice(cursor, offset) },
+      });
+    }
+    for (const widget of widgets) {
+      ordered.push({ key: widget.id, type: "widget", widget });
+    }
+    cursor = offset;
+  }
+  if (cursor < part.text.length) {
+    ordered.push({
+      key: `${message.id}-text-${cursor}`,
+      type: "part",
+      part: { ...part, text: part.text.slice(cursor) },
+    });
+  }
+
+  return resolve(ordered);
+}

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

@@ -30,6 +30,7 @@ import {
   type AgentKitRunUsageLoader,
   type AgentKitSlots,
 } from "./context.js";
+import type { AgentMessageContentOrderResolver } from "./message-content-order.js";
 
 const mountedManagedClients = new WeakMap<AgentKitClient, number>();
 
@@ -84,6 +85,7 @@ export interface AgentKitRootBaseProps {
     request: AgentConnectionRequest,
   ) => Promise<AgentConnectionResponse>;
   onRenderError?: (failure: AgentKitRenderFailure) => void;
+  resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   onClientEffect?: (effect: {
     type: "client.effect" | "client.deeplink";
     name: string;
@@ -113,6 +115,7 @@ export function AgentKitRoot({
   loadRunUsage,
   onConnectionRequest,
   onRenderError,
+  resolveMessageContentOrder,
   onClientEffect,
   load = "auto",
   onLoadError,
@@ -290,6 +293,7 @@ export function AgentKitRoot({
       loadRunUsage={loadRunUsage}
       onConnectionRequest={onConnectionRequest}
       onRenderError={onRenderError}
+      resolveMessageContentOrder={resolveMessageContentOrder}
       onClientEffect={onClientEffect}
     >
       {children}

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

@@ -1216,7 +1216,7 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
   inline-size: fit-content;
   max-inline-size: 100%;
   align-items: center;
-  gap: 0.375rem;
+  gap: 1rem;
 }
 
 .agentkit-activities {
@@ -1418,7 +1418,7 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
 }
 
 .agentkit-activities-summary > .agentkit-summary-chevron {
-  opacity: 0;
+  opacity: 1;
 }
 
 .agentkit-activities[data-expandable="true"]

package/src/app/chat/AgentKitAssistantChat.spec.tsx

@@ -3348,6 +3348,25 @@ describe("AgentKitAssistantChat host behavior", () => {
     expect(container.querySelector(".agentkit-home-intro")).toBeNull();
   });
 
+  it("renders the shared context banner slot alongside the existing composer slot", async () => {
+    await mount(
+      baseProps({
+        composerSlot: <div data-testid="legacy-composer-slot">Notice</div>,
+        composerContextBannerSlot: (
+          <div data-testid="composer-context-banner-slot">Add context</div>
+        ),
+      }),
+    );
+
+    const composer = container.querySelector(".agentkit-host-composer")!;
+    expect(
+      composer.querySelector('[data-testid="legacy-composer-slot"]'),
+    ).not.toBeNull();
+    expect(
+      composer.querySelector('[data-testid="composer-context-banner-slot"]'),
+    ).not.toBeNull();
+  });
+
   it("puts the beginning revert before messages inside the scrollable transcript", async () => {
     chatMocks.thread.messages = [
       { id: "first-message", role: "user", parts: [] },

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -2093,9 +2093,17 @@ export const AgentKitAssistantChat = forwardRef<
           threadId={threadId}
           load={agentKitLoad}
           onLoadError={onThreadRestoreLoadError}
-          slots={agentKitSlots}
+          slots={
+            props.workedForSummarySlot
+              ? {
+                  ...agentKitSlots,
+                  workedForSummary: props.workedForSummarySlot,
+                }
+              : agentKitSlots
+          }
           registry={agentKitRegistry}
           labels={labels}
+          resolveMessageContentOrder={props.resolveMessageContentOrder}
           branchNavigation={props.branchNavigation}
           loadRunUsage={loadRunUsage}
           buildFeedbackReport={formatFeedbackReport}
@@ -5979,6 +5987,7 @@ function AgentKitComposerSurface({
             })}
       />
       {props.composerSlot}
+      {props.composerContextBannerSlot}
       {showHomeIntro ? (
         <div className="agentkit-home-intro">{props.homeIntroSlot}</div>
       ) : null}

package/src/app/chat/AgentPanel.header.spec.ts

@@ -31,6 +31,8 @@ import {
   shouldHandleAgentSidebarToggle,
   shouldHandleAgentPanelChatShortcut,
   shouldShowAgentPanelFullViewAction,
+  resolveAgentPanelPageHeaderActions,
+  resolveAgentPanelPageToolbarSlot,
   shouldShowAgentPanelPageHeader,
   shouldShowAgentPanelPageNewChatButton,
   shouldShowAgentPanelChatTabBar,
@@ -350,22 +352,60 @@ describe("AgentPanel header tab visibility", () => {
     expect(shouldDefaultAgentChatSurfacePageHeader(undefined)).toBe(false);
   });
 
-  it("exposes page header composition without moving it into app chrome", () => {
-    const source = readSource("src/app/chat/AgentPanel.tsx", "utf8");
+  it("keeps share and host toolbar actions when the title menu is hidden", async () => {
+    expect(
+      resolveAgentPanelPageHeaderActions({
+        showPageTitleMenu: false,
+        canShareActiveTab: true,
+      }),
+    ).toEqual({ showPageTitleMenu: false, showShareAction: true });
 
-    expect(source).toContain('data-agent-page-chat-header=""');
-    expect(source).toContain("pageHeaderLeadingSlot");
-    expect(source).toContain("pageToolbarSlot");
-    expect(source).toContain("activeTab?.label");
-    expect(source).toContain('data-agent-page-title-menu=""');
-    expect(source).toContain("<IconShare3 size={15}");
-    expect(source.indexOf("<IconShare3 size={15}")).toBeLessThan(
-      source.indexOf(
-        "{pageToolbarSlot}",
-        source.indexOf("triggerContent={<IconShare3"),
-      ),
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+    const toggleHistory = vi.fn();
+    const clearActiveTab = vi.fn();
+    const toolbar = resolveAgentPanelPageToolbarSlot(
+      (actions) =>
+        React.createElement(
+          "div",
+          null,
+          React.createElement(
+            "button",
+            { onClick: actions.toggleHistory },
+            actions.showHistory ? "Hide chats" : "All chats",
+          ),
+          actions.activeTabMessageCount > 0
+            ? React.createElement(
+                "button",
+                { onClick: actions.clearActiveTab },
+                "Clear chat",
+              )
+            : null,
+        ),
+      {
+        activeTabMessageCount: 2,
+        clearActiveTab,
+        showHistory: false,
+        toggleHistory,
+      },
     );
-    expect(source).toContain("border-b border-border/70");
+
+    try {
+      await act(async () => root.render(toolbar));
+      const buttons = container.querySelectorAll("button");
+      expect([...buttons].map((button) => button.textContent)).toEqual([
+        "All chats",
+        "Clear chat",
+      ]);
+      await act(async () => buttons[0]?.click());
+      await act(async () => buttons[1]?.click());
+      expect(toggleHistory).toHaveBeenCalledOnce();
+      expect(clearActiveTab).toHaveBeenCalledOnce();
+    } finally {
+      await act(async () => root.unmount());
+      container.remove();
+    }
   });
 
   it("normalizes legacy and unknown modes back to chat", () => {
@@ -1193,6 +1233,24 @@ describe("AgentChatSurface chrome defaults", () => {
     expect(surface.props.showHeader).toBe(true);
     expect(surface.props.showTabBar).toBe(true);
   });
+
+  it("allows a page host to hide only the title menu", () => {
+    const surface = AgentChatSurface({
+      mode: "page",
+      showPageTitleMenu: false,
+    });
+    const panel = surface.props.children[1];
+    const headerActions = resolveAgentPanelPageHeaderActions({
+      showPageTitleMenu: false,
+      canShareActiveTab: true,
+    });
+
+    expect(panel.props.showPageTitleMenu).toBe(false);
+    expect(headerActions).toEqual({
+      showPageTitleMenu: false,
+      showShareAction: true,
+    });
+  });
 });
 
 describe("AgentPanel stale lazy chunk recovery", () => {