@agent-native/toolkit 0.226.0 → 0.226.1-nightly-20261107004051

package/src/app/agentkit/react/stop-button.tsx

@@ -9,10 +9,10 @@ import {
   useAgentThread,
 } from "./context.js";
 
-// Once a draft brings Send back beside Stop, Send keeps the primary fill and
-// Stop steps down to secondary, so the row never shows two identical
-// primaries.
-const STOP_BESIDE_SEND =
+// During voice chat, End voice chat holds the primary slot beside Stop (it
+// renders as the send-button slot), so Stop steps down to secondary and the
+// row never shows two identical primaries. A draft hides Stop instead.
+const STOP_BESIDE_PRIMARY =
   "[[data-agent-composer-slot=toolbar]:has([data-agent-composer-slot=send-button])_&]:bg-secondary [[data-agent-composer-slot=toolbar]:has([data-agent-composer-slot=send-button])_&]:text-secondary-foreground";
 
 // Stands in for the run key while a submission has no run id yet, so the
@@ -89,7 +89,7 @@ export function useAgentKitStopButton(options: {
           aria-busy={stopping || undefined}
           disabled={stopping}
           data-agent-composer-slot="stop-button"
-          className={`flex size-[var(--agentkit-composer-primary-control-size,2rem)] shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-[opacity,background-color,color] duration-150 hover:opacity-90 disabled:cursor-default disabled:opacity-35 ${STOP_BESIDE_SEND}`}
+          className={`flex size-[var(--agentkit-composer-primary-control-size,2rem)] shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-[opacity,background-color,color] duration-150 hover:opacity-90 disabled:cursor-default disabled:opacity-35 ${STOP_BESIDE_PRIMARY}`}
         >
           <IconPlayerStopFilled aria-hidden="true" className="size-4" />
         </button>

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

@@ -1257,49 +1257,6 @@
     grid-row: 2;
   }
 
-  /* A live finish: the row's old place above the reply closes while the row
-   fades in on the footer line. At rest the placeholder takes no space, so a
-   host that drops the animation never keeps a gap. 180ms matches
-   AGENT_WORK_HANDOFF_MS. */
-  .agentkit-work-handoff {
-    block-size: 0;
-    margin-block: 0;
-    overflow: hidden;
-    opacity: 0;
-    pointer-events: none;
-    animation: agentkit-work-handoff-leave 180ms ease-out both;
-  }
-
-  .agentkit-message-work-host
-    .agentkit-activities[data-handoff="enter"]
-    .agentkit-activities-row {
-    animation: agentkit-work-handoff-enter 180ms ease-out both;
-  }
-
-  @keyframes agentkit-work-handoff-leave {
-    from {
-      block-size: var(--agentkit-work-handoff-size);
-      margin-block: var(--agentkit-run-segment-gap, 0.75rem);
-      opacity: 1;
-    }
-  }
-
-  @keyframes agentkit-work-handoff-enter {
-    from {
-      opacity: 0;
-      translate: 0 -0.25rem;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .agentkit-work-handoff,
-    .agentkit-message-work-host
-      .agentkit-activities[data-handoff="enter"]
-      .agentkit-activities-row {
-      animation: none;
-    }
-  }
-
   /* The last icon's glyph, not its 24px hit area, ends on the text edge. */
   .agentkit-message-actions[data-role="assistant"] .agentkit-message-toolbar {
     grid-column: 2;
@@ -1465,17 +1422,25 @@
     pointer-events: auto;
   }
 
-  .agentkit-message .agentkit-message-actions[data-streaming="true"],
-  .agentkit-message:hover .agentkit-message-actions[data-streaming="true"],
+  .agentkit-message
+    .agentkit-message-actions[data-streaming="true"]:not(
+      :has(.agentkit-activities)
+    ),
+  .agentkit-message:hover
+    .agentkit-message-actions[data-streaming="true"]:not(
+      :has(.agentkit-activities)
+    ),
   .agentkit-message:focus-within
-    .agentkit-message-actions[data-streaming="true"] {
+    .agentkit-message-actions[data-streaming="true"]:not(
+      :has(.agentkit-activities)
+    ) {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
   }
 
-  /* A footer carrying finished work always shows and takes its space; only an
-   older reply's controls wait for hover or focus. */
+  /* A footer carrying its reply's work always shows and takes its space, live
+   or finished; only an older reply's controls wait for hover or focus. */
   .agentkit-message-actions[data-role="assistant"]:has(.agentkit-activities) {
     position: static;
     opacity: 1;
@@ -1483,6 +1448,12 @@
     pointer-events: auto;
   }
 
+  .agentkit-message-actions[data-role="assistant"][data-streaming="true"]
+    .agentkit-message-toolbar {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
   .agentkit-message-actions[data-role="assistant"]:has(
       .agentkit-activities
     ):not([data-latest="true"], [data-expanded="true"])

package/src/app/agentkit/react/work-handoff.spec.tsx

@@ -8,7 +8,7 @@ import {
   type AgentThreadState,
 } from "@agent-native/agentkit/client";
 import type { AgentEvent } from "@agent-native/agentkit/protocol";
-import { act } from "react";
+import { act, useEffect } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -150,68 +150,43 @@ function stubReducedMotion(reduce: boolean) {
 
 const work = () =>
   container.querySelector<HTMLElement>(".agentkit-activities")!;
-const placeholder = () =>
-  container.querySelector<HTMLElement>('[data-agentkit-work-handoff="leave"]');
-
-describe("Worked for handoff to the reply footer", () => {
-  beforeEach(() => {
-    stubReducedMotion(false);
-    // happy-dom lays nothing out; the handoff carries the row's height over.
-    vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(40);
-  });
+const follows = (later: Node, earlier: Node) =>
+  Boolean(
+    earlier.compareDocumentPosition(later) & Node.DOCUMENT_POSITION_FOLLOWING,
+  );
+
+describe("Worked for row moving into the reply footer", () => {
+  beforeEach(() => stubReducedMotion(false));
 
   afterEach(async () => {
     await act(async () => root.unmount());
     container.remove();
     vi.unstubAllGlobals();
-    vi.restoreAllMocks();
   });
 
-  it("closes the row's old space while it fades in on a live finish", async () => {
+  it("lets the streaming reply be the focus, then puts the row in its footer", async () => {
     const live = reduce(liveEvents);
     const observable = observableController(snapshotOf(live, 0));
     await render(observable.controller);
-    expect(work().closest(".agentkit-message-actions")).toBeNull();
-    // Opened to watch the live work.
-    await act(async () =>
-      work()
-        .querySelector<HTMLButtonElement>(".agentkit-disclosure-summary")!
-        .click(),
-    );
-    expect(work().dataset.open).toBe("true");
+    const reply = () => container.querySelector('[data-message-id="reply"]')!;
+    // oracle-change: the reply's text is the newest output, so no work row shows while it streams, and the finish no longer animates a placeholder out of the space above the reply.
+    expect(container.querySelector(".agentkit-activities")).toBeNull();
 
     await act(async () =>
       observable.update(snapshotOf(reduce(finishEvents, live), 1)),
     );
     await flush();
 
-    const settled = work();
-    expect(settled.closest(".agentkit-message-actions")).not.toBeNull();
-    expect(settled.dataset.handoff).toBe("enter");
-    // It closes as it moves, so its steps never open below the reply.
-    expect(settled.dataset.open).toBe("false");
-    const leaving = placeholder();
-    expect(leaving).not.toBeNull();
-    expect(leaving!.getAttribute("aria-hidden")).toBe("true");
+    expect(container.querySelectorAll(".agentkit-activities")).toHaveLength(1);
     expect(
-      leaving!.style.getPropertyValue("--agentkit-work-handoff-size"),
-    ).toBe("40px");
-    expect(leaving!.textContent).toContain("Worked for");
-    // It holds the row's old place, above the reply.
-    const reply = container.querySelector('[data-message-id="reply"]')!;
-    expect(
-      leaving!.compareDocumentPosition(reply) &
-        Node.DOCUMENT_POSITION_FOLLOWING,
-    ).toBeTruthy();
-
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 300));
-    });
-    expect(placeholder()).toBeNull();
-    expect(work().dataset.handoff).toBeUndefined();
+      reply().contains(work().closest(".agentkit-message-work-host")),
+    ).toBe(true);
+    expect(work().textContent).toContain("Worked for");
+    // Nothing is left holding a place above the reply.
+    expect(reply().previousElementSibling).toBeNull();
   });
 
-  it("hands off a row it saw running when the reply lands whole", async () => {
+  it("moves a row it saw running when the reply lands whole", async () => {
     const running = reduce(liveEvents.slice(0, 2));
     const observable = observableController(snapshotOf(running, 0));
     await render(observable.controller);
@@ -235,33 +210,17 @@ describe("Worked for handoff to the reply footer", () => {
       ),
     );
     await flush();
+    expect(container.querySelectorAll(".agentkit-activities")).toHaveLength(1);
     expect(work().closest(".agentkit-message-actions")).not.toBeNull();
-    expect(work().dataset.handoff).toBe("enter");
-    expect(placeholder()).not.toBeNull();
   });
 
-  it("does not animate a thread that loads already finished", async () => {
+  it("renders a thread that loads finished with its row in the footer", async () => {
     const finished = reduce(finishEvents, reduce(liveEvents));
     const observable = observableController(snapshotOf(finished, 0));
     await render(observable.controller);
     await flush();
+    expect(container.querySelectorAll(".agentkit-activities")).toHaveLength(1);
     expect(work().closest(".agentkit-message-actions")).not.toBeNull();
-    expect(work().dataset.handoff).toBeUndefined();
-    expect(placeholder()).toBeNull();
-  });
-
-  it("moves at once with reduced motion", async () => {
-    stubReducedMotion(true);
-    const live = reduce(liveEvents);
-    const observable = observableController(snapshotOf(live, 0));
-    await render(observable.controller);
-    await act(async () =>
-      observable.update(snapshotOf(reduce(finishEvents, live), 1)),
-    );
-    await flush();
-    expect(work().closest(".agentkit-message-actions")).not.toBeNull();
-    expect(work().dataset.handoff).toBeUndefined();
-    expect(placeholder()).toBeNull();
   });
 });
 
@@ -340,20 +299,153 @@ describe("a reply that narrates between steps", () => {
     vi.unstubAllGlobals();
   });
 
-  it("keeps one live row above the reply while the run works", async () => {
+  const textOf = (text: string): Node => {
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      if (node.textContent?.includes(text)) return node;
+    }
+    throw new Error(`No text "${text}" on screen`);
+  };
+
+  it("keeps a saved reply's leading reasoning in the live row", async () => {
+    const working = reduce([
+      event(1, { type: "run.started" }),
+      event(2, {
+        type: "message.delta",
+        messageId: "reply",
+        role: "assistant",
+        text: "Looking it up.",
+      }),
+      search(3, "first", "running"),
+    ]);
+    const saved: AgentThreadState = {
+      ...working,
+      messages: [
+        {
+          id: "reply",
+          role: "assistant",
+          status: "complete",
+          parts: [
+            { type: "reasoning", text: "Weighing the two bikes." },
+            { type: "text", text: "Looking it up." },
+          ],
+        },
+      ],
+    };
+    await render(observableController(snapshotOf(saved, 0)).controller);
+    await flush();
+
+    expect(rows()).toHaveLength(1);
+    expect(rows()[0]!.dataset.running).toBe("true");
+    expect(rows()[0]!.textContent).toContain("Weighing the two bikes.");
+  });
+
+  it("shows a live row for a step whose only output is a result card", async () => {
+    function SearchResult({ value }: { value: { id: string } }) {
+      return <div data-search-result={value.id}>Results</div>;
+    }
+    const carded = reduce(narrated.slice(0, 5));
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    await act(async () => {
+      root.render(
+        <AgentKitRoot
+          controller={observableController(snapshotOf(carded, 0)).controller}
+          threadId={threadId}
+          load="manual"
+          registry={{ tools: { "web-search": SearchResult } }}
+        >
+          <AgentKitChat composer={false} />
+        </AgentKitRoot>,
+      );
+      await Promise.resolve();
+    });
+    await flush();
+
+    const reply = container.querySelector('[data-message-id="reply"]')!;
+    expect(
+      follows(reply, container.querySelector('[data-search-result="first"]')!),
+    ).toBe(true);
+    expect(rows()).toHaveLength(1);
+    expect(rows()[0]!.dataset.running).toBe("true");
+    expect(follows(rows()[0]!, textOf("Looking"))).toBe(true);
+  });
+
+  it("keeps a row opened to watch the steps open across narration", async () => {
+    const searching = reduce(narrated.slice(0, 5));
+    const observable = observableController(snapshotOf(searching, 0));
+    await render(observable.controller);
+    await flush();
+    const visible = () => rows().filter((row) => !row.hidden);
+    expect(visible()).toHaveLength(1);
+    await act(async () =>
+      visible()[0]!
+        .querySelector<HTMLButtonElement>(".agentkit-disclosure-summary")!
+        .click(),
+    );
+    expect(visible()[0]!.dataset.open).toBe("true");
+
+    const narrating = reduce(narrated.slice(5, 6), searching);
+    await act(async () => observable.update(snapshotOf(narrating, 1)));
+    await flush();
+    expect(visible()).toHaveLength(0);
+
+    await act(async () =>
+      observable.update(snapshotOf(reduce(narrated.slice(6), narrating), 2)),
+    );
+    await flush();
+    expect(visible()).toHaveLength(1);
+    expect(visible()[0]!.dataset.open).toBe("true");
+  });
+
+  it("keeps a row opened to watch the steps open when the run finishes", async () => {
     const live = reduce(narrated);
     const observable = observableController(snapshotOf(live, 0));
     await render(observable.controller);
     await flush();
+    await act(async () =>
+      rows()[0]!
+        .querySelector<HTMLButtonElement>(".agentkit-disclosure-summary")!
+        .click(),
+    );
+    expect(rows()[0]!.dataset.open).toBe("true");
+
+    await act(async () =>
+      observable.update(snapshotOf(reduce(answered, live), 1)),
+    );
+    await flush();
 
     expect(rows()).toHaveLength(1);
-    expect(rows()[0]!.dataset.running).toBe("true");
+    expect(rows()[0]!.closest(".agentkit-message-actions")).not.toBeNull();
+    expect(rows()[0]!.textContent).toContain("Worked for");
+    expect(rows()[0]!.dataset.open).toBe("true");
+  });
+
+  it("shows no row while narration after a step streams", async () => {
+    const observable = observableController(
+      snapshotOf(reduce(narrated.slice(0, 6)), 0),
+    );
+    await render(observable.controller);
+    await flush();
+
+    expect(rows()).toHaveLength(0);
+    expect(textOf("Checking")).toBeTruthy();
+  });
+
+  it("keeps one live row below the reply's latest text while the run works", async () => {
+    const live = reduce(narrated);
+    const observable = observableController(snapshotOf(live, 0));
+    await render(observable.controller);
+    await flush();
+
+    expect(rows()).toHaveLength(1);
+    const row = rows()[0]!;
+    expect(row.dataset.running).toBe("true");
     expect(container.textContent).not.toContain("Worked for");
+    expect(follows(row, textOf("Checking"))).toBe(true);
     const reply = container.querySelector('[data-message-id="reply"]')!;
-    expect(
-      rows()[0]!.compareDocumentPosition(reply) &
-        Node.DOCUMENT_POSITION_FOLLOWING,
-    ).toBeTruthy();
+    expect(follows(row, reply)).toBe(true);
 
     await act(async () =>
       observable.update(snapshotOf(reduce(answered, live), 1)),
@@ -362,6 +454,47 @@ describe("a reply that narrates between steps", () => {
 
     expect(rows()).toHaveLength(1);
     expect(rows()[0]!.closest(".agentkit-message-actions")).not.toBeNull();
+    expect(follows(rows()[0]!, textOf("Buy the Trek."))).toBe(true);
     expect(container.textContent?.match(/Worked for/g)).toHaveLength(1);
   });
+
+  it("keeps a step's result card above the reply through the finish", async () => {
+    const mounts = vi.fn();
+    function SearchResult({ value }: { value: { id: string } }) {
+      useEffect(() => mounts(value.id), [value.id]);
+      return <div data-search-result={value.id}>Results</div>;
+    }
+    const live = reduce(narrated);
+    const observable = observableController(snapshotOf(live, 0));
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    await act(async () => {
+      root.render(
+        <AgentKitRoot
+          controller={observable.controller}
+          threadId={threadId}
+          load="manual"
+          registry={{ tools: { "web-search": SearchResult } }}
+        >
+          <AgentKitChat composer={false} />
+        </AgentKitRoot>,
+      );
+      await Promise.resolve();
+    });
+    await flush();
+
+    const reply = container.querySelector('[data-message-id="reply"]')!;
+    const card = () => container.querySelector('[data-search-result="first"]')!;
+    expect(follows(reply, card())).toBe(true);
+    expect(follows(rows()[0]!, reply)).toBe(true);
+
+    await act(async () =>
+      observable.update(snapshotOf(reduce(answered, live), 1)),
+    );
+    await flush();
+
+    expect(follows(reply, card())).toBe(true);
+    expect(mounts.mock.calls.filter(([id]) => id === "first")).toHaveLength(1);
+  });
 });

package/src/app/auth/AuthPage.interaction.spec.tsx

@@ -74,19 +74,33 @@ describe("AuthPage interactions", () => {
             trackingApp="design"
             googleOnly
             showGoogle
+            signupLegalNotice={{
+              termsUrl: "https://example.com/terms",
+              privacyUrl: "https://example.com/privacy",
+            }}
             identitySsoEnabled={false}
           />,
         );
       });
       expect(
         container.textContent?.includes(
-          "Your Design signup also creates a Builder.io account",
+          "You also create a Builder.io account and agree to Builder’s",
         ),
       ).toBe(variant === "automatic");
       expect(
         container.querySelector<HTMLButtonElement>("#google-btn")?.disabled,
       ).toBe(false);
+      const footer = container.querySelector(".legal-note");
       if (variant === "automatic") {
+        expect(footer?.textContent).not.toContain(
+          "By signing up, you accept our",
+        );
+        expect(
+          container
+            .querySelector("#google-btn")
+            ?.compareDocumentPosition(footer ?? container),
+        ).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+        expect(footer?.querySelectorAll("a").length).toBe(2);
         expect(
           container.querySelector(
             'a[href="https://www.builder.io/legal/terms"]',
@@ -97,6 +111,8 @@ describe("AuthPage interactions", () => {
             'a[href="https://www.builder.io/legal/privacy"]',
           ),
         ).not.toBeNull();
+      } else {
+        expect(footer).toBeNull();
       }
     },
   );

package/src/app/auth/AuthPage.tsx

@@ -304,6 +304,7 @@ function trackAuth(
     );
     const legacyProperties = {
       app,
+      hostname: window.location.hostname,
       ...(app === "design" ? builderSignupTelemetry : {}),
       ...properties,
     };
@@ -2432,9 +2433,10 @@ export function AuthPage(props: AuthPageProps) {
     </div>
   ) : null;
   const builderLegalNote =
+    view !== "login" &&
     builderSignup?.status === "assigned" &&
     builderSignup.variant === "automatic" ? (
-      <p className="legal-note">
+      <span>
         {t("builderSignupDisclosure")}{" "}
         <a
           href="https://www.builder.io/legal/terms"
@@ -2452,7 +2454,7 @@ export function AuthPage(props: AuthPageProps) {
           {t("legalPrivacy")}
         </a>
         {t("legalSuffix")}
-      </p>
+      </span>
     ) : null;
   const legalNote = signupLegalNotice ? (
     <p className="legal-note">
@@ -2481,7 +2483,10 @@ export function AuthPage(props: AuthPageProps) {
       <span data-i18n="legalSuffix">
         {signupLegalNotice.suffix ?? t("legalSuffix")}
       </span>
+      {builderLegalNote && <> {builderLegalNote}</>}
     </p>
+  ) : builderLegalNote ? (
+    <p className="legal-note">{builderLegalNote}</p>
   ) : null;
   const signupForm = (
     <AuthForm
@@ -2684,7 +2689,6 @@ export function AuthPage(props: AuthPageProps) {
             {t("googleNotConfigured")}
           </p>
         ) : null}
-        {view !== "login" && builderLegalNote}
         {showGoogle ? (
           <div className="google-signin" id="google-signin">
             <button
@@ -2847,7 +2851,11 @@ export function AuthPage(props: AuthPageProps) {
             </button>
           </div>
         ) : null}
-        {!googleOnly ? signupForm : null}
+        {!googleOnly ? (
+          signupForm
+        ) : builderLegalNote ? (
+          <p className="legal-note">{builderLegalNote}</p>
+        ) : null}
         <div
           id="verification-step"
           className={`form verification-step ${view === "verification" ? "active" : ""}`}

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -6851,7 +6851,7 @@ function AgentKitRunFailure({
             )
           }
         />
-        {continueFailed ? (
+        {continueFailed && !superseded ? (
           <ComposerNotice
             role="alert"
             noticeId="continue-failed"
@@ -6912,8 +6912,12 @@ function AgentKitRunFailure({
             : undefined
         }
         onContinue={continueStoppedRun}
+        // A newer run carries the turn now, so a refused Continue is stale and
+        // would contradict the Stop button that run shows.
         continueError={
-          continueFailed ? t("agentChat.recovery.continueUnavailable") : null
+          continueFailed && !superseded
+            ? t("agentChat.recovery.continueUnavailable")
+            : null
         }
         onRetry={() => void retryFailedTurn()}
         onRetryWithoutAttachments={retryWithoutAttachments}

package/src/app/integrations/IntegrationDetailPage.spec.tsx

@@ -522,6 +522,36 @@ describe("IntegrationDetailPage", () => {
     expect(row?.querySelector("button")?.textContent).toBe("Remove");
   });
 
+  it("opens a custom connected server by its slug, with Reconnect and Remove", async () => {
+    // The tile links a custom integration (one added by URL, with no catalog entry) to a
+    // slug of its name; this is that slug resolving back to the server, so the page has
+    // the facts and the actions a built-in's page has.
+    servers([
+      {
+        id: "custom-1",
+        scope: "user",
+        name: "Internal Docs",
+        url: "https://mcp.example.com/mcp",
+        authMode: "headers",
+        createdAt: 1,
+        mergedId: "user:custom-1",
+        status: { state: "error", error: "the server refused the token" },
+      },
+    ]);
+    await render("internal-docs");
+    const detail = container.querySelector("[data-connected-server-detail]");
+    expect(detail).not.toBeNull();
+    expect(detail?.textContent).toContain("Internal Docs");
+    expect(detail?.textContent).toContain("https://mcp.example.com/mcp");
+    expect(detail?.textContent).toContain("Connection error");
+    expect(detail?.textContent).toContain("the server refused the token");
+    const labels = Array.from(detail?.querySelectorAll("button") ?? []).map(
+      (button) => button.textContent?.trim(),
+    );
+    expect(labels).toContain("Reconnect");
+    expect(labels).toContain("Remove");
+  });
+
   it("marks a beta integration", async () => {
     await render("grafana");
     expect(rowText("status")).toContain("Beta");