@agent-native/toolkit 0.201.1 → 0.202.0-nightly-20261006033736

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

@@ -213,6 +213,11 @@ export interface AgentKitLabels {
   durationSecondShort: string;
   agents: string;
   tasks: string;
+  toolInput?: string;
+  toolResult?: string;
+  activityValueIdentifierHidden?: string;
+  activityValueOmitted?: string;
+  activityValueCircular?: string;
   composerLabel: string;
   composerPlaceholder: string;
   queue: string;
@@ -309,6 +314,11 @@ export const defaultAgentKitLabels: AgentKitLabels = {
   durationSecondShort: "s",
   agents: "Agent collaboration",
   tasks: "Agent tasks",
+  toolInput: "Input",
+  toolResult: "Result",
+  activityValueIdentifierHidden: "[Identifier hidden]",
+  activityValueOmitted: "[Content omitted]",
+  activityValueCircular: "[Circular reference]",
   composerLabel: "Message agent",
   composerPlaceholder: "Ask the agent to explore, build, or explain…",
   queue: "Queued messages",

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

@@ -9,7 +9,10 @@ import {
 } from "@agent-native/agentkit/client";
 import { createAgentKitHttpHandler } from "@agent-native/agentkit/http";
 import type {
+  AgentActivity,
   AgentEvent,
+  AgentObjectReference,
+  AgentTask,
   AgentToolCall,
   AgentTransport,
 } from "@agent-native/agentkit/protocol";
@@ -32,6 +35,7 @@ import {
   AgentConnectionRequestCard,
   AgentKitChat,
   AgentMessageActions,
+  AgentTaskGroup,
   formatAgentKitDuration,
 } from "./components.js";
 import {
@@ -2249,7 +2253,7 @@ describe("AgentChat lifecycle", () => {
     ).find(
       (row) =>
         row.querySelector(".agentkit-activity-label")?.textContent ===
-        "update-slide",
+        "Update Slide",
     );
     expect(failedToolRow?.textContent).not.toContain(
       "slide_content_edit_failed",
@@ -2699,6 +2703,155 @@ describe("AgentChat lifecycle", () => {
     await tree.unmount();
   });
 
+  it("preserves distinct agent sources and hides UUID-only labels", async () => {
+    const threadId = "thread-agent-sources";
+    const runId = "run-agent-sources";
+    const internalId = "550e8400-e29b-41d4-a716-446655440000";
+    const source: AgentObjectReference = {
+      id: "source-agent",
+      kind: "agent",
+      label: "Source Agent",
+    };
+    const activities: AgentActivity[] = [
+      ...["activity-1", "activity-2"].map((id) => ({
+        id,
+        kind: "read",
+        label: "Read files",
+        status: "completed" as const,
+        agentId: "actor-agent",
+        runId,
+        source,
+      })),
+      {
+        id: "activity-uuid-label",
+        kind: internalId,
+        label: internalId,
+        status: "completed",
+        runId,
+        object: { id: internalId, kind: internalId, label: internalId },
+      },
+    ];
+    const interaction = {
+      id: "interaction-source",
+      kind: internalId,
+      agentId: "actor-agent",
+      targetAgentId: "target-agent",
+      source,
+    } as const;
+    const task: AgentTask = {
+      id: "task-source",
+      title: "Review report",
+      status: "completed",
+      assignedAgentId: "actor-agent",
+      runId,
+      source,
+    };
+    const events: AgentEvent[] = [
+      ...activities.map(
+        (activity, index): AgentEvent => ({
+          id: `event-${activity.id}`,
+          threadId,
+          runId,
+          sequence: index + 1,
+          occurredAt: `2026-10-01T00:00:0${index + 1}.000Z`,
+          type: "activity.completed",
+          activity,
+        }),
+      ),
+      {
+        id: "event-interaction-source",
+        threadId,
+        runId,
+        sequence: 4,
+        occurredAt: "2026-10-01T00:00:04.000Z",
+        type: "agent.interaction",
+        interaction,
+      },
+      {
+        id: "event-task-source",
+        threadId,
+        runId,
+        sequence: 5,
+        occurredAt: "2026-10-01T00:00:05.000Z",
+        type: "task.created",
+        task,
+      },
+    ];
+    const thread = {
+      ...createAgentThreadState(threadId),
+      events,
+      activities: Object.fromEntries(
+        activities.map((activity) => [activity.id, activity]),
+      ),
+      tasks: { [task.id]: task },
+      runs: {
+        [runId]: {
+          id: runId,
+          status: "completed" as const,
+          lastSequence: 5,
+          startedAt: "2026-10-01T00:00:00.000Z",
+          completedAt: "2026-10-01T00:00:06.000Z",
+        },
+      },
+    };
+    const { controller } = observableController({
+      connection: "connected",
+      capabilities: {},
+      capabilitiesStatus: "ready",
+      threads: { [threadId]: thread },
+      revision: 0,
+    });
+    const tree = mount();
+
+    await tree.render(
+      <AgentKitProvider controller={controller} threadId={threadId}>
+        <AgentActivityGroup runId={runId} />
+        <AgentCollaborationFeed runId={runId} />
+        <AgentTaskGroup runId={runId} />
+      </AgentKitProvider>,
+    );
+
+    const cluster = tree.container.querySelector(".agentkit-activity-cluster");
+    expect(
+      cluster?.querySelector("summary .agentkit-agent-name")?.textContent,
+    ).toBe("Assistant");
+    expect(
+      cluster?.querySelector("summary .agentkit-object-label")?.textContent,
+    ).toBe("Source Agent");
+    expect(
+      cluster?.querySelector(
+        ".agentkit-activity-cluster-items .agentkit-object-label",
+      )?.textContent,
+    ).toBe("Source Agent");
+
+    const interactionRow = tree.container.querySelector(
+      ".agentkit-agent-interaction",
+    );
+    expect(
+      interactionRow?.querySelector(".agentkit-agent-interaction-label")
+        ?.textContent,
+    ).toBe("Working");
+    expect(
+      interactionRow?.querySelector(".agentkit-object-label")?.textContent,
+    ).toBe("Source Agent");
+
+    expect(
+      tree.container.querySelector(".agentkit-task-row .agentkit-object-label")
+        ?.textContent,
+    ).toBe("Source Agent");
+    const uuidActivity = Array.from(
+      tree.container.querySelectorAll<HTMLElement>(".agentkit-activity-item"),
+    ).find((item) => item.dataset.activityKind === internalId);
+    expect(
+      uuidActivity?.querySelector(".agentkit-activity-label")?.textContent,
+    ).toBe("Working");
+    expect(
+      uuidActivity?.querySelector(".agentkit-object-label")?.textContent,
+    ).toBe("Assistant");
+    expect(tree.container.textContent).not.toContain(internalId);
+    await tree.unmount();
+  });
+
   it("keeps generic tool results in collapsed history but preserves rich surfaces", async () => {
     const threadId = "thread-collapsed-tool-results";
     const runId = "run-collapsed-tool-results";
@@ -2855,6 +3008,339 @@ describe("AgentChat lifecycle", () => {
     ).toBe("The file could not be saved.");
   });
 
+  it("sanitizes and bounds expanded tool details for keyboard access", async () => {
+    const threadId = "thread-bounded-tool-details";
+    const runId = "run-bounded-tool-details";
+    const internalId = "550e8400-e29b-41d4-a716-446655440000";
+    const sparseOutput = new Array(100_000);
+    sparseOutput[99_999] = "beyond preview";
+    const tool: AgentToolCall = {
+      id: "tool-read-file",
+      name: "read-file",
+      status: "completed",
+      input: {
+        documentId: internalId,
+        resource: `document_${internalId}_revision`,
+        empty: "",
+        whitespace: "  ",
+      },
+      output: {
+        documentId: internalId,
+        resource: `document_${internalId}_revision`,
+        entries: sparseOutput,
+      },
+    };
+    const thread = reduceAgentEvent(createAgentThreadState(threadId), {
+      id: "event-read-file",
+      threadId,
+      runId,
+      sequence: 1,
+      occurredAt: "2026-10-01T00:00:00.000Z",
+      type: "tool.updated",
+      toolCall: tool,
+    });
+    const { controller } = observableController({
+      connection: "connected",
+      capabilities: {},
+      capabilitiesStatus: "ready",
+      threads: { [threadId]: thread },
+      revision: 0,
+    });
+    const tree = mount();
+    await tree.render(
+      <AgentKitProvider controller={controller} threadId={threadId}>
+        <AgentActivityGroup runId={runId} />
+      </AgentKitProvider>,
+    );
+
+    const work = tree.container.querySelector<HTMLDetailsElement>(
+      ".agentkit-activities",
+    );
+    await act(async () => work?.querySelector("summary")?.click());
+    const row = Array.from(
+      work?.querySelectorAll<HTMLElement>(".agentkit-activity-item") ?? [],
+    ).find(
+      (item) =>
+        item.querySelector(".agentkit-activity-label")?.textContent ===
+        "Read File",
+    );
+    expect(row?.textContent).not.toContain(internalId);
+    await act(async () => row?.querySelector("button")?.click());
+
+    const details = Array.from(
+      row?.querySelectorAll<HTMLPreElement>(
+        ".agentkit-activity-summary-value",
+      ) ?? [],
+    );
+    expect(details.map((detail) => detail.getAttribute("aria-label"))).toEqual([
+      "Input",
+      "Result",
+    ]);
+    expect(
+      details.every((detail) => detail.getAttribute("role") === "region"),
+    ).toBe(true);
+    expect(details.every((detail) => detail.tabIndex === 0)).toBe(true);
+    expect(details[0]?.textContent).toContain("[Identifier hidden]");
+    expect(details[1]?.textContent).toContain("[Identifier hidden]");
+    expect(details[0]?.textContent).toContain(
+      '"resource": "document__revision"',
+    );
+    expect(details[0]?.textContent).toContain('"empty": ""');
+    expect(details[0]?.textContent).toContain('"whitespace": "  "');
+    expect(details[1]?.textContent).toContain("[Content omitted]");
+    expect(details[1]?.textContent).not.toContain(internalId);
+    expect(details[1]?.textContent).not.toContain("beyond preview");
+    await tree.unmount();
+  });
+
+  it("keeps the omission marker visible when formatted tool output expands", async () => {
+    const threadId = "thread-expanded-tool-output";
+    const runId = "run-expanded-tool-output";
+    const output = Object.fromEntries(
+      Array.from({ length: 79 }, (_, index) => [
+        `field-${index}-${"x".repeat(20)}`,
+        "",
+      ]),
+    );
+    const tool: AgentToolCall = {
+      id: "tool-large-output",
+      name: "read-records",
+      input: { query: "all records" },
+      output,
+      status: "completed",
+    };
+    const thread = {
+      ...createAgentThreadState(threadId),
+      tools: { [tool.id]: tool },
+      events: [
+        {
+          id: "event-large-output",
+          threadId,
+          runId,
+          sequence: 1,
+          occurredAt: "2026-10-01T00:00:01.000Z",
+          type: "tool.started" as const,
+          toolCall: { ...tool, status: "running" as const },
+        },
+      ],
+      runs: {
+        [runId]: {
+          id: runId,
+          status: "completed" as const,
+          lastSequence: 1,
+          startedAt: "2026-10-01T00:00:00.000Z",
+          completedAt: "2026-10-01T00:00:02.000Z",
+        },
+      },
+    };
+    const { controller } = observableController({
+      connection: "connected",
+      capabilities: {},
+      capabilitiesStatus: "ready",
+      threads: { [threadId]: thread },
+      revision: 0,
+    });
+    const tree = mount();
+    await tree.render(
+      <AgentKitProvider controller={controller} threadId={threadId}>
+        <AgentActivityGroup runId={runId} />
+      </AgentKitProvider>,
+    );
+
+    const work = tree.container.querySelector<HTMLDetailsElement>(
+      ".agentkit-activities",
+    );
+    await act(async () => work?.querySelector("summary")?.click());
+    const row = tree.container.querySelector<HTMLElement>(
+      ".agentkit-activity-item",
+    );
+    await act(async () => row?.querySelector("button")?.click());
+    const result = row?.querySelector<HTMLPreElement>('[aria-label="Result"]');
+    expect(result?.textContent?.length).toBeLessThanOrEqual(2_000);
+    expect(result?.textContent).toContain("[Content omitted]");
+    expect(result?.textContent).toMatch(/…\n\[Content omitted\]$/);
+    await tree.unmount();
+  });
+
+  it("keeps distinct agent sources visible and sanitizes fallback labels", async () => {
+    const threadId = "thread-agent-source-labels";
+    const runId = "run-agent-source-labels";
+    const internalId = "550e8400-e29b-41d4-a716-446655440000";
+    const source = {
+      id: "external-agent",
+      kind: "agent",
+      label: "Different source agent",
+    };
+    const repeatedActivity = (id: string): AgentActivity => ({
+      id,
+      kind: "read",
+      label: "Reading a file",
+      status: "completed",
+      agentId: "displayed-agent",
+      source,
+    });
+    const sourceEvents: AgentEvent[] = ["source-a", "source-b"].map(
+      (id, index) => ({
+        id: `event-${id}`,
+        threadId,
+        runId,
+        sequence: index + 1,
+        occurredAt: `2026-10-01T00:00:0${index + 1}.000Z`,
+        type: "activity.completed",
+        activity: repeatedActivity(id),
+      }),
+    );
+    const privateLabelActivity: AgentActivity = {
+      id: "activity-private-label",
+      kind: internalId,
+      label: internalId,
+      status: "running",
+      agentId: "displayed-agent",
+      object: { id: "private-object", kind: internalId, label: internalId },
+    };
+    const events: AgentEvent[] = [
+      ...sourceEvents,
+      {
+        id: "event-private-label",
+        threadId,
+        runId,
+        sequence: 3,
+        occurredAt: "2026-10-01T00:00:03.000Z",
+        type: "activity.started",
+        activity: privateLabelActivity,
+      },
+    ];
+    const thread = {
+      ...createAgentThreadState(threadId),
+      events,
+      activities: {
+        [privateLabelActivity.id]: privateLabelActivity,
+      },
+      runs: {
+        [runId]: {
+          id: runId,
+          status: "running" as const,
+          lastSequence: 3,
+          startedAt: "2026-10-01T00:00:00.000Z",
+        },
+      },
+      activeRunIds: [runId],
+    };
+    const { controller } = observableController({
+      connection: "connected",
+      capabilities: {},
+      capabilitiesStatus: "ready",
+      threads: { [threadId]: thread },
+      revision: 0,
+    });
+    const tree = mount();
+    await tree.render(
+      <AgentKitProvider controller={controller} threadId={threadId}>
+        <AgentActivityGroup runId={runId} />
+      </AgentKitProvider>,
+    );
+
+    const work = tree.container.querySelector<HTMLDetailsElement>(
+      ".agentkit-activities",
+    );
+    expect(
+      work?.querySelectorAll(
+        ".agentkit-activity-cluster summary .agentkit-object-label",
+      ),
+    ).toHaveLength(1);
+    expect(
+      work?.querySelector(
+        ".agentkit-activity-cluster summary .agentkit-object-label",
+      )?.textContent,
+    ).toBe("Different source agent");
+    const privateRow = Array.from(
+      work?.querySelectorAll<HTMLElement>(".agentkit-activity-item") ?? [],
+    ).find((row) => row.dataset.activityKind === internalId);
+    expect(
+      privateRow?.querySelector(".agentkit-activity-label")?.textContent,
+    ).toBe("Working");
+    expect(
+      privateRow?.querySelector(".agentkit-object-label")?.textContent,
+    ).toBe("Assistant");
+    expect(work?.textContent).not.toContain(internalId);
+    await tree.unmount();
+  });
+
+  it("keeps the omission marker after pretty-print expansion exceeds its budget", async () => {
+    const threadId = "thread-formatted-tool-budget";
+    const runId = "run-formatted-tool-budget";
+    const formattedOutput = Object.fromEntries(
+      Array.from({ length: 38 }, (_, index) => [
+        `property_${String(index).padStart(2, "0")}_long_name_for_serialization`,
+        "0123456789",
+      ]),
+    );
+    const tool: AgentToolCall = {
+      id: "tool-formatted-output",
+      name: "read-file",
+      input: { path: "guide.md" },
+      output: formattedOutput,
+      status: "completed",
+    };
+    const thread = {
+      ...createAgentThreadState(threadId),
+      tools: { [tool.id]: tool },
+      events: [
+        {
+          id: "event-formatted-output",
+          threadId,
+          runId,
+          sequence: 1,
+          occurredAt: "2026-10-01T00:00:00.000Z",
+          type: "tool.updated" as const,
+          toolCall: tool,
+        },
+      ],
+      runs: {
+        [runId]: {
+          id: runId,
+          status: "completed" as const,
+          lastSequence: 1,
+          startedAt: "2026-10-01T00:00:00.000Z",
+          completedAt: "2026-10-01T00:00:01.000Z",
+        },
+      },
+    };
+    const { controller } = observableController({
+      connection: "connected",
+      capabilities: {},
+      capabilitiesStatus: "ready",
+      threads: { [threadId]: thread },
+      revision: 0,
+    });
+    const tree = mount();
+    await tree.render(
+      <AgentKitProvider controller={controller} threadId={threadId}>
+        <AgentActivityGroup runId={runId} />
+      </AgentKitProvider>,
+    );
+
+    const work = tree.container.querySelector<HTMLDetailsElement>(
+      ".agentkit-activities",
+    );
+    await act(async () => work?.querySelector("summary")?.click());
+    const row = Array.from(
+      tree.container.querySelectorAll<HTMLElement>(".agentkit-activity-item"),
+    ).find(
+      (item) =>
+        item.querySelector(".agentkit-activity-label")?.textContent ===
+        "Read File",
+    );
+    await act(async () => row?.querySelector("button")?.click());
+    const result = row?.querySelectorAll<HTMLPreElement>(
+      ".agentkit-activity-summary-value",
+    )[1]?.textContent;
+    expect(result).toBeDefined();
+    expect(result!.length).toBeLessThanOrEqual(2_000);
+    expect(result).toMatch(/\[Content omitted\]$/);
+    await tree.unmount();
+  });
+
   it("resets disclosure state when switching threads with reused run ids", async () => {
     const threads = Object.fromEntries(
       ["thread-a", "thread-b"].map((threadId) => [

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

@@ -99,7 +99,10 @@
   border-color: var(--agentkit-composer-border) !important;
   border-radius: var(--agentkit-radius);
   color: var(--agentkit-text);
-  background: var(--agentkit-surface);
+  background: var(
+    --agentkit-composer-background,
+    var(--agent-kit-composer-surface, var(--agentkit-surface))
+  );
   box-shadow: var(--agentkit-elevation);
 }
 
@@ -373,11 +376,10 @@
 }
 
 .agentkit-suggestions [data-agent-suggestion-scroller="true"] {
-  display: flex;
   inline-size: 100%;
-  gap: 0.375rem;
   overflow-x: auto;
   overscroll-behavior-inline: contain;
+  scroll-padding-inline: 1.5rem;
   scrollbar-width: none;
 }
 
@@ -386,6 +388,46 @@
   display: none;
 }
 
+.agentkit-suggestions [data-agent-suggestion-track="true"] {
+  display: flex;
+  flex-wrap: wrap;
+  inline-size: var(--agent-suggestion-track-width);
+  min-inline-size: 100%;
+  gap: 0.375rem;
+}
+
+[data-agent-suggestion-scroller="true"]:is(
+  [data-overflow-start],
+  [data-overflow-end]
+) {
+  -webkit-mask-image: linear-gradient(
+    var(--agent-suggestion-fade-direction, to right),
+    transparent 0,
+    black var(--agent-suggestion-fade-start, 0px),
+    black calc(100% - var(--agent-suggestion-fade-end, 0px)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    var(--agent-suggestion-fade-direction, to right),
+    transparent 0,
+    black var(--agent-suggestion-fade-start, 0px),
+    black calc(100% - var(--agent-suggestion-fade-end, 0px)),
+    transparent 100%
+  );
+}
+
+[data-agent-suggestion-scroller="true"]:dir(rtl) {
+  --agent-suggestion-fade-direction: to left;
+}
+
+[data-agent-suggestion-scroller="true"][data-overflow-start] {
+  --agent-suggestion-fade-start: 1.5rem;
+}
+
+[data-agent-suggestion-scroller="true"][data-overflow-end] {
+  --agent-suggestion-fade-end: 1.5rem;
+}
+
 .agentkit-suggestions button {
   flex: none;
   padding: 0.375rem 0.625rem;
@@ -1478,6 +1520,39 @@ button.agentkit-object {
   color: var(--agentkit-text);
 }
 
+.agentkit-activity-summary-section {
+  display: grid;
+  gap: 0.25rem;
+  margin-block-start: 0.5rem;
+}
+
+.agentkit-activity-summary-label {
+  color: var(--agentkit-text-muted);
+  font-size: 0.6875rem;
+  font-weight: 500;
+}
+
+.agentkit-activity-summary-value {
+  max-block-size: 12rem;
+  overflow: auto;
+  border: 1px solid var(--agentkit-border);
+  border-radius: var(--radius-md, var(--radius));
+  padding: 0.5rem 0.625rem;
+  background: var(--agentkit-subtle);
+  color: var(--agentkit-text);
+  font: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.agentkit-activity-summary-value:focus-visible {
+  outline: 2px solid var(--agentkit-focus);
+  outline-offset: 2px;
+}
+
 .agentkit-approval,
 .agentkit-connection-request,
 .agentkit-widget {

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

@@ -275,19 +275,23 @@ describe("AuthPage", () => {
     );
     expect(html).toContain(">Learn more</a>");
     expect(html).toContain('class="oss-badge"');
-    expect(html).not.toContain("data-agent-native-starfield");
+    expect(html).toContain('data-agent-native-wave="true"');
+    expect(html).not.toContain("data-agent-native-marketing-background");
   });
 
-  it("places a transparent animated wave after the signup legal notice", () => {
+  it("renders one full-page WebGL wave on login and signup", () => {
     const props = propsFromHtml(
       getOnboardingHtml({ requestHost: "slides.agent-native.com" }),
     );
-    const html = renderToString(<AuthPage {...props} initialView="signup" />);
 
-    expect(html.indexOf('class="legal-note"')).toBeLessThan(
-      html.indexOf('data-agent-native-starfield-transparent="true"'),
-    );
-    expect(html).toContain('class="auth-marketing-signup-wave-canvas"');
+    for (const initialView of ["login", "signup"] as const) {
+      const html = renderToString(
+        <AuthPage {...props} initialView={initialView} />,
+      );
+      expect(html.match(/data-agent-native-wave="true"/g)).toHaveLength(1);
+      expect(html).toContain('class="auth-wave-background"');
+      expect(html).not.toContain("auth-marketing-signup-wave");
+    }
   });
 
   it("keeps the whole marketing panel in English when localized copy is incomplete", () => {