@assistant-ui/react-generative-ui 0.0.20 → 0.0.22

package/src/JSONGenerativeUI.test.tsx

@@ -1,9 +1,13 @@
+import { convertSurfaceToUISpec } from "./a2ui/convert";
+import { surfaceToOperations } from "./a2ui/snapshot";
+import { applyA2uiOperations } from "./a2ui/reducer";
 /** @vitest-environment jsdom */
 import { describe, it, expect, vi } from "vitest";
 import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { renderToStaticMarkup } from "react-dom/server";
 import { z } from "zod";
+import { parsePartialJsonObject } from "assistant-stream/utils";
 import { JSONGenerativeUI as ClientGenUI } from "./JSONGenerativeUI.client";
 import { JSONGenerativeUI as ServerGenUI } from "./JSONGenerativeUI.server";
 import { defineGenerativeComponents } from "./defineGenerativeComponents";
@@ -11,6 +15,21 @@ import { createActionRegistry, type ActionRegistry } from "./actionRegistry";
 import type { GenerativeUIDispatch, GenerativeUILibrary } from "./types";
 import { defaultGenerativeUILibrary } from "./vocabulary";
 
+const { evaluateValue } = vi.hoisted(() => ({ evaluateValue: vi.fn() }));
+vi.mock("./a2ui/valueFunctions", async (importOriginal) => {
+  const original =
+    await importOriginal<typeof import("./a2ui/valueFunctions")>();
+  return {
+    ...original,
+    evaluateA2uiValueFunction: (
+      ...args: Parameters<typeof original.evaluateA2uiValueFunction>
+    ) => {
+      evaluateValue(...args);
+      return original.evaluateA2uiValueFunction(...args);
+    },
+  };
+});
+
 (
   globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
 ).IS_REACT_ACT_ENVIRONMENT = true;
@@ -116,6 +135,270 @@ describe("JSONGenerativeUI — client build", () => {
     expect(html).toContain("<button>ok</button>");
   });
 
+  it("leaves present output live when the tool call has a result", () => {
+    const interactive = new ClientGenUI({
+      library: defaultGenerativeUILibrary,
+    });
+    const html = renderTool(
+      interactive.present(),
+      { $type: "Input", name: "note", defaultValue: "model default" },
+      {
+        result: { submitted: true },
+        unstable_interactions: {
+          entries: [
+            {
+              type: "action",
+              occurredAt: 1,
+              payload: { $input: { note: "submitted" } },
+            },
+          ],
+        },
+      },
+    );
+
+    expect(html).not.toContain('data-aui="answered"');
+    expect(html).toContain('value="model default"');
+  });
+
+  it("locks an answered prompt without recorded actions at its defaults", () => {
+    const interactive = new ClientGenUI({
+      library: defaultGenerativeUILibrary,
+    });
+    const html = renderTool(
+      interactive.promptUser(),
+      { $type: "Input", name: "note", defaultValue: "model default" },
+      { result: { submitted: true } },
+    );
+
+    expect(html).toContain('<fieldset disabled="" data-aui="answered">');
+    expect(html).toContain('value="model default"');
+  });
+
+  it("locks an answered prompt and restores submitted Form values", async () => {
+    const handler = vi.fn();
+    const interactive = new ClientGenUI({
+      library: defaultGenerativeUILibrary,
+      actions: createActionRegistry({ save: handler }),
+    });
+    const container = document.createElement("div");
+    const root = createRoot(container);
+
+    try {
+      await act(async () => {
+        root.render(
+          (interactive.promptUser() as any).render({
+            args: {
+              $type: "Form",
+              $action: { type: "save" },
+              children: [
+                {
+                  $type: "Input",
+                  name: "message",
+                  defaultValue: "model message",
+                },
+                {
+                  $type: "Select",
+                  name: "role",
+                  defaultValue: "viewer",
+                  options: [
+                    { label: "Viewer", value: "viewer" },
+                    { label: "Editor", value: "editor" },
+                  ],
+                },
+                {
+                  $type: "DatePicker",
+                  name: "date",
+                  value: "2026-01-01",
+                },
+                {
+                  $type: "Checkbox",
+                  name: "updates",
+                  label: "Updates",
+                  defaultChecked: false,
+                },
+                {
+                  $type: "RadioGroup",
+                  name: "plan",
+                  defaultValue: "basic",
+                  options: [
+                    { label: "Basic", value: "basic" },
+                    { label: "Pro", value: "pro" },
+                  ],
+                },
+                {
+                  $type: "CheckboxGroup",
+                  name: "toppings",
+                  defaultValue: ["olives"],
+                  options: [
+                    { label: "Basil", value: "basil" },
+                    { label: "Olives", value: "olives" },
+                    { label: "Onion", value: "onion" },
+                  ],
+                },
+                { $type: "Button", label: "Save", submit: true },
+              ],
+            },
+            status: { type: "complete" },
+            toolCallId: "answered-form",
+            toolName: "prompt_user",
+            argsText: "",
+            addResult: vi.fn(),
+            result: { saved: true },
+            unstable_interactions: {
+              entries: [
+                {
+                  type: "action",
+                  occurredAt: 1,
+                  payload: { $input: { message: "older value" } },
+                },
+                {
+                  type: "action",
+                  occurredAt: 2,
+                  payload: {
+                    $input: {
+                      message: "submitted message",
+                      role: "editor",
+                      date: "2026-02-03",
+                      updates: true,
+                      plan: "pro",
+                      toppings: ["basil", "onion"],
+                    },
+                  },
+                },
+              ],
+            },
+          }),
+        );
+      });
+
+      const answered = container.querySelector('fieldset[data-aui="answered"]');
+      const form = container.querySelector("form");
+      const message = container.querySelector<HTMLInputElement>(
+        'input[name="message"]',
+      );
+      const role = container.querySelector<HTMLSelectElement>(
+        'select[name="role"]',
+      );
+      const date =
+        container.querySelector<HTMLInputElement>('input[name="date"]');
+      const updates = container.querySelector<HTMLInputElement>(
+        'input[name="updates"]',
+      );
+      const pro = container.querySelector<HTMLInputElement>(
+        'input[type="radio"][value="pro"]',
+      );
+      const toppings = Array.from(
+        container.querySelectorAll<HTMLInputElement>('input[name="toppings"]'),
+      );
+      const button = container.querySelector("button");
+      if (
+        !answered ||
+        !form ||
+        !message ||
+        !role ||
+        !date ||
+        !updates ||
+        !pro ||
+        !button
+      ) {
+        throw new Error("Expected answered prompt controls to render.");
+      }
+
+      expect(message.value).toBe("submitted message");
+      expect(role.value).toBe("editor");
+      expect(date.value).toBe("2026-02-03");
+      expect(updates.checked).toBe(true);
+      expect(pro.checked).toBe(true);
+      expect(toppings.map((input) => input.checked)).toEqual([
+        true,
+        false,
+        true,
+      ]);
+      for (const control of [
+        ...container.querySelectorAll("input, select, textarea, button"),
+      ]) {
+        expect(control.matches(":disabled")).toBe(true);
+      }
+
+      await act(async () => {
+        button.click();
+        form.dispatchEvent(
+          new Event("submit", { bubbles: true, cancelable: true }),
+        );
+      });
+
+      expect(handler).not.toHaveBeenCalled();
+    } finally {
+      await act(async () => root.unmount());
+    }
+  });
+
+  it("keeps an unanswered prompt live", async () => {
+    const handler = vi.fn();
+    const interactive = new ClientGenUI({
+      library: defaultGenerativeUILibrary,
+      actions: createActionRegistry({ save: handler }),
+    });
+    const container = document.createElement("div");
+    const root = createRoot(container);
+
+    try {
+      await act(async () => {
+        root.render(
+          (interactive.promptUser() as any).render({
+            args: {
+              $type: "Button",
+              label: "Save",
+              $action: { type: "save" },
+            },
+            status: { type: "complete" },
+            toolCallId: "unanswered-button",
+            toolName: "prompt_user",
+            argsText: "",
+            addResult: vi.fn(),
+          }),
+        );
+      });
+
+      const button = container.querySelector("button");
+      if (!button) throw new Error("Expected an unanswered prompt button.");
+      expect(container.querySelector('[data-aui="answered"]')).toBeNull();
+      await act(async () => button.click());
+      expect(handler).toHaveBeenCalledWith({ payload: { type: "save" } });
+    } finally {
+      await act(async () => root.unmount());
+    }
+  });
+
+  it.each(["running", "incomplete"])(
+    "holds prompt controls back for %s arguments",
+    (type) => {
+      expect(
+        renderTool(
+          ui.promptUser(),
+          { $type: "Button", label: "Answer" },
+          { status: { type } },
+        ),
+      ).toBe('<div data-aui="root"></div>');
+    },
+  );
+
+  it("holds back a pending prompt whose cancelled argument stream is partial", () => {
+    const args = parsePartialJsonObject('{"$type":"Button","label":"Ans');
+    expect(
+      renderTool(ui.promptUser(), args, {
+        status: { type: "requires-action", reason: "tool-calls" },
+      }),
+    ).toBe('<div data-aui="root"></div>');
+    expect(
+      renderTool(
+        ui.promptUser(),
+        parsePartialJsonObject('{"$type":"Button","label":"Answer"}'),
+        { status: { type: "requires-action", reason: "tool-calls" } },
+      ),
+    ).toContain("<button>Answer</button>");
+  });
+
   it("records actions before dispatching them without waiting for recording", () => {
     const recording = vi.fn(() => new Promise<void>(() => {}));
     const handler = vi.fn(() => "accepted");
@@ -277,17 +560,29 @@ describe("JSONGenerativeUI — client build", () => {
     expect(addResult).not.toHaveBeenCalled();
   });
 
-  it("does not complete prompt_user when the tool call already has a result", async () => {
-    const addResult = vi.fn();
-    const dispatch = captureActionDispatch(
-      "promptUser",
-      createActionRegistry({ answer: () => ({ choice: "new" }) }),
-      { addResult, result: { choice: "existing" } },
+  it("does not provide an action dispatch when prompt_user already has a result", () => {
+    let dispatch: GenerativeUIDispatch | undefined;
+    const ui = new ClientGenUI({
+      library: {
+        Action: {
+          description: "An action target.",
+          properties: z.object({}),
+          render: ({ $dispatch }: any) => {
+            dispatch = $dispatch;
+            return null;
+          },
+        },
+      },
+      actions: createActionRegistry({ answer: vi.fn() }),
+    });
+
+    renderTool(
+      ui.promptUser(),
+      { $type: "Action", $action: { type: "answer" } },
+      { result: { choice: "existing" } },
     );
 
-    dispatch({ type: "answer" });
-    await Promise.resolve();
-    expect(addResult).not.toHaveBeenCalled();
+    expect(dispatch).toBeUndefined();
   });
 
   it("never completes present from an action result", async () => {
@@ -303,70 +598,76 @@ describe("JSONGenerativeUI — client build", () => {
     expect(addResult).not.toHaveBeenCalled();
   });
 
-  it("completes prompt_user form submissions with named field values", async () => {
-    const addResult = vi.fn();
-    const handler = vi.fn(() => ({ submitted: true }));
-    const ui = new ClientGenUI({
-      library: defaultGenerativeUILibrary,
-      actions: createActionRegistry({ submit: handler }),
-    });
-    const container = document.createElement("div");
-    const root = createRoot(container);
-
-    try {
-      await act(async () => {
-        root.render(
-          (ui.promptUser() as any).render({
-            args: {
-              $type: "Form",
-              $action: { type: "submit" },
-              children: [
-                { $type: "Input", name: "email" },
-                { $type: "Checkbox", name: "updates", label: "Updates" },
-              ],
-            },
-            status: { type: "complete" },
-            toolCallId: "prompt-form",
-            toolName: "prompt_user",
-            argsText: "",
-            addResult,
-          }),
-        );
+  it.each(["complete", "requires-action"])(
+    "completes %s prompt_user form submissions with named field values",
+    async (type) => {
+      const addResult = vi.fn();
+      const handler = vi.fn(() => ({ submitted: true }));
+      const ui = new ClientGenUI({
+        library: defaultGenerativeUILibrary,
+        actions: createActionRegistry({ submit: handler }),
       });
+      const container = document.createElement("div");
+      const root = createRoot(container);
 
-      const form = container.querySelector("form");
-      const email = container.querySelector<HTMLInputElement>(
-        'input[name="email"]',
-      );
-      const updates = container.querySelector<HTMLInputElement>(
-        'input[name="updates"]',
-      );
-      if (!form || !email || !updates) {
-        throw new Error("Expected the prompt form fields to render.");
-      }
+      try {
+        await act(async () => {
+          root.render(
+            (ui.promptUser() as any).render({
+              args: {
+                $type: "Form",
+                $action: { type: "submit" },
+                children: [
+                  { $type: "Input", name: "email" },
+                  { $type: "Checkbox", name: "updates", label: "Updates" },
+                ],
+              },
+              status: {
+                type,
+                ...(type === "requires-action" ? { reason: "tool-calls" } : {}),
+              },
+              toolCallId: "prompt-form",
+              toolName: "prompt_user",
+              argsText: "",
+              addResult,
+            }),
+          );
+        });
 
-      email.value = "ada@example.com";
-      updates.checked = true;
-      let submitted = true;
-      await act(async () => {
-        submitted = form.dispatchEvent(
-          new Event("submit", { bubbles: true, cancelable: true }),
+        const form = container.querySelector("form");
+        const email = container.querySelector<HTMLInputElement>(
+          'input[name="email"]',
         );
-        await Promise.resolve();
-      });
+        const updates = container.querySelector<HTMLInputElement>(
+          'input[name="updates"]',
+        );
+        if (!form || !email || !updates) {
+          throw new Error("Expected the prompt form fields to render.");
+        }
 
-      expect(submitted).toBe(false);
-      expect(handler).toHaveBeenCalledWith({
-        payload: {
-          type: "submit",
-          $input: { email: "ada@example.com", updates: true },
-        },
-      });
-      expect(addResult).toHaveBeenCalledWith({ submitted: true });
-    } finally {
-      await act(async () => root.unmount());
-    }
-  });
+        email.value = "ada@example.com";
+        updates.checked = true;
+        let submitted = true;
+        await act(async () => {
+          submitted = form.dispatchEvent(
+            new Event("submit", { bubbles: true, cancelable: true }),
+          );
+          await Promise.resolve();
+        });
+
+        expect(submitted).toBe(false);
+        expect(handler).toHaveBeenCalledWith({
+          payload: {
+            type: "submit",
+            $input: { email: "ada@example.com", updates: true },
+          },
+        });
+        expect(addResult).toHaveBeenCalledWith({ submitted: true });
+      } finally {
+        await act(async () => root.unmount());
+      }
+    },
+  );
 });
 
 describe("JSONGenerativeUI — server build", () => {
@@ -400,3 +701,598 @@ describe("defineGenerativeComponents", () => {
     );
   });
 });
+
+describe("live A2UI surfaces", () => {
+  const bindingFixture = ({
+    inputCount = 2,
+    customInput = false,
+    path = "/profile/name",
+    dataModel = { profile: { name: "Initial" }, other: "Other" },
+    template = false,
+  }: {
+    inputCount?: number;
+    customInput?: boolean;
+    path?: string;
+    dataModel?: unknown;
+    template?: boolean;
+  } = {}) => {
+    const handler = vi.fn();
+    const ui = new ClientGenUI({
+      library: {
+        ...defaultGenerativeUILibrary,
+        ...(customInput
+          ? {
+              Input: {
+                ...defaultGenerativeUILibrary["Input"]!,
+                render: ({ name, value, defaultValue }: any) => (
+                  <input name={name} defaultValue={value ?? defaultValue} />
+                ),
+              },
+            }
+          : {}),
+      },
+      actions: createActionRegistry({ "a2ui:action": handler }),
+    });
+    const fields = Array.from({ length: inputCount }, (_, index) => ({
+      id: `field${index}`,
+      component: "TextField",
+      text: { path },
+    }));
+    const surface = applyA2uiOperations(new Map(), [
+      {
+        version: "v1.0",
+        createSurface: {
+          surfaceId: "s",
+          components: [
+            {
+              id: "root",
+              component: "Column",
+              children: template
+                ? { componentId: "row", path: "/items" }
+                : [...fields.map(({ id }) => id), "preview", "submit"],
+            },
+            {
+              id: "row",
+              component: "Column",
+              children: [...fields.map(({ id }) => id), "preview", "submit"],
+            },
+            ...fields,
+            {
+              id: "preview",
+              component: "Text",
+              text: { call: "formatString", args: { value: "${/other}" } },
+            },
+            {
+              id: "submit",
+              component: "Button",
+              label: "Submit",
+              action: {
+                name: "submit",
+                context: { name: { path } },
+              },
+            },
+          ],
+          dataModel,
+        },
+      },
+    ]).state.get("s")!;
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+    const render = async (dataModel = surface.dataModel) => {
+      const next = { ...surface, dataModel };
+      await act(async () => {
+        root.render(
+          (ui.present() as any).render({
+            args: convertSurfaceToUISpec(next).spec,
+            status: { type: "complete" },
+            toolCallId: "a2ui:s",
+            artifact: {
+              a2ui: structuredClone(surfaceToOperations(next, "s")),
+            },
+          }),
+        );
+      });
+    };
+    const inputs = () => [
+      ...container.querySelectorAll<HTMLInputElement>("input"),
+    ];
+    const edit = async (value: string, notify = true, index = 0) => {
+      await act(async () => {
+        const input = inputs()[index]!;
+        Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value",
+        )!.set!.call(input, value);
+        if (notify) input.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+    };
+    const close = async () => {
+      await act(async () => root.unmount());
+      container.remove();
+    };
+    return { handler, container, render, inputs, edit, close };
+  };
+
+  it("preserves edits across unchanged snapshots with new operation identities", async () => {
+    const fixture = bindingFixture();
+    try {
+      await fixture.render();
+      await fixture.edit("Edited");
+      await fixture.render();
+      await fixture.render();
+      expect(fixture.inputs().map((input) => input.value)).toEqual([
+        "Edited",
+        "Edited",
+      ]);
+    } finally {
+      await fixture.close();
+    }
+  });
+
+  it("preserves edits when the agent updates a different path", async () => {
+    const fixture = bindingFixture();
+    try {
+      await fixture.render();
+      await fixture.edit("Edited");
+      await fixture.render({ profile: { name: "Initial" }, other: "Remote" });
+      expect(fixture.inputs().map((input) => input.value)).toEqual([
+        "Edited",
+        "Edited",
+      ]);
+      expect(
+        fixture.container.querySelector('[data-aui="markdown"]')?.textContent,
+      ).toBe("Remote");
+    } finally {
+      await fixture.close();
+    }
+  });
+
+  it.each([
+    {
+      label: "array index",
+      path: "/names/0",
+      dataModel: { names: ["Initial", "Other"] },
+      incoming: { names: ["Initial", "Remote"] },
+    },
+    {
+      label: "escaped pointer",
+      path: "/profile/na~1me~0",
+      dataModel: { profile: { "na/me~": "Initial", other: "Other" } },
+      incoming: { profile: { "na/me~": "Initial", other: "Remote" } },
+    },
+    {
+      label: "missing data",
+      path: "/profile/name",
+      dataModel: null,
+      incoming: { other: "Remote" },
+    },
+    {
+      label: "template scope",
+      path: "name",
+      template: true,
+      dataModel: { items: [{ name: "Initial", other: "Other" }] },
+      incoming: { items: [{ name: "Initial", other: "Remote" }] },
+    },
+  ])(
+    "preserves edits at a $label during unrelated agent updates",
+    async ({ incoming, ...options }) => {
+      const fixture = bindingFixture(options);
+      try {
+        await fixture.render();
+        await fixture.edit("Edited");
+        await fixture.render(incoming);
+        expect(fixture.inputs().map((input) => input.value)).toEqual([
+          "Edited",
+          "Edited",
+        ]);
+        await act(async () =>
+          fixture.container.querySelector("button")!.click(),
+        );
+        expect(fixture.handler).toHaveBeenCalledWith({
+          payload: {
+            type: "a2ui:action",
+            name: "submit",
+            surfaceId: "s",
+            sourceComponentId: "submit",
+            context: { name: "Edited" },
+          },
+        });
+      } finally {
+        await fixture.close();
+      }
+    },
+  );
+
+  it("lets an agent change to the edited path win after unrelated updates", async () => {
+    const fixture = bindingFixture();
+    try {
+      await fixture.render();
+      await fixture.edit("Edited");
+      await fixture.render({ profile: { name: "Initial" }, other: "Remote" });
+      expect(fixture.inputs().map((input) => input.value)).toEqual([
+        "Edited",
+        "Edited",
+      ]);
+      await fixture.render({ profile: { name: "Agent" }, other: "Remote" });
+      expect(fixture.inputs().map((input) => input.value)).toEqual([
+        "Agent",
+        "Agent",
+      ]);
+      await fixture.edit("Again");
+      await fixture.render({ profile: { name: "Agent" }, other: "Remote" });
+      expect(fixture.inputs().map((input) => input.value)).toEqual([
+        "Again",
+        "Again",
+      ]);
+    } finally {
+      await fixture.close();
+    }
+  });
+
+  it.each([
+    { count: 1, customInput: false },
+    { count: 2, customInput: false },
+    { count: 1, customInput: true },
+    { count: 2, customInput: true },
+  ])(
+    "resolves a DOM-only edit through $field with $count bound inputs (custom: $customInput)",
+    async ({ count, customInput }) => {
+      const fixture = bindingFixture({ inputCount: count, customInput });
+      try {
+        await fixture.render();
+        await fixture.edit("Autofilled", false, count - 1);
+        await act(async () =>
+          fixture.container.querySelector("button")!.click(),
+        );
+        expect(fixture.handler).toHaveBeenCalledWith({
+          payload: {
+            type: "a2ui:action",
+            name: "submit",
+            surfaceId: "s",
+            sourceComponentId: "submit",
+            context: { name: "Autofilled" },
+          },
+        });
+      } finally {
+        await fixture.close();
+      }
+    },
+  );
+
+  it("renders bound input names without actions and retains button field references", async () => {
+    const fixture = bindingFixture();
+    try {
+      await fixture.render();
+      expect(fixture.inputs().map((input) => input.name)).toEqual([
+        "/profile/name",
+        "/profile/name",
+      ]);
+      expect(
+        fixture
+          .inputs()
+          .every((input) => !input.hasAttribute("data-aui-action")),
+      ).toBe(true);
+      expect(
+        JSON.parse(
+          fixture.container
+            .querySelector("button")!
+            .getAttribute("data-aui-action")!,
+        ),
+      ).toMatchObject({
+        context: { name: { $field: "/profile/name", fallback: "Initial" } },
+      });
+    } finally {
+      await fixture.close();
+    }
+  });
+
+  it("does not reevaluate unrelated function values while typing", async () => {
+    const fixture = bindingFixture();
+    try {
+      const before = evaluateValue.mock.calls.length;
+      await fixture.render();
+      expect(evaluateValue.mock.calls.length - before).toBe(2);
+      await fixture.edit("One");
+      await fixture.edit("Two");
+      expect(evaluateValue.mock.calls.length - before).toBe(2);
+      expect(fixture.inputs().map((input) => input.value)).toEqual([
+        "Two",
+        "Two",
+      ]);
+      expect(
+        fixture.container.querySelector('[data-aui="markdown"]')?.textContent,
+      ).toBe("Other");
+    } finally {
+      await fixture.close();
+    }
+  });
+
+  it("keeps choice arrays and slider focus while updating live bindings", async () => {
+    const handler = vi.fn();
+    const ui = new ClientGenUI({
+      library: defaultGenerativeUILibrary,
+      actions: createActionRegistry({ "a2ui:action": handler }),
+    });
+    const { state } = applyA2uiOperations(new Map(), [
+      {
+        version: "v1.0",
+        createSurface: {
+          surfaceId: "controls",
+          components: [
+            {
+              id: "root",
+              component: "Column",
+              children: ["plan", "volume", "submit"],
+            },
+            {
+              id: "plan",
+              component: "ChoicePicker",
+              value: { path: "/plan" },
+              options: [
+                { label: "Free", value: "free" },
+                { label: "Pro", value: "pro" },
+              ],
+            },
+            {
+              id: "volume",
+              component: "Slider",
+              min: 0,
+              max: 10,
+              steps: 10,
+              value: { path: "/volume" },
+            },
+            {
+              id: "submit",
+              component: "Button",
+              label: "Submit",
+              action: {
+                name: "submit",
+                context: {
+                  plan: { path: "/plan" },
+                  volume: { path: "/volume" },
+                },
+              },
+            },
+          ],
+          dataModel: { plan: ["free"], volume: 2 },
+        },
+      },
+    ]);
+    const surface = state.get("controls")!;
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+    try {
+      await act(async () => {
+        root.render(
+          (ui.present() as any).render({
+            args: convertSurfaceToUISpec(surface).spec,
+            status: { type: "complete" },
+            toolCallId: "a2ui:controls",
+            toolName: "present",
+            argsText: "",
+            artifact: { a2ui: surfaceToOperations(surface) },
+          }),
+        );
+      });
+      const pro =
+        container.querySelector<HTMLInputElement>('input[value="pro"]')!;
+      await act(async () => pro.click());
+      expect(pro.checked).toBe(true);
+      const slider = container.querySelector<HTMLInputElement>(
+        'input[type="range"]',
+      )!;
+      slider.focus();
+      await act(async () => {
+        Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value",
+        )!.set!.call(slider, "6");
+        slider.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+      expect(container.querySelector('input[type="range"]')).toBe(slider);
+      expect(document.activeElement).toBe(slider);
+      expect(slider.value).toBe("6");
+      expect(container.querySelector("output")?.textContent).toBe("6");
+      await act(async () => container.querySelector("button")!.click());
+      expect(handler).toHaveBeenCalledWith({
+        payload: {
+          type: "a2ui:action",
+          name: "submit",
+          surfaceId: "controls",
+          sourceComponentId: "submit",
+          context: { plan: ["pro"], volume: 6 },
+        },
+      });
+    } finally {
+      await act(async () => root.unmount());
+      container.remove();
+    }
+  });
+
+  it("keeps a continuous bound slider mounted as its value becomes an integer", async () => {
+    const ui = new ClientGenUI({ library: defaultGenerativeUILibrary });
+    const surface = applyA2uiOperations(new Map(), [
+      {
+        version: "v1.0",
+        createSurface: {
+          surfaceId: "slider",
+          components: [
+            {
+              id: "root",
+              component: "Slider",
+              min: 0,
+              max: 100,
+              value: { path: "/volume" },
+            },
+          ],
+          dataModel: { volume: 37.5 },
+        },
+      },
+    ]).state.get("slider")!;
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+    try {
+      await act(async () => {
+        root.render(
+          (ui.present() as any).render({
+            args: convertSurfaceToUISpec(surface).spec,
+            status: { type: "complete" },
+            toolCallId: "a2ui:slider",
+            artifact: { a2ui: surfaceToOperations(surface) },
+          }),
+        );
+      });
+      const slider = container.querySelector<HTMLInputElement>(
+        'input[type="range"]',
+      )!;
+      expect(slider.step).toBe("0.1");
+      slider.focus();
+      await act(async () => {
+        Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value",
+        )!.set!.call(slider, "40");
+        slider.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+      expect(container.querySelector('input[type="range"]')).toBe(slider);
+      expect(document.activeElement).toBe(slider);
+      expect(slider.value).toBe("40");
+      expect(slider.step).toBe("0.1");
+      expect(container.querySelector("output")?.textContent).toBe("40");
+    } finally {
+      await act(async () => root.unmount());
+      container.remove();
+    }
+  });
+
+  it("keeps A2UI bindings live while rendering a present surface", async () => {
+    const handler = vi.fn();
+    const ui = new ClientGenUI({
+      library: defaultGenerativeUILibrary,
+      actions: createActionRegistry({ "a2ui:action": handler }),
+    });
+    const { state } = applyA2uiOperations(new Map(), [
+      {
+        version: "v1.0",
+        createSurface: {
+          surfaceId: "s",
+          components: [
+            {
+              id: "root",
+              component: "Column",
+              children: ["first", "second", "preview", "derived", "submit"],
+            },
+            { id: "first", component: "TextField", text: { path: "/name" } },
+            { id: "second", component: "TextField", text: { path: "/name" } },
+            { id: "preview", component: "Text", text: { path: "/name" } },
+            {
+              id: "derived",
+              component: "Text",
+              text: {
+                call: "formatString",
+                args: { value: "Hello ${/name}" },
+              },
+            },
+            {
+              id: "submit",
+              component: "Button",
+              label: "Submit",
+              action: { name: "submit", context: { name: { path: "/name" } } },
+            },
+          ],
+          dataModel: { name: "Initial" },
+        },
+      },
+    ]);
+    const surface = state.get("s")!;
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+
+    try {
+      await act(async () => {
+        root.render(
+          (ui.present() as any).render({
+            args: convertSurfaceToUISpec(surface).spec,
+            status: { type: "complete" },
+            toolCallId: "a2ui:s",
+            toolName: "present",
+            argsText: "",
+            artifact: { a2ui: surfaceToOperations(surface) },
+          }),
+        );
+      });
+
+      const fields =
+        container.querySelectorAll<HTMLInputElement>('[data-aui="input"]');
+      expect([...fields].map((field) => field.value)).toEqual([
+        "Initial",
+        "Initial",
+      ]);
+
+      await act(async () => {
+        Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value",
+        )!.set!.call(fields[0]!, "Edited");
+        fields[0]!.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+
+      expect([...fields].map((field) => field.value)).toEqual([
+        "Edited",
+        "Edited",
+      ]);
+      expect(
+        container.querySelector('[data-aui="markdown"]')?.textContent,
+      ).toBe("Edited");
+      expect(
+        container.querySelectorAll('[data-aui="markdown"]')[1]?.textContent,
+      ).toBe("Hello Edited");
+
+      await act(async () => container.querySelector("button")!.click());
+
+      expect(handler).toHaveBeenCalledWith({
+        payload: {
+          type: "a2ui:action",
+          name: "submit",
+          surfaceId: "s",
+          sourceComponentId: "submit",
+          context: { name: "Edited" },
+        },
+      });
+
+      const remoteSurface = applyA2uiOperations(state, [
+        {
+          version: "v0.9",
+          updateDataModel: {
+            surfaceId: "s",
+            path: "/name",
+            contents: "Remote",
+          },
+        },
+      ]).state.get("s")!;
+      await act(async () => {
+        root.render(
+          (ui.present() as any).render({
+            args: convertSurfaceToUISpec(remoteSurface).spec,
+            status: { type: "complete" },
+            toolCallId: "a2ui:s",
+            toolName: "present",
+            argsText: "",
+            artifact: { a2ui: surfaceToOperations(remoteSurface) },
+          }),
+        );
+      });
+      expect([...fields].map((field) => field.value)).toEqual([
+        "Remote",
+        "Remote",
+      ]);
+    } finally {
+      await act(async () => root.unmount());
+      container.remove();
+    }
+  });
+});