@assistant-ui/react-generative-ui 0.0.17 → 0.0.18

package/src/a2ui/convert.ts

@@ -30,6 +30,23 @@ const isPlainObject = (value: unknown): value is Record<string, unknown> => {
   return prototype === Object.prototype || prototype === null;
 };
 
+const setOwnProperty = (
+  target: Record<string, unknown>,
+  key: string,
+  value: unknown,
+) => {
+  if (key === "__proto__") {
+    Object.defineProperty(target, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true,
+    });
+  } else {
+    target[key] = value;
+  }
+};
+
 const isBinding = (value: unknown): value is { readonly path: string } =>
   isPlainObject(value) &&
   Object.keys(value).length === 1 &&
@@ -90,7 +107,9 @@ const materialize = (value: unknown, source: unknown): unknown => {
   const result: Record<string, unknown> = {};
   for (const [key, entry] of Object.entries(value)) {
     const resolved = materialize(entry, source);
-    if (resolved !== undefined) result[key] = resolved;
+    if (resolved !== undefined) {
+      setOwnProperty(result, key, resolved);
+    }
   }
   return result;
 };
@@ -419,7 +438,7 @@ function convertComponent(
     for (const [key, value] of Object.entries(node)) {
       if (key === "id" || key === "component" || key === "children") continue;
       const resolved = materialize(value, dataSource);
-      if (resolved !== undefined) props[key] = resolved;
+      if (resolved !== undefined) setOwnProperty(props, key, resolved);
     }
     const mapped = mappedProps(node, props, dataSource, context);
     if (!mapped) return null;

package/src/a2ui/reducer.test.ts

@@ -82,6 +82,229 @@ describe("applyA2uiOperations", () => {
     });
   });
 
+  it.each(["10001", "4294967294"])(
+    "rejects array pointer index %s beyond the auto-vivification limit",
+    (index) => {
+      const dataModel = { items: [] };
+      const state: A2uiState = new Map([
+        ["main", { components: new Map(), dataModel }],
+      ]);
+
+      const result = applyA2uiOperations(state, [
+        {
+          version: "v1.0",
+          updateDataModel: {
+            surfaceId: "main",
+            path: `/items/${index}`,
+            value: "unsafe",
+          },
+        },
+      ]);
+
+      expect(result.warnings).toEqual([
+        "Operation at index 0 has an invalid JSON Pointer path.",
+      ]);
+      expect(result.state.get("main")?.dataModel).toBe(dataModel);
+      expect(dataModel.items).toHaveLength(0);
+    },
+  );
+
+  it("allows bounded expansion, existing large indices, and appends", () => {
+    const items = new Array<string | undefined>(10_002);
+    items[10_001] = "existing";
+    const state: A2uiState = new Map([
+      ["main", { components: new Map(), dataModel: { bounded: [], items } }],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/bounded/10000",
+          value: "limit",
+        },
+      },
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/items/10001",
+          value: "updated",
+        },
+      },
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/items/-",
+          value: "appended",
+        },
+      },
+    ]);
+
+    const resultModel = result.state.get("main")!.dataModel as {
+      bounded: string[];
+      items: string[];
+    };
+    expect(result.warnings).toEqual([]);
+    expect(resultModel.bounded).toHaveLength(10_001);
+    expect(resultModel.bounded[10_000]).toBe("limit");
+    expect(resultModel.items).toHaveLength(10_003);
+    expect(resultModel.items[10_001]).toBe("updated");
+    expect(resultModel.items[10_002]).toBe("appended");
+  });
+
+  it("stores prototype-named JSON Pointer segments as own properties", () => {
+    const state: A2uiState = new Map([
+      ["main", { components: new Map(), dataModel: {} }],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/__proto__/admin",
+          value: true,
+        },
+      },
+    ]);
+
+    const resultModel = result.state.get("main")?.dataModel as Record<
+      string,
+      unknown
+    >;
+    expect(result.warnings).toEqual([]);
+    expect(Object.getPrototypeOf(resultModel)).toBe(Object.prototype);
+    expect(Object.hasOwn(resultModel, "__proto__")).toBe(true);
+    expect(resultModel["__proto__"]).toEqual({ admin: true });
+    expect(JSON.stringify(resultModel)).toBe('{"__proto__":{"admin":true}}');
+  });
+
+  it("deletes object properties updated to null", () => {
+    const dataModel = {
+      profile: { name: "Ada", role: "admin" },
+      tags: ["first", "second"],
+    };
+    const state: A2uiState = new Map([
+      ["main", { components: new Map(), dataModel }],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/profile/name",
+          value: null,
+        },
+      },
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/tags/1",
+          value: null,
+        },
+      },
+    ]);
+
+    expect(result.warnings).toEqual([]);
+    const resultModel = result.state.get("main")?.dataModel as typeof dataModel;
+    expect(resultModel.profile).toEqual({ role: "admin" });
+    expect(resultModel.tags).toHaveLength(2);
+    expect(resultModel.tags[0]).toBe("first");
+    expect(Object.prototype.hasOwnProperty.call(resultModel.tags, 1)).toBe(
+      false,
+    );
+    expect(dataModel).toEqual({
+      profile: { name: "Ada", role: "admin" },
+      tags: ["first", "second"],
+    });
+  });
+
+  it("preserves null values in v0.9 data model updates", () => {
+    const state: A2uiState = new Map([
+      [
+        "main",
+        { components: new Map(), dataModel: { profile: { name: "Ada" } } },
+      ],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v0.9",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/profile/name",
+          value: null,
+        },
+      },
+    ]);
+
+    expect(result.warnings).toEqual([]);
+    expect(result.state.get("main")?.dataModel).toEqual({
+      profile: { name: null },
+    });
+  });
+
+  it("does not create missing paths for null updates", () => {
+    const dataModel = { profile: { name: "Ada" }, tags: ["first", "second"] };
+    const state: A2uiState = new Map([
+      ["main", { components: new Map(), dataModel }],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/missing/value",
+          value: null,
+        },
+      },
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/tags/-",
+          value: null,
+        },
+      },
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/tags/7",
+          value: null,
+        },
+      },
+    ]);
+
+    expect(result.warnings).toEqual([]);
+    expect(result.state.get("main")?.dataModel).toBe(dataModel);
+  });
+
+  it("allows null to replace the data model root", () => {
+    const state: A2uiState = new Map([
+      [
+        "main",
+        { components: new Map(), dataModel: { profile: { name: "Ada" } } },
+      ],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v1.0",
+        updateDataModel: { surfaceId: "main", value: null },
+      },
+    ]);
+
+    expect(result.warnings).toEqual([]);
+    expect(result.state.get("main")?.dataModel).toBeNull();
+  });
+
   it("clones the touched surface and component map", () => {
     const components = new Map<string, Record<string, unknown>>([
       ["root", { id: "root", component: "Divider" }],

package/src/a2ui/reducer.ts

@@ -11,6 +11,9 @@ const OPERATION_KEYS = new Set([
   "updateDataModel",
   "deleteSurface",
 ]);
+// This defensive ceiling is well above the renderer's displayed-item limit.
+const MAX_AUTO_VIVIFY_ARRAY_INDEX = 10_000;
+const INVALID_POINTER = Symbol("invalidPointer");
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
@@ -104,30 +107,82 @@ const setAtPointer = (
   model: unknown,
   path: string,
   value: unknown,
+  nullDeletes: boolean,
 ): { readonly ok: boolean; readonly value: unknown } => {
   const segments = decodePointer(path);
   if (!segments) return { ok: false, value: model };
   if (segments.length === 0) return { ok: true, value };
 
+  const remove = (current: unknown, index: number): unknown => {
+    const segment = segments[index]!;
+    const isLast = index === segments.length - 1;
+
+    if (Array.isArray(current)) {
+      if (segment !== "-" && !isArrayIndex(segment)) return current;
+      const targetIndex = segment === "-" ? current.length : Number(segment);
+      if (isLast) {
+        if (
+          segment === "-" ||
+          !Object.prototype.hasOwnProperty.call(current, targetIndex)
+        ) {
+          return current;
+        }
+        const clone = current.slice();
+        // Preserve indices referenced by other JSON Pointers.
+        delete clone[targetIndex];
+        return clone;
+      }
+      const child = current[targetIndex];
+      if (!Array.isArray(child) && !isRecord(child)) return current;
+      const next = remove(child, index + 1);
+      if (next === child) return current;
+      const clone = current.slice();
+      clone[targetIndex] = next;
+      return clone;
+    }
+
+    if (!isRecord(current)) return current;
+    if (!Object.prototype.hasOwnProperty.call(current, segment)) return current;
+    if (isLast) {
+      const clone = { ...current };
+      delete clone[segment];
+      return clone;
+    }
+    const child = current[segment];
+    if (!Array.isArray(child) && !isRecord(child)) return current;
+    const next = remove(child, index + 1);
+    if (next === child) return current;
+    return { ...current, [segment]: next };
+  };
+
+  if (nullDeletes && value === null) {
+    return { ok: true, value: remove(model, 0) };
+  }
+
   const update = (current: unknown, index: number): unknown => {
     const segment = segments[index]!;
     const isLast = index === segments.length - 1;
 
     if (Array.isArray(current)) {
       if (segment !== "-" && !isArrayIndex(segment)) return current;
+      const targetIndex = segment === "-" ? current.length : Number(segment);
+      if (
+        segment !== "-" &&
+        targetIndex >= current.length &&
+        targetIndex > MAX_AUTO_VIVIFY_ARRAY_INDEX
+      ) {
+        return INVALID_POINTER;
+      }
+      const next = isLast ? value : update(current[targetIndex], index + 1);
+      if (next === INVALID_POINTER) return INVALID_POINTER;
       const clone = current.slice();
-      const targetIndex = segment === "-" ? clone.length : Number(segment);
-      clone[targetIndex] = isLast
-        ? value
-        : update(clone[targetIndex], index + 1);
+      clone[targetIndex] = next;
       return clone;
     }
 
-    const clone: Record<string, unknown> = isRecord(current)
-      ? { ...current }
-      : {};
-    const child = clone[segment];
-    clone[segment] = isLast
+    const record: Record<string, unknown> = isRecord(current) ? current : {};
+    const child = Object.hasOwn(record, segment) ? record[segment] : undefined;
+    const next = isLast
       ? value
       : update(
           child ??
@@ -137,10 +192,14 @@ const setAtPointer = (
               : {}),
           index + 1,
         );
-    return clone;
+    if (next === INVALID_POINTER) return INVALID_POINTER;
+    return { ...record, [segment]: next };
   };
 
-  return { ok: true, value: update(model, 0) };
+  const result = update(model, 0);
+  return result === INVALID_POINTER
+    ? { ok: false, value: model }
+    : { ok: true, value: result };
 };
 
 const dataModelValue = (
@@ -264,7 +323,12 @@ export function applyA2uiOperations(
         );
         continue;
       }
-      const result = setAtPointer(surface.dataModel, path, update.value);
+      const result = setAtPointer(
+        surface.dataModel,
+        path,
+        update.value,
+        version === "v1.0",
+      );
       if (!result.ok) {
         warnings.push(
           `Operation at index ${index} has an invalid JSON Pointer path.`,

package/src/buildPresentParameters.ts

@@ -29,7 +29,7 @@ export function buildPresentParameters(
   // `children` are framework-reserved (see ir.ts), so drop any author-declared
   // copies. On a name clash the first component's schema wins — props are an
   // advisory hint here, not a strict per-component contract.
-  const props: Record<string, JSONSchema7Definition> = {};
+  const props = new Map<string, JSONSchema7Definition>();
   const propOwners = new Map<string, string[]>();
   for (const name of names) {
     const propsSchema = toJSONSchema(library[name]!.properties);
@@ -41,8 +41,11 @@ export function buildPresentParameters(
     }
     for (const [key, schema] of Object.entries(propsSchema.properties ?? {})) {
       if (key.startsWith("$") || key === "children") continue;
-      if (!(key in props)) {
-        props[key] = schema;
+      // secure-json-parse rejects the whole tool-argument payload on this key,
+      // so advertising it would cost the model the node rather than one prop.
+      if (key === "__proto__") continue;
+      if (!props.has(key)) {
+        props.set(key, schema);
       }
       propOwners.set(key, [...(propOwners.get(key) ?? []), name]);
     }
@@ -78,7 +81,7 @@ export function buildPresentParameters(
           "Stable identity for this UI node. Use it for list items that may reorder.",
         anyOf: [{ type: "string" }, { type: "number" }],
       },
-      ...props,
+      ...Object.fromEntries(props),
       children: { $ref: "#/$defs/children" },
     },
     required: [TYPE_KEY],

package/src/renderGenerativeUI.test.tsx

@@ -114,6 +114,32 @@ describe("renderGenerativeUI", () => {
     expect(html).toBe("");
   });
 
+  it.each(["toString", "constructor"])(
+    "treats inherited %s as an unknown component",
+    (type) => {
+      const html = renderToStaticMarkup(
+        <>{renderGenerativeUI({ $type: type }, library)}</>,
+      );
+      expect(html).toBe("");
+    },
+  );
+
+  it("renders an explicitly registered prototype-named component", () => {
+    const prototypeNamedLibrary: GenerativeUILibrary = {
+      ...library,
+      toString: {
+        description: "An explicitly registered component.",
+        properties: z.object({}),
+        render: () => <span>registered</span>,
+      },
+    };
+
+    const html = renderToStaticMarkup(
+      <>{renderGenerativeUI({ $type: "toString" }, prototypeNamedLibrary)}</>,
+    );
+    expect(html).toBe("<span>registered</span>");
+  });
+
   it("holds back a node whose `$type` is still streaming", () => {
     const error = vi.spyOn(console, "error").mockImplementation(() => {});
     try {
@@ -263,6 +289,37 @@ describe("buildPresentParameters", () => {
     expect(schema.required).toEqual(["$type"]);
   });
 
+  it("keeps props whose names are inherited from Object.prototype", () => {
+    const schema = buildPresentParameters({
+      PrototypeProps: {
+        description: "Declares props that shadow Object.prototype members.",
+        properties: z.object({
+          toString: z.string(),
+          valueOf: z.number(),
+          constructor: z.boolean(),
+        }),
+        render: () => null,
+      },
+    }) as any;
+
+    expect(schema.properties.toString.type).toBe("string");
+    expect(schema.properties.valueOf.type).toBe("number");
+    expect(schema.properties.constructor.type).toBe("boolean");
+  });
+
+  it("omits __proto__, which the tool-argument decoder rejects", () => {
+    const schema = buildPresentParameters({
+      PrototypeProps: {
+        description: "Declares an undeliverable prop name.",
+        properties: z.object({ ["__proto__"]: z.number(), label: z.string() }),
+        render: () => null,
+      },
+    }) as any;
+
+    expect(Object.hasOwn(schema.properties, "__proto__")).toBe(false);
+    expect(schema.properties.label.type).toBe("string");
+  });
+
   it("names every component that declares the same prop in the dev warning", () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
     try {

package/src/renderGenerativeUI.tsx

@@ -61,7 +61,9 @@ function renderElement(
   library: GenerativeUILibrary,
   context: GenerativeUIRenderContext,
 ): ReactNode {
-  const entry = library[element.type];
+  const entry = Object.hasOwn(library, element.type)
+    ? library[element.type]
+    : undefined;
   if (!entry) {
     reportUnknownComponent(element.type, Object.keys(library));
     return null;

package/src/vocabulary/alert.test.tsx

@@ -26,6 +26,16 @@ describe("alertVocabulary", () => {
     ).toContain('data-aui-tone="danger"');
   });
 
+  it("Alert ignores malformed text properties", () => {
+    expect(
+      render({
+        $type: "Alert",
+        title: { unexpected: true },
+        description: { unexpected: true },
+      }),
+    ).toBe('<div data-aui="alert" data-aui-tone="info" role="alert"></div>');
+  });
+
   it("Carousel wraps each child Card in a slide, capped at 10", () => {
     const children = Array.from({ length: 12 }, (_, i) => ({
       $type: "Card",

package/src/vocabulary/alert.tsx

@@ -2,6 +2,7 @@ import { Children } from "react";
 import { z } from "zod";
 import type { GenerativeUILibrary } from "../types";
 import { ALERT_TONES } from "../ir";
+import { toTextContent } from "./toTextContent";
 
 const MAX_CARDS = 10;
 
@@ -20,13 +21,21 @@ export const alertVocabulary = {
         .optional()
         .describe("Severity tone; defaults to `info`."),
     }),
-    render: ({ title, description, tone, children }) => (
-      <div data-aui="alert" data-aui-tone={tone ?? "info"} role="alert">
-        {title ? <header data-aui="alert-title">{title}</header> : null}
-        {description ? <p data-aui="alert-desc">{description}</p> : null}
-        {children}
-      </div>
-    ),
+    render: ({ title, description, tone, children }) => {
+      const alertTitle = toTextContent(title);
+      const alertDescription = toTextContent(description);
+      return (
+        <div data-aui="alert" data-aui-tone={tone ?? "info"} role="alert">
+          {alertTitle ? (
+            <header data-aui="alert-title">{alertTitle}</header>
+          ) : null}
+          {alertDescription ? (
+            <p data-aui="alert-desc">{alertDescription}</p>
+          ) : null}
+          {children}
+        </div>
+      );
+    },
   },
   Carousel: {
     description:

package/src/vocabulary/data.test.tsx

@@ -32,6 +32,32 @@ describe("dataVocabulary", () => {
     expect(html).toContain("<td>only</td>");
   });
 
+  it("Table ignores malformed collections instead of throwing", () => {
+    expect(
+      render({
+        $type: "Table",
+        columns: "not-an-array",
+        rows: [["kept", null, {}, false], null],
+      }),
+    ).toBe(
+      '<table data-aui="table"><tbody><tr><td>kept</td><td></td><td></td><td>false</td></tr></tbody></table>',
+    );
+
+    expect(render({ $type: "Table", columns: [null], rows: [null] })).toBe(
+      '<table data-aui="table"></table>',
+    );
+
+    expect(
+      render({
+        $type: "Table",
+        columns: [null, { label: "Name" }],
+        rows: "not-an-array",
+      }),
+    ).toBe(
+      '<table data-aui="table"><thead><tr><th data-aui="table-col"></th><th data-aui="table-col">Name</th></tr></thead></table>',
+    );
+  });
+
   it("Markdown renders the value in a div", () => {
     expect(render({ $type: "Markdown", value: "# hi" })).toBe(
       '<div data-aui="markdown"># hi</div>',
@@ -52,6 +78,20 @@ describe("dataVocabulary", () => {
     ).toBe('<div data-aui="markdown">partial</div>');
   });
 
+  it("Markdown ignores malformed streaming values", () => {
+    expect(
+      renderToStaticMarkup(
+        <>
+          {renderGenerativeUI(
+            { $type: "Markdown", value: { unexpected: true } },
+            dataVocabulary,
+            { status: "streaming" },
+          )}
+        </>,
+      ),
+    ).toBe('<div data-aui="markdown"></div>');
+  });
+
   it("Chart bar variant renders one rect per data point", () => {
     const html = render({
       $type: "Chart",