@assistant-ui/react-devtools 1.2.18 → 1.2.20

package/src/utils/serialization.ts

@@ -3,6 +3,23 @@ import type { SerializedModelContext } from "../types";
 import { normalizeToolList, type NormalizedTool } from "./toolNormalization";
 import { readProperty, UNSERIALIZABLE } from "./unserializable";
 
+const setOwnProperty = (
+  target: Record<string, unknown>,
+  key: string,
+  value: unknown,
+): void => {
+  if (key === "__proto__") {
+    Object.defineProperty(target, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true,
+    });
+  } else {
+    target[key] = value;
+  }
+};
+
 export const sanitizeForMessage = (
   value: unknown,
   seen = new WeakSet<object>(),
@@ -54,7 +71,11 @@ export const sanitizeForMessage = (
             nextSuffixByKey.set(serializedKey, 2);
           }
 
-          result[serializedKey] = sanitizeForMessage(entry, seen);
+          setOwnProperty(
+            result,
+            serializedKey,
+            sanitizeForMessage(entry, seen),
+          );
         }
         return result;
       }
@@ -81,12 +102,13 @@ export const sanitizeForMessage = (
       const result: Record<string, unknown> = {};
       for (const key of Object.keys(value)) {
         try {
-          result[key] = sanitizeForMessage(
-            (value as Record<string, unknown>)[key],
-            seen,
+          setOwnProperty(
+            result,
+            key,
+            sanitizeForMessage((value as Record<string, unknown>)[key], seen),
           );
         } catch {
-          result[key] = UNSERIALIZABLE;
+          setOwnProperty(result, key, UNSERIALIZABLE);
         }
       }
       return result;
@@ -149,10 +171,13 @@ export const redactSensitive = (value: unknown, maskAll = false): unknown => {
       value as Record<string, unknown>,
     )) {
       const normalized = normalizeKey(key);
-      result[key] =
+      setOwnProperty(
+        result,
+        key,
         maskAll || SENSITIVE_KEYS.has(normalized)
           ? REDACTED
-          : redactSensitive(entry, MASK_ALL_KEYS.has(normalized));
+          : redactSensitive(entry, MASK_ALL_KEYS.has(normalized)),
+      );
     }
     return result;
   }

package/src/views/message/MessageMetrics.tsx

@@ -16,9 +16,8 @@ const inlineStats = (message: MessagePreview): string[] => {
 
   if (timing && !canRenderBar(timing)) {
     const ttft =
-      timing.firstTokenTime !== undefined &&
-      timing.streamStartTime !== undefined
-        ? Math.max(0, timing.firstTokenTime - timing.streamStartTime)
+      timing.firstTokenTime !== undefined
+        ? Math.max(0, timing.firstTokenTime)
         : undefined;
     if (ttft !== undefined) stats.push(`TTFT ${formatMs(ttft)}`);
     if (timing.totalStreamTime !== undefined) {

package/src/views/message/TtftBar.test.tsx

@@ -0,0 +1,20 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { TtftBar } from "./TtftBar";
+
+describe("TtftBar", () => {
+  it("reads the first token time as a duration from the stream start", () => {
+    const html = renderToStaticMarkup(
+      <TtftBar
+        timing={{
+          streamStartTime: 1_700_000_000_000,
+          firstTokenTime: 150,
+          totalStreamTime: 900,
+        }}
+      />,
+    );
+
+    expect(html).toContain("TTFT 150ms");
+    expect(html).toContain("750ms stream");
+  });
+});

package/src/views/message/TtftBar.tsx

@@ -4,7 +4,7 @@ import type { MessageTimingPreview } from "./types";
 /**
  * Splits a model turn into the time-to-first-token segment (dim) and the
  * streaming segment (solid). The only width-bearing timing form: both numbers
- * are measured, not derived. Renders nothing unless all three timestamps exist.
+ * are measured, not derived. Renders nothing unless all three timing values exist.
  */
 export const TtftBar = ({ timing }: { timing: MessageTimingPreview }) => {
   const { streamStartTime, firstTokenTime, totalStreamTime } = timing;
@@ -16,7 +16,7 @@ export const TtftBar = ({ timing }: { timing: MessageTimingPreview }) => {
     return null;
   }
 
-  const ttft = Math.max(0, firstTokenTime - streamStartTime);
+  const ttft = Math.max(0, firstTokenTime);
   const total = Math.max(totalStreamTime, ttft);
   const stream = Math.max(0, total - ttft);
   const ttftPercent = total > 0 ? (ttft / total) * 100 : 0;

package/src/views/thread/Transcript.tsx

@@ -169,12 +169,7 @@ const metricSeries = (messages: readonly MessagePreview[]): MetricSeries[] =>
     },
     {
       label: "TTFT",
-      values: collect(messages, (message) =>
-        message.timing?.firstTokenTime !== undefined &&
-        message.timing?.streamStartTime !== undefined
-          ? message.timing.firstTokenTime - message.timing.streamStartTime
-          : undefined,
-      ),
+      values: collect(messages, (message) => message.timing?.firstTokenTime),
       format: (value: number) => `${Math.round(value)}ms`,
     },
     {

package/src/views/ui/CopyButton.tsx

@@ -35,7 +35,7 @@ export const CopyButton = ({
   iconOnly = false,
   size = "default",
 }: {
-  value: string;
+  value: string | (() => string);
   label?: string;
   copiedLabel?: string;
   className?: string | undefined;
@@ -43,7 +43,7 @@ export const CopyButton = ({
   size?: "default" | "sm";
 }) => {
   const { isCopied, copy } = useCopyToClipboard();
-  const empty = !value.trim();
+  const empty = typeof value === "string" && !value.trim();
   const iconPx = size === "sm" ? 10 : 12;
 
   return (
@@ -54,7 +54,7 @@ export const CopyButton = ({
       title={isCopied ? copiedLabel : label}
       onClick={(event) => {
         event.stopPropagation();
-        copy(value);
+        copy(typeof value === "function" ? value() : value);
       }}
       className={clsx(
         "text-muted-foreground hover:text-foreground inline-flex shrink-0 items-center justify-center rounded transition-colors disabled:pointer-events-none disabled:opacity-40",

package/src/views/ui/JSONTree.interaction.test.tsx

@@ -0,0 +1,118 @@
+/** @vitest-environment jsdom */
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { JSONTree } from "./JSONTree";
+import { CopyButton } from "./CopyButton";
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("JSONTree interactions", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let writeText: ReturnType<typeof vi.fn<(text: string) => Promise<void>>>;
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    writeText = vi.fn(async () => {});
+    vi.stubGlobal("navigator", { clipboard: { writeText } });
+    vi.useFakeTimers();
+  });
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  const button = (text: string) => {
+    const result = Array.from(container.querySelectorAll("button")).find(
+      (node) =>
+        node.textContent?.includes(text) ||
+        node.getAttribute("aria-label") === text,
+    );
+    if (!result) throw new Error(`Missing button: ${text}`);
+    return result;
+  };
+  const click = (text: string) => act(async () => button(text).click());
+
+  it.each([false, true])(
+    "expands, reveals remaining entries and collapses in compact=%s",
+    async (compact) => {
+      const value = Array.from({ length: 103 }, (_, i) => `entry-${i}`);
+      await act(async () =>
+        root.render(<JSONTree value={value} openDepth={0} compact={compact} />),
+      );
+      expect(container.textContent).not.toContain("entry-");
+      await click("[103]");
+      expect(container.textContent).toContain("entry-99");
+      expect(container.textContent).not.toContain("entry-100");
+      await click("+3 more");
+      expect(container.textContent).toContain("entry-102");
+      await click("[103]");
+      expect(container.textContent).not.toContain("entry-");
+      await click("[103]");
+      expect(container.textContent).toContain("entry-102");
+    },
+  );
+
+  it("copies all hidden entries and uses the latest value without expanding", async () => {
+    let value = Array.from({ length: 103 }, (_, i) => ({ id: i }));
+    await act(async () =>
+      root.render(<JSONTree value={value} openDepth={0} />),
+    );
+    await click("Copy JSON");
+    expect(writeText).toHaveBeenLastCalledWith(JSON.stringify(value, null, 2));
+    expect(button("Copied")).toBeDefined();
+    value = [...value, { id: 103 }];
+    await act(async () =>
+      root.render(<JSONTree value={value} openDepth={0} />),
+    );
+    await click("Copied");
+    expect(writeText).toHaveBeenLastCalledWith(JSON.stringify(value, null, 2));
+    expect(container.textContent).not.toContain("id");
+    await act(async () => {
+      vi.advanceTimersByTime(2000);
+    });
+    expect(button("Copy JSON")).toBeDefined();
+  });
+
+  it("keeps nested nodes collapsed until requested", async () => {
+    await act(async () =>
+      root.render(<JSONTree value={{ nested: { message: "inside" } }} />),
+    );
+    expect(container.textContent).toContain("nested");
+    expect(container.textContent).not.toContain("inside");
+    await click("nested");
+    expect(container.textContent).toContain("inside");
+  });
+
+  it("keeps compact small values inline and copies formatted JSON", async () => {
+    const value = { query: "hello" };
+    await act(async () => root.render(<JSONTree value={value} compact />));
+    expect(container.querySelector("code")?.textContent).toBe(
+      JSON.stringify(value),
+    );
+    await click("Copy JSON");
+    expect(writeText).toHaveBeenCalledWith(JSON.stringify(value, null, 2));
+  });
+
+  it("keeps empty string copy controls disabled and evaluates lazy values only on click", async () => {
+    const getValue = vi.fn(() => "lazy value");
+    await act(async () =>
+      root.render(
+        <>
+          <CopyButton value="  " label="Empty" />
+          <CopyButton value={getValue} label="Lazy" />
+        </>,
+      ),
+    );
+    expect(button("Empty").disabled).toBe(true);
+    expect(getValue).not.toHaveBeenCalled();
+    await click("Lazy");
+    expect(getValue).toHaveBeenCalledTimes(1);
+    expect(writeText).toHaveBeenCalledWith("lazy value");
+  });
+});

package/src/views/ui/JSONTree.tsx

@@ -1,6 +1,7 @@
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import clsx from "clsx";
 import { CopyButton } from "./CopyButton";
+import { getInlineJson } from "./getInlineJson";
 
 const ENTRY_LIMIT = 100;
 const INLINE_MAX = 88;
@@ -10,29 +11,20 @@ const isContainer = (value: unknown): value is object =>
 
 type Entry = { key: string; value: unknown };
 
-const entriesOf = (value: unknown): Entry[] => {
+const entriesOf = (value: object, keys: string[], limit: number): Entry[] => {
   if (Array.isArray(value)) {
-    return value.map((item, index) => ({ key: String(index), value: item }));
+    return value
+      .slice(0, limit)
+      .map((item, index) => ({ key: String(index), value: item }));
   }
-  return Object.entries(value as Record<string, unknown>).map(
-    ([key, value]) => ({ key, value }),
-  );
-};
-
-const summaryOf = (value: unknown): string => {
-  if (Array.isArray(value)) return `[${value.length}]`;
-  return `{${Object.keys(value as object).length}}`;
+  return keys
+    .slice(0, limit)
+    .map((key) => ({ key, value: (value as Record<string, unknown>)[key] }));
 };
 
 const serialize = (value: unknown, compact: boolean) =>
   JSON.stringify(value, null, compact ? 0 : 2);
 
-const isInline = (value: unknown, compact: boolean) => {
-  if (!compact) return false;
-  if (!isContainer(value)) return true;
-  return serialize(value, true).length <= INLINE_MAX;
-};
-
 const Leaf = ({ value }: { value: unknown }) => {
   if (typeof value === "string") {
     return (
@@ -78,9 +70,12 @@ const TreeNode = ({
     );
   }
 
-  const entries = entriesOf(value);
-  const shown = showAll ? entries : entries.slice(0, ENTRY_LIMIT);
-  const hidden = entries.length - shown.length;
+  const keys = Array.isArray(value) ? [] : Object.keys(value);
+  const count = Array.isArray(value) ? value.length : keys.length;
+  const shown = open
+    ? entriesOf(value, keys, showAll ? count : ENTRY_LIMIT)
+    : [];
+  const hidden = count - shown.length;
 
   return (
     <div className="min-w-0">
@@ -101,7 +96,9 @@ const TreeNode = ({
           ›
         </span>
         {name !== undefined ? <span>{name}</span> : null}
-        <span className="opacity-60">{summaryOf(value)}</span>
+        <span className="opacity-60">
+          {Array.isArray(value) ? `[${count}]` : `{${count}}`}
+        </span>
       </button>
       {open ? (
         <div
@@ -141,7 +138,7 @@ const InlineJson = ({
   compact,
 }: {
   serialized: string;
-  copyText: string;
+  copyText: () => string;
   compact: boolean;
 }) => (
   <div className="flex min-w-0 items-start gap-0.5">
@@ -171,7 +168,7 @@ const TreeWithCopy = ({
 }: {
   value: unknown;
   openDepth: number;
-  copyText: string;
+  copyText: () => string;
   compact: boolean;
 }) => (
   <div className="flex min-w-0 items-start gap-0.5">
@@ -212,14 +209,18 @@ export const JSONTree = ({
   openDepth?: number;
   compact?: boolean;
 }) => {
-  const isLeaf = isInline(value, compact) || !isContainer(value);
   const serialized = useMemo(
-    () => (isLeaf ? serialize(value, compact) : ""),
-    [value, compact, isLeaf],
+    () =>
+      !isContainer(value)
+        ? serialize(value, compact)
+        : compact
+          ? getInlineJson(value, INLINE_MAX)
+          : undefined,
+    [value, compact],
   );
-  const copyText = useMemo(() => JSON.stringify(value, null, 2), [value]);
+  const copyText = useCallback(() => JSON.stringify(value, null, 2), [value]);
 
-  if (isLeaf) {
+  if (serialized !== undefined) {
     return (
       <InlineJson
         serialized={serialized}

package/src/views/ui/JSONTree.work.test.tsx

@@ -0,0 +1,60 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { createRenderCounter } from "@assistant-ui/x-performance";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { JSONTree } from "./JSONTree";
+
+afterEach(() => vi.restoreAllMocks());
+
+function trackedValue(size: number, array: boolean) {
+  const counter = createRenderCounter();
+  const value: Record<string, unknown> | unknown[] = array ? [] : {};
+  for (let index = 0; index < size; index++) {
+    Object.defineProperty(value, String(index), {
+      enumerable: true,
+      get: () => {
+        counter.useRender("entry");
+        return index;
+      },
+    });
+  }
+  const stringify = JSON.stringify;
+  vi.spyOn(JSON, "stringify").mockImplementation((...args) => {
+    if (args[0] === value) counter.useRender("serialization");
+    return Reflect.apply(stringify, JSON, args);
+  });
+  return { value, counter };
+}
+
+describe("JSONTree work bounds", () => {
+  it.each([false, true])(
+    "does not read a collapsed array in compact=%s",
+    (compact) => {
+      const { value, counter } = trackedValue(10_000, true);
+      const html = renderToStaticMarkup(
+        <JSONTree value={value} openDepth={0} compact={compact} />,
+      );
+      expect(html).toContain("[10000]");
+      expect(counter.renders("entry")).toBe(0);
+      expect(counter.renders("serialization")).toBe(0);
+    },
+  );
+
+  it("does not read a collapsed object's values", () => {
+    const { value, counter } = trackedValue(10_000, false);
+    const html = renderToStaticMarkup(<JSONTree value={value} openDepth={0} />);
+    expect(html).toContain("{10000}");
+    expect(counter.renders("entry")).toBe(0);
+    expect(counter.renders("serialization")).toBe(0);
+  });
+
+  it.each([false, true])(
+    "reads only the first 100 entries for array=%s",
+    (array) => {
+      const { value, counter } = trackedValue(10_000, array);
+      const html = renderToStaticMarkup(<JSONTree value={value} />);
+      expect(html).toContain("9900");
+      expect(counter.renders("entry")).toBe(100);
+      expect(counter.renders("serialization")).toBe(0);
+    },
+  );
+});

package/src/views/ui/getInlineJson.test.ts

@@ -0,0 +1,83 @@
+import { createRenderCounter } from "@assistant-ui/x-performance";
+import { describe, expect, it } from "vitest";
+import { getInlineJson } from "./getInlineJson";
+
+describe("getInlineJson", () => {
+  it("preserves JSON output and the exact inline length boundary", () => {
+    const values: unknown[] = [
+      null,
+      true,
+      false,
+      0,
+      NaN,
+      Infinity,
+      {},
+      [],
+      undefined,
+    ];
+    for (const size of [0, 1, 20, 42, 43, 44, 85, 86, 87, 88, 89, 100]) {
+      for (const char of ["x", "\n", '"', "\\", "😀", "\ud800"]) {
+        const text = char.repeat(size);
+        values.push(text, { text }, { nested: { text } }, [text]);
+      }
+      values.push(
+        Array(size).fill(0),
+        Array(size),
+        Object.fromEntries(
+          Array.from({ length: size }, (_, i) => [String(i), undefined]),
+        ),
+      );
+    }
+    values.push({
+      omitted: undefined,
+      fn: () => {},
+      symbol: Symbol(),
+      kept: "yes",
+    });
+    values.push(new Date("2026-01-01T00:00:00.000Z"));
+    values.push({ toJSON: () => ({ short: true }) });
+    const customArray = Object.assign(Array(100).fill(0), {
+      toJSON: () => "short",
+    });
+    values.push(customArray);
+    for (const value of values) {
+      const serialized = JSON.stringify(value);
+      expect(getInlineJson(value, 88)).toBe(
+        serialized !== undefined && serialized.length <= 88
+          ? serialized
+          : undefined,
+      );
+    }
+  });
+
+  it("stops reading a large object after the preview budget is exhausted", () => {
+    const counter = createRenderCounter();
+    const value: Record<string, number> = {};
+    for (let index = 0; index < 10_000; index++) {
+      Object.defineProperty(value, `row${index}`, {
+        enumerable: true,
+        get: () => {
+          counter.useRender("entry");
+          return index;
+        },
+      });
+    }
+    expect(getInlineJson(value, 88)).toBeUndefined();
+    expect(counter.renders("entry")).toBe(17);
+  });
+
+  it("does not turn unrelated serialization errors into a large preview", () => {
+    const failure = new Error("serialization failed");
+    expect(() =>
+      getInlineJson(
+        {
+          toJSON: () => {
+            throw failure;
+          },
+        },
+        88,
+      ),
+    ).toThrow(failure);
+    expect(() => getInlineJson({ value: 1n }, 88)).toThrow(TypeError);
+  });
+});

package/src/views/ui/getInlineJson.ts

@@ -0,0 +1,38 @@
+const TOO_LARGE = Symbol();
+
+export function getInlineJson(value: unknown, limit: number) {
+  if (
+    Array.isArray(value) &&
+    !("toJSON" in value) &&
+    value.length * 2 + 1 > limit
+  ) {
+    return undefined;
+  }
+
+  let remaining = limit;
+  try {
+    const serialized = JSON.stringify(value, function (key, entry: unknown) {
+      if (
+        !Array.isArray(this) &&
+        (entry === undefined ||
+          typeof entry === "function" ||
+          typeof entry === "symbol")
+      ) {
+        return entry;
+      }
+      // This lower bound stops large values without replacing JSON escaping or omission rules.
+      remaining -=
+        1 +
+        (Array.isArray(this) ? 0 : key.length) +
+        (typeof entry === "string" ? entry.length : 0);
+      if (remaining < 0) throw TOO_LARGE;
+      return entry;
+    });
+    return serialized !== undefined && serialized.length <= limit
+      ? serialized
+      : undefined;
+  } catch (error) {
+    if (error === TOO_LARGE) return undefined;
+    throw error;
+  }
+}