@agent-native/toolkit 0.212.1 → 0.214.0

package/dist/composer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"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"}

package/dist/composer/index.js

@@ -1,4 +1,6 @@
 export { FileReference } from "./extensions/FileReference.js";
+export { ComposerContextBanner, } from "./ComposerContextBanner.js";
+export { ComposerModePicker, } from "./ComposerModePicker.js";
 export { useComposerDefaultActions, mergeComposerMenuItems, } from "./ComposerPlusMenu.js";
 export { ComposerContextMenu, ComposerContextSearchInput, getComposerContextMenuEntries, } from "./ComposerContextMenu.js";
 export { ComposerContextPickerDialog } from "./ComposerContextPickerDialog.js";

package/dist/composer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACL,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAG1B,6BAA6B,GAW9B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,4BAA4B,EAC5B,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,GAE3B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EACL,kBAAkB,GAEnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,GAIzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,cAAc,EACd,wBAAwB,EACxB,8BAA8B,EAC9B,kCAAkC,EAClC,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,mCAAmC,EACnC,wCAAwC,EACxC,qBAAqB,EACrB,iBAAiB,GAQlB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,0BAA0B,GAE3B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,SAAS,GAGV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,kBAAkB,GAMnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EACL,qBAAqB,EACrB,sBAAsB,GAQvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,0BAA0B,EAC1B,wCAAwC,EACxC,wBAAwB,EACxB,iCAAiC,EACjC,wBAAwB,EACxB,4BAA4B,EAC5B,yBAAyB,EACzB,yBAAyB,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,4BAA4B,GAK7B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,mCAAmC,EACnC,kCAAkC,EAClC,+BAA+B,EAC/B,2BAA2B,EAC3B,2BAA2B,EAC3B,yBAAyB,GAG1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EACL,+BAA+B,EAC/B,0BAA0B,GAG3B,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/composer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EACL,qBAAqB,GAEtB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,kBAAkB,GAGnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAG1B,6BAA6B,GAW9B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,4BAA4B,EAC5B,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,GAE3B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EACL,kBAAkB,GAEnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,GAIzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,cAAc,EACd,wBAAwB,EACxB,8BAA8B,EAC9B,kCAAkC,EAClC,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,mCAAmC,EACnC,wCAAwC,EACxC,qBAAqB,EACrB,iBAAiB,GAQlB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,0BAA0B,GAE3B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,SAAS,GAGV,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,kBAAkB,GAMnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EACL,qBAAqB,EACrB,sBAAsB,GAQvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,0BAA0B,EAC1B,wCAAwC,EACxC,wBAAwB,EACxB,iCAAiC,EACjC,wBAAwB,EACxB,4BAA4B,EAC5B,yBAAyB,EACzB,yBAAyB,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,4BAA4B,GAK7B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,mCAAmC,EACnC,kCAAkC,EAClC,+BAA+B,EAC/B,2BAA2B,EAC3B,2BAA2B,EAC3B,yBAAyB,GAG1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EACL,+BAA+B,EAC/B,0BAA0B,GAG3B,MAAM,uBAAuB,CAAC"}

package/dist/styles.css

@@ -18,6 +18,7 @@
  */
 @import "./theme/resource-icons.css";
 @import "./app-shell/prompt-home.css";
+@import "./app/styles/theme-families.css";
 @import "./app/styles/agent-native.css";
 
 @source "./**/*.{js,ts,tsx}";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.212.1",
+  "version": "0.214.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -678,7 +678,7 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@agent-native/agentkit": "^0.212.1"
+    "@agent-native/agentkit": "^0.214.0"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",
@@ -702,7 +702,7 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "^0.212.1"
+    "@agent-native/core": "^0.214.0"
   },
   "peerDependencies": {
     "@agent-native/core": ">=0.205.1",

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

@@ -196,6 +196,18 @@ describe("AgentMessageActions layout", () => {
 });
 
 describe("AgentKitChat", () => {
+  it("keeps work-summary chevrons visible before the row is opened", () => {
+    const styles = readFileSync(
+      new URL("./styles.css", import.meta.url),
+      "utf8",
+    ).replace(/\r\n/g, "\n");
+    const rule = styles.match(
+      /\.agentkit-activities-summary > \.agentkit-summary-chevron \{([^}]*)\}/,
+    )?.[1];
+
+    expect(rule).toContain("opacity: 1;");
+  });
+
   it("renders the complete reference surface from one managed component", () => {
     const transport: AgentTransport = {
       async startRun() {

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

@@ -136,6 +136,7 @@ import {
   type AgentKitSuggestionsRenderProps,
   type AgentRunFailureRenderProps,
 } from "./context.js";
+import { orderMessageContent } from "./message-content-order.js";
 import { AgentStreamingText } from "./streaming-text.js";
 
 // AgentKit React installs without @agent-native/core, so it repeats core's
@@ -1907,7 +1908,9 @@ function AgentWorkDisclosure({
   current?: ReactNode;
   children: ReactNode;
 }) {
+  const { slots } = useAgentKit();
   const [open, setOpen] = useState(false);
+  const Summary = slots.workedForSummary;
   return (
     <details
       className="agentkit-activities"
@@ -1924,18 +1927,30 @@ function AgentWorkDisclosure({
           setOpen((value) => !value);
         }}
       >
-        <span className="agentkit-activities-summary-content">
-          {label ? (
-            <span className="agentkit-activities-heading">
-              <span className="agentkit-activities-label">{label}</span>
+        {Summary ? (
+          <Summary
+            label={label}
+            running={running}
+            expandable={expandable}
+            open={open}
+            current={current}
+          />
+        ) : (
+          <>
+            <IconChevronRight
+              aria-hidden="true"
+              className="agentkit-icon agentkit-summary-chevron"
+            />
+            <span className="agentkit-activities-summary-content">
+              {label ? (
+                <span className="agentkit-activities-heading">
+                  <span className="agentkit-activities-label">{label}</span>
+                </span>
+              ) : null}
+              {current}
             </span>
-          ) : null}
-          {current}
-        </span>
-        <IconChevronRight
-          aria-hidden="true"
-          className="agentkit-icon agentkit-summary-chevron"
-        />
+          </>
+        )}
       </summary>
       {children}
     </details>
@@ -3787,7 +3802,7 @@ export function AgentMessageView({
   value: message,
   threadId,
 }: AgentKitRenderProps<AgentMessage>) {
-  const { labels, slots } = useAgentKit();
+  const { labels, slots, resolveMessageContentOrder } = useAgentKit();
   const thread = useAgentThread(threadId);
   const visibleMessage = stripAgentMessageContext(message);
   const Supplement = slots.messageSupplement;
@@ -3812,6 +3827,13 @@ export function AgentMessageView({
       thread.annotationMessageIds[annotation.id] === message.id &&
       !embeddedAnnotationIds.has(annotation.id),
   );
+  const orderedContent = orderMessageContent(
+    visibleMessage,
+    visibleMessage.parts,
+    attachedWidgets,
+    thread.events,
+    resolveMessageContentOrder,
+  );
   if (
     !message.parts.length &&
     !attachedWidgets.length &&
@@ -3830,23 +3852,20 @@ export function AgentMessageView({
       aria-busy={message.status === "streaming"}
     >
       <div className="agentkit-message-content">
-        {visibleMessage.parts.map((part, index) => (
+        {orderedContent.map((item, index) => (
           <AgentMessagePartView
-            key={`${message.id}-${index}`}
-            value={part}
+            key={item.key}
+            value={
+              item.type === "widget"
+                ? { type: "widget", widget: item.widget }
+                : item.part
+            }
             threadId={threadId}
             active={message.status === "streaming"}
             resetKey={`${threadId}:${message.id}:${index}`}
             userMessage={message.role === "user"}
           />
         ))}
-        {attachedWidgets.map((widget) => (
-          <AgentMessagePartView
-            key={widget.id}
-            value={{ type: "widget", widget }}
-            threadId={threadId}
-          />
-        ))}
         {attachedAnnotations.length ? (
           <div className="agentkit-annotations">
             {attachedAnnotations.map((annotation) => (

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

@@ -43,6 +43,8 @@ import {
   type ReactNode,
 } from "react";
 
+import type { AgentMessageContentOrderResolver } from "./message-content-order.js";
+
 export interface AgentKitRenderProps<T> {
   value: T;
   threadId: ThreadId;
@@ -79,6 +81,14 @@ export interface AgentKitSuggestionsRenderProps {
   onSelect: (suggestion: AgentSuggestion) => void;
 }
 
+export interface AgentKitWorkedForSummaryRenderProps {
+  label: string;
+  running?: boolean;
+  expandable: boolean;
+  open: boolean;
+  current?: ReactNode;
+}
+
 export interface AgentConnectionErrorRenderProps {
   error: AgentError;
   threadId: ThreadId;
@@ -153,6 +163,8 @@ export interface AgentKitSlots {
   composer?: ComponentType<{ threadId: ThreadId }>;
   queue?: ComponentType<AgentKitQueueRenderProps>;
   suggestions?: ComponentType<AgentKitSuggestionsRenderProps>;
+  /** Replaces the visible work-summary row while the shared disclosure owns its semantics. */
+  workedForSummary?: ComponentType<AgentKitWorkedForSummaryRenderProps>;
 }
 
 export interface AgentKitToolSource {
@@ -482,6 +494,7 @@ export interface AgentKitProviderProps {
   ) => Promise<AgentConnectionResponse>;
   /** Receives full renderer failures while the UI shows a safe fallback. */
   onRenderError?: (failure: AgentKitRenderFailure) => void;
+  resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   onClientEffect?: (effect: {
     type: "client.effect" | "client.deeplink";
     name: string;
@@ -511,6 +524,7 @@ export interface AgentKitContextValue {
   loadRunUsage?: AgentKitRunUsageLoader;
   onConnectionRequest?: AgentKitProviderProps["onConnectionRequest"];
   onRenderError?: (failure: AgentKitRenderFailure) => void;
+  resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   registerComposerFocus: (threadId: ThreadId, focus: () => void) => () => void;
   requestComposerFocus: (threadId: ThreadId) => void;
 }
@@ -531,6 +545,7 @@ export function AgentKitProvider({
   loadRunUsage,
   onConnectionRequest,
   onRenderError,
+  resolveMessageContentOrder,
   onClientEffect,
   children,
 }: AgentKitProviderProps) {
@@ -597,6 +612,7 @@ export function AgentKitProvider({
       loadRunUsage,
       onConnectionRequest,
       onRenderError,
+      resolveMessageContentOrder,
       registerComposerFocus,
       requestComposerFocus,
     }),
@@ -614,6 +630,7 @@ export function AgentKitProvider({
       loadRunUsage,
       onConnectionRequest,
       onRenderError,
+      resolveMessageContentOrder,
       registerComposerFocus,
       requestComposerFocus,
     ],

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

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

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

@@ -157,6 +157,83 @@ afterEach(async () => {
 });
 
 describe("AgentChat lifecycle", () => {
+  it("renders host-ordered text around an attached widget", async () => {
+    const threadId = "thread-host-content-order";
+    const message = {
+      id: "assistant-host-content-order",
+      role: "assistant" as const,
+      status: "complete" as const,
+      parts: [{ type: "text" as const, text: "Intro. Summary." }],
+    };
+    const widget = {
+      id: "chart-host-content-order",
+      kind: "test-chart",
+      data: {},
+    };
+    const thread = {
+      ...createAgentThreadState(threadId),
+      messages: [message],
+      widgets: { [widget.id]: widget },
+      widgetMessageIds: { [widget.id]: message.id },
+    };
+    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}
+        resolveMessageContentOrder={({ 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." },
+            },
+          ];
+        }}
+        registry={{
+          widgets: {
+            "test-chart": () => <span data-chart-result>Chart</span>,
+          },
+        }}
+        slots={{
+          text: ({ value }) => <span data-chat-part>{value.text}</span>,
+        }}
+      >
+        <AgentKitChat composer={false} />
+      </AgentKitProvider>,
+    );
+
+    const content = tree.container.querySelector(
+      `[data-message-id="${message.id}"] .agentkit-message-content`,
+    );
+    const renderedOrder = [...(content?.children ?? [])].map((element) =>
+      element.hasAttribute("data-chat-part")
+        ? element.textContent
+        : element.hasAttribute("data-chart-result")
+          ? "chart"
+          : "other",
+    );
+    expect(renderedOrder).toEqual(["Intro. ", "chart", "Summary."]);
+    await tree.unmount();
+  });
+
   it("keeps partial transcript updates out of live announcements", async () => {
     const threadId = "thread-accessible-transcript";
     const thread = {
@@ -1744,6 +1821,44 @@ describe("AgentChat lifecycle", () => {
         ".agentkit-activities-summary > .agentkit-summary-chevron",
       ),
     ).not.toBeNull();
+    await tree.render(
+      <AgentKitProvider
+        controller={observable.controller}
+        threadId={threadId}
+        registry={{
+          activities: {
+            reasoning: ({ value }) => (
+              <span data-protocol-reasoning>{value.label}</span>
+            ),
+          },
+        }}
+        slots={{
+          reasoning: ({ value, active, resetKey }) => (
+            <span data-thought={resetKey} data-active={active}>
+              {value.text}
+            </span>
+          ),
+          workedForSummary: ({ label, open, current }) => (
+            <span data-work-summary data-open={open}>
+              <span>{label}</span>
+              <span data-work-chevron aria-hidden="true">
+                ›
+              </span>
+              {current}
+            </span>
+          ),
+        }}
+      >
+        <AgentKitChat composer={false} />
+      </AgentKitProvider>,
+    );
+    expect(work.querySelector("[data-work-summary]")?.textContent).toContain(
+      "Searching documentation",
+    );
+    expect(work.querySelector("[data-work-chevron]")).not.toBeNull();
+    expect(
+      work.querySelector("[data-work-summary]")?.getAttribute("data-open"),
+    ).toBe("false");
     thread = reduceAgentEvent(thread, {
       ...base(8, 18),
       type: "message.completed",
@@ -1765,7 +1880,7 @@ 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 18s›");
     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/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"]);
+    }
+  });
+});