@alquimia-ai/tools 2.2.0 → 2.4.0

package/dist/hooks/index.js

@@ -176,6 +176,32 @@ var AlquimiaSDK = class {
     this.attachments = [];
     return this;
   }
+  /**
+   * Complete a pending client-tool execution (the missing "submit half" of the
+   * client-tool loop). POSTs a {@link ToolExecutionResponse} to the runtime's
+   * `/event/tool-completion`. For interactive `render_ui` surfaces `result` is
+   * the user's data; for display-only surfaces the SDK sends `{ shown: true }`.
+   * The pending call is correlated by `control_id` in the body + the
+   * `context-metadata` header (taskid + sessionid).
+   */
+  async submitToolResult(response) {
+    const url = this.adapter.resolveToolCompletionUrl?.();
+    if (!url) {
+      throw new Error(
+        "AlquimiaSDK: adapter does not support tool completion (resolveToolCompletionUrl missing)"
+      );
+    }
+    const adapterHeaders = this.adapter.getHeaders?.() ?? {};
+    const headers = {
+      "Content-Type": "application/json",
+      assistantid: this.assistantId,
+      ...this.streamId && { taskid: this.streamId },
+      ...this.conversationId && { sessionid: this.conversationId },
+      ...this.userId && { userid: this.userId },
+      ...adapterHeaders
+    };
+    await this.axiosInstance.post(url, response, { headers });
+  }
   async generateImage(query) {
     if (!this.stableDiffusionProvider) {
       throw new Error("Stable Diffusion provider not initialized");
@@ -337,6 +363,9 @@ function mergeToolEvents(initial, toolEvents) {
     initial
   );
 }
+function resolveGenuiAllow(catalog, allow) {
+  return !allow || allow === "all" ? Object.keys(catalog.components) : allow;
+}
 
 // src/worklog/types.ts
 function initialWorklogState(taskId = null) {
@@ -498,6 +527,359 @@ function frameToRecord(frame) {
   };
 }
 
+// src/hooks/pending-client-tool.ts
+function extractPendingClientTool(frame) {
+  if (!frame || typeof frame !== "object") return null;
+  const f = frame;
+  if (f.event_class !== "ClientToolExecution") return null;
+  const name = f.data?.name;
+  const parameters = f.data?.parameters;
+  const controlId = f.control_id;
+  if (typeof name !== "string" || parameters === void 0 || typeof controlId !== "string") return null;
+  return { controlId, toolName: name, parameters };
+}
+
+// src/genui/style.ts
+var import_zod = require("zod");
+var TONES = ["default", "muted", "primary", "success", "warning", "danger"];
+var SIZES = ["sm", "md", "lg"];
+var EMPHASES = ["low", "medium", "high"];
+var ALIGNS = ["start", "center", "end"];
+var DENSITIES = ["compact", "comfortable"];
+var styleSchemaShape = {
+  tone: import_zod.z.enum(TONES).optional(),
+  size: import_zod.z.enum(SIZES).optional(),
+  emphasis: import_zod.z.enum(EMPHASES).optional(),
+  align: import_zod.z.enum(ALIGNS).optional(),
+  density: import_zod.z.enum(DENSITIES).optional()
+};
+
+// src/genui/registry.ts
+function resolveComponent(manifest, name) {
+  if (!name || typeof name !== "string") return null;
+  return manifest.components[name] ?? null;
+}
+
+// src/genui/catalog.ts
+var import_zod2 = require("zod");
+var CORE_CATALOG_ID = "https://alquimia.ai/catalogs/core/v1/catalog.json";
+var def = (name, own, opts) => ({
+  name,
+  schema: import_zod2.z.object({
+    ...styleSchemaShape,
+    ...opts?.variant ? { variant: import_zod2.z.enum(opts.variant).optional() } : {},
+    ...own
+  }).passthrough(),
+  allowedActions: opts?.allowedActions
+});
+var option = import_zod2.z.object({ label: import_zod2.z.string(), value: import_zod2.z.union([import_zod2.z.string(), import_zod2.z.number()]) });
+var coreCatalog = {
+  id: CORE_CATALOG_ID,
+  components: {
+    // ---- layout ----
+    Stack: def("Stack", {
+      direction: import_zod2.z.enum(["vertical", "horizontal"]).optional(),
+      gap: import_zod2.z.enum(["sm", "md", "lg"]).optional()
+    }),
+    Grid: def("Grid", {
+      columns: import_zod2.z.number().int().min(1).max(6).optional(),
+      gap: import_zod2.z.enum(["sm", "md", "lg"]).optional()
+    }),
+    Row: def("Row", { gap: import_zod2.z.enum(["sm", "md", "lg"]).optional(), wrap: import_zod2.z.boolean().optional() }),
+    Column: def("Column", { gap: import_zod2.z.enum(["sm", "md", "lg"]).optional() }),
+    Divider: def("Divider", { label: import_zod2.z.string().optional() }),
+    Spacer: def("Spacer", { size: import_zod2.z.enum(["sm", "md", "lg"]).optional() }),
+    Card: def("Card", { title: import_zod2.z.string().optional(), description: import_zod2.z.string().optional() }, {
+      variant: ["elevated", "outline", "ghost"]
+    }),
+    Accordion: def("Accordion", {
+      items: import_zod2.z.array(import_zod2.z.object({ title: import_zod2.z.string(), value: import_zod2.z.string() })).optional()
+    }),
+    Tabs: def("Tabs", { tabs: import_zod2.z.array(import_zod2.z.object({ label: import_zod2.z.string(), value: import_zod2.z.string() })).min(1) }),
+    // ---- content ----
+    Text: def("Text", { text: import_zod2.z.string() }, { variant: ["body", "muted", "caption", "lead"] }),
+    Heading: def("Heading", { text: import_zod2.z.string(), level: import_zod2.z.number().int().min(1).max(4).optional() }),
+    Markdown: def("Markdown", { text: import_zod2.z.string() }),
+    Image: def("Image", { src: import_zod2.z.string(), alt: import_zod2.z.string().optional() }),
+    Icon: def("Icon", { name: import_zod2.z.string() }),
+    Badge: def("Badge", { text: import_zod2.z.string() }, { variant: ["solid", "outline", "subtle"] }),
+    Avatar: def("Avatar", { src: import_zod2.z.string().optional(), fallback: import_zod2.z.string().optional() }),
+    Alert: def("Alert", { text: import_zod2.z.string(), title: import_zod2.z.string().optional() }, {
+      variant: ["info", "success", "warning", "danger"]
+    }),
+    Stat: def("Stat", { label: import_zod2.z.string(), value: import_zod2.z.union([import_zod2.z.string(), import_zod2.z.number()]), delta: import_zod2.z.string().optional() }),
+    KeyValue: def("KeyValue", {}),
+    List: def("List", { ordered: import_zod2.z.boolean().optional() }),
+    Quote: def("Quote", { text: import_zod2.z.string(), cite: import_zod2.z.string().optional() }),
+    // ---- inputs ----
+    TextField: def("TextField", { label: import_zod2.z.string().optional(), placeholder: import_zod2.z.string().optional() }),
+    TextArea: def("TextArea", {
+      label: import_zod2.z.string().optional(),
+      placeholder: import_zod2.z.string().optional(),
+      rows: import_zod2.z.number().int().optional()
+    }),
+    NumberField: def("NumberField", {
+      label: import_zod2.z.string().optional(),
+      min: import_zod2.z.number().optional(),
+      max: import_zod2.z.number().optional(),
+      step: import_zod2.z.number().optional()
+    }),
+    Select: def("Select", {
+      label: import_zod2.z.string().optional(),
+      placeholder: import_zod2.z.string().optional(),
+      options: import_zod2.z.array(option).min(1)
+    }),
+    MultiSelect: def("MultiSelect", { label: import_zod2.z.string().optional(), options: import_zod2.z.array(option).min(1) }),
+    Combobox: def("Combobox", {
+      label: import_zod2.z.string().optional(),
+      placeholder: import_zod2.z.string().optional(),
+      options: import_zod2.z.array(option).min(1)
+    }),
+    Checkbox: def("Checkbox", { label: import_zod2.z.string().optional() }),
+    CheckboxGroup: def("CheckboxGroup", { label: import_zod2.z.string().optional(), options: import_zod2.z.array(option).min(1) }),
+    Radio: def("Radio", { label: import_zod2.z.string().optional(), options: import_zod2.z.array(option).min(1) }),
+    Switch: def("Switch", { label: import_zod2.z.string().optional() }),
+    Slider: def("Slider", {
+      label: import_zod2.z.string().optional(),
+      min: import_zod2.z.number().optional(),
+      max: import_zod2.z.number().optional(),
+      step: import_zod2.z.number().optional()
+    }),
+    DatePicker: def("DatePicker", { label: import_zod2.z.string().optional() }),
+    DateRange: def("DateRange", { label: import_zod2.z.string().optional() }),
+    FileUpload: def("FileUpload", {
+      label: import_zod2.z.string().optional(),
+      accept: import_zod2.z.string().optional(),
+      multiple: import_zod2.z.boolean().optional()
+    }),
+    Rating: def("Rating", { label: import_zod2.z.string().optional(), max: import_zod2.z.number().int().optional() }),
+    // ---- data ----
+    Table: def("Table", {
+      columns: import_zod2.z.array(import_zod2.z.object({ key: import_zod2.z.string(), header: import_zod2.z.string().optional() })).min(1),
+      sortable: import_zod2.z.boolean().optional()
+    }, { allowedActions: ["sort", "filter"] }),
+    Chart: def("Chart", {
+      kind: import_zod2.z.enum(["bar", "line", "area", "pie"]),
+      x: import_zod2.z.string().optional(),
+      series: import_zod2.z.array(import_zod2.z.object({ key: import_zod2.z.string(), label: import_zod2.z.string().optional() })).min(1),
+      title: import_zod2.z.string().optional()
+    }),
+    Progress: def("Progress", { value: import_zod2.z.number(), max: import_zod2.z.number().optional(), label: import_zod2.z.string().optional() }),
+    Timeline: def("Timeline", {
+      items: import_zod2.z.array(import_zod2.z.object({ title: import_zod2.z.string(), description: import_zod2.z.string().optional(), timestamp: import_zod2.z.string().optional() })).min(1)
+    }),
+    // ---- actions ----
+    Button: def("Button", { text: import_zod2.z.string() }, {
+      variant: ["solid", "outline", "ghost", "link"],
+      allowedActions: ["submit", "cancel", "reset", "select", "confirm"]
+    }),
+    ButtonGroup: def("ButtonGroup", {}),
+    Link: def("Link", { text: import_zod2.z.string(), href: import_zod2.z.string().optional() })
+  }
+};
+
+// src/genui/actions.ts
+var DISMISS_ACTION = "userDismissedSurface";
+function buildDismissResult(surfaceId, userMessage) {
+  const said = typeof userMessage === "string" ? userMessage.trim() : "";
+  return {
+    action: DISMISS_ACTION,
+    surfaceId,
+    componentId: "",
+    data: {},
+    ...said ? { userMessage: said } : {}
+  };
+}
+function buildSurfaceResult(action) {
+  return {
+    action: action.action,
+    surfaceId: action.surfaceId,
+    componentId: action.componentId,
+    data: action.payload ?? {}
+  };
+}
+var URL_LIKE = /^\s*([a-z][a-z0-9+.-]*:|\/\/)/i;
+function assertSafeActionName(name) {
+  if (typeof name !== "string" || name.length === 0) {
+    throw new Error("action.name must be a non-empty string");
+  }
+  if (URL_LIKE.test(name)) {
+    throw new Error(`action.name must be a semantic name, not a URL: ${name}`);
+  }
+}
+
+// src/genui/validate.ts
+var import_zod3 = require("zod");
+var surfaceShape = import_zod3.z.object({
+  surfaceId: import_zod3.z.string().min(1),
+  // Tier 2 canonical id (versioned URI); `catalog` is the legacy alias. Both optional on the
+  // wire — the SDK stamps `catalogId` if the agent omits it.
+  catalogId: import_zod3.z.string().min(1).optional(),
+  catalog: import_zod3.z.string().min(1).optional(),
+  // Legacy explicit root. A2UI uses the component with id "root"; kept optional for back-compat.
+  root: import_zod3.z.string().min(1).optional(),
+  components: import_zod3.z.array(
+    import_zod3.z.object({
+      id: import_zod3.z.string().min(1),
+      component: import_zod3.z.string().min(1),
+      children: import_zod3.z.array(import_zod3.z.string()).optional(),
+      child: import_zod3.z.string().optional(),
+      binding: import_zod3.z.string().optional(),
+      action: import_zod3.z.object({ name: import_zod3.z.string(), wantResponse: import_zod3.z.boolean().optional() }).optional()
+    }).passthrough()
+  ),
+  dataModel: import_zod3.z.record(import_zod3.z.unknown()).optional()
+});
+var UAX31_ID = /^[\p{XID_Start}_][\p{XID_Continue}]*$/u;
+function validateProps(node, def2) {
+  const { id, component, children, child, binding, action, ...props } = node;
+  const parsed = def2.schema.safeParse(props);
+  if (parsed.success) return { ok: true, value: parsed.data, errors: [] };
+  return {
+    ok: false,
+    errors: parsed.error.issues.map((i) => ({ path: `${id}.${i.path.join(".")}`, message: i.message }))
+  };
+}
+function validateSurface(input, manifest) {
+  const shape = surfaceShape.safeParse(input);
+  if (!shape.success) {
+    return { ok: false, errors: shape.error.issues.map((i) => ({ path: i.path.join("."), message: i.message })) };
+  }
+  const surface = shape.data;
+  const errors = [];
+  const warnings = [];
+  const ids = new Set(surface.components.map((c) => c.id));
+  const rootId = ids.has("root") ? "root" : surface.root;
+  if (!rootId || !ids.has(rootId)) {
+    errors.push({ path: "root", message: `no root component (expected a component with id "root")` });
+  }
+  if (!surface.catalogId && !surface.catalog) {
+    warnings.push({ path: "catalogId", message: "surface has no catalogId (SDK will stamp the active catalog)" });
+  }
+  for (const node of surface.components) {
+    if (!UAX31_ID.test(node.id)) {
+      warnings.push({ path: node.id, message: `id "${node.id}" is not a valid UAX#31 identifier` });
+    }
+    const def2 = resolveComponent(manifest, node.component);
+    if (!def2) {
+      warnings.push({ path: node.id, message: `unknown component "${node.component}" (renders as text)` });
+      continue;
+    }
+    warnings.push(...validateProps(node, def2).errors);
+    for (const childId of node.children ?? []) {
+      if (!ids.has(childId)) {
+        warnings.push({ path: node.id, message: `child "${childId}" does not exist (skipped)` });
+      }
+    }
+    if (node.child && !ids.has(node.child)) {
+      warnings.push({ path: node.id, message: `child "${node.child}" does not exist (skipped)` });
+    }
+    if (node.action) {
+      try {
+        assertSafeActionName(node.action.name);
+      } catch (e) {
+        errors.push({ path: `${node.id}.action`, message: e.message });
+      }
+    }
+  }
+  return errors.length === 0 ? { ok: true, value: surface, errors: [], warnings } : { ok: false, errors, warnings };
+}
+
+// src/genui/tool-schema.ts
+var DESCRIPTION = 'Render a UI using A2UI. The arguments are a UI surface, NOT free-form. Shape: { surfaceId, root, components, dataModel? }. `components` is a FLAT array; every item is { id, component, children?, ...props } where `component` is one of the allowed names (use `component`, never `type`) and `children` is an array of string ids referencing other items (never nested objects). Inputs bind to the data model via `binding` (a JSON Pointer like "/name"). To collect input, include a Button with action { name, wantResponse: true } \u2014 its result (the data model) is returned to you; a surface with no such button is display-only. Example: { "surfaceId": "signup", "root": "root", "components": [ { "id": "root", "component": "Stack", "children": ["name", "desc", "submit"] }, { "id": "name", "component": "TextField", "label": "Username", "binding": "/name" }, { "id": "desc", "component": "TextField", "label": "Description", "binding": "/description" }, { "id": "submit", "component": "Button", "text": "Save", "action": { "name": "save", "wantResponse": true } } ], "dataModel": { "name": "", "description": "" } }. IMPORTANT: when you call render_ui, the rendered surface IS your reply \u2014 do NOT also reproduce its content as text, markdown, or ASCII. Any accompanying message must be a brief one-line intro at most, never a duplicate of the UI.';
+function buildRenderUiSchema(manifest, allowlist) {
+  const allowed = allowlist.filter((name) => name in manifest.components);
+  return {
+    title: "render_ui",
+    name: "render_ui",
+    description: DESCRIPTION,
+    type: "object",
+    properties: {
+      surfaceId: { type: "string" },
+      // A2UI catalog id — a versioned URI. `const` nudges the model to echo it; the SDK
+      // also stamps it if omitted, so the client always knows which catalog version to render.
+      catalogId: { type: "string", const: manifest.id },
+      catalog: { type: "string" },
+      // legacy alias (accepted, ignored)
+      root: { type: "string" },
+      // legacy explicit root (accepted; A2UI uses the id:"root" component)
+      components: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            id: { type: "string" },
+            component: { type: "string", enum: allowed },
+            children: { type: "array", items: { type: "string" } },
+            child: { type: "string" },
+            binding: { type: "string" },
+            action: {
+              type: "object",
+              properties: {
+                name: { type: "string" },
+                wantResponse: { type: "boolean" }
+              },
+              required: ["name"]
+            },
+            tone: { type: "string", enum: [...TONES] },
+            size: { type: "string", enum: [...SIZES] },
+            emphasis: { type: "string", enum: [...EMPHASES] },
+            align: { type: "string", enum: [...ALIGNS] },
+            density: { type: "string", enum: [...DENSITIES] },
+            variant: { type: "string" },
+            text: { type: "string" },
+            label: { type: "string" },
+            placeholder: { type: "string" },
+            title: { type: "string" },
+            direction: { type: "string" },
+            gap: { type: "string" },
+            // Data props for data components. Several are legitimately polymorphic across
+            // components — type them as their real unions so the runtime doesn't reject
+            // valid output (adapters normalize each shape):
+            //   data:    array (Chart/Table rows) | object (KeyValue)
+            //   rows:    array (Table)            | number (TextArea row count)
+            //   columns: array (Table col defs)   | number (Grid column count)
+            data: { type: ["array", "object"] },
+            rows: { type: ["array", "number"] },
+            items: { type: "array" },
+            // Accept string OR object items — models routinely emit the terse string
+            // form (e.g. series:["revenue"], options:["A","B"]); adapters normalize.
+            columns: { type: ["array", "number"], items: { type: ["object", "string"] } },
+            series: { type: "array", items: { type: ["object", "string"] } },
+            options: { type: "array", items: { type: ["object", "string"] } },
+            kind: { type: "string" },
+            x: { type: "string" },
+            value: {}
+          },
+          required: ["id", "component"]
+        }
+      },
+      dataModel: { type: "object" }
+    },
+    required: ["surfaceId", "root", "components"],
+    additionalProperties: false
+  };
+}
+
+// src/genui/clause.ts
+function buildGenuiClause(manifest, allowlist) {
+  const names = allowlist.filter((n) => n in manifest.components);
+  return [
+    "You can render UI by calling render_ui with an A2UI surface (a flat components array; each item is { id, component, children?, ...props }; component is one of the allowed names; children are string ids referencing other items).",
+    `Components: ${names.join(", ")}.`,
+    `Style each component via the semantic vocabulary (never CSS, colors, or HTML): tone (${TONES.join("/")}), size (${SIZES.join("/")}), emphasis (low/medium/high), align (start/center/end), density (compact/comfortable), plus a component-specific variant where offered.`,
+    "Data components MUST carry their data: Chart takes `data` (an array of row objects) + `series` (keys to plot) + `x` (the category key); Table takes `rows` (array of row objects) + `columns` ([{ key, header }] matching the row keys); List takes `items` (array); Stat takes `label`+`value`; KeyValue takes `data` (an object). Put the data inline on the component (or in dataModel referenced via `binding`).",
+    "To collect input, add a Button with an action { name, wantResponse: true }. You get back { action, surfaceId, componentId, data } \u2014 `data` is the collected data model and `componentId` is the id of the component that was acted on. A surface with no such button is display-only.",
+    "When you render several options to choose from (a grid of cards, each with its own button), give every option component a MEANINGFUL id (e.g. flight-NH107, hotel-memmo-alfama): `componentId` tells you which one the user picked, so never ask them to repeat a choice they already made.",
+    'The user may ignore an interactive surface and just type instead. You then receive action "userDismissedSurface" with their words in `userMessage` \u2014 treat it as their reply, answer it directly, and do not re-render the same surface or scold them for not using it.',
+    "IMPORTANT: the rendered surface IS your reply \u2014 do NOT reproduce its content as text, markdown, or ASCII; a one-line intro at most.",
+    "Prefer plain text for simple replies."
+  ].join(" ");
+}
+
+// src/genui/emit.ts
+var import_zod_to_json_schema = require("zod-to-json-schema");
+
 // src/hooks/alquimia.hook.tsx
 function useAlquimia(config) {
   const sdk = (0, import_react2.useMemo)(() => {
@@ -511,6 +893,15 @@ function useAlquimia(config) {
     if (config.providers?.logger) instance.withLoggerProvider(config.providers.logger);
     if (config.options?.userId) instance.withUserId(config.options.userId);
     if (config.options?.extraInstructions) instance.withExtraInstructions(config.options.extraInstructions);
+    if (config.genui && (config.genui.source ?? "client") === "client") {
+      const cat = config.genui.catalog ?? coreCatalog;
+      const allow = resolveGenuiAllow(cat, config.genui.allow);
+      instance.withTools([buildRenderUiSchema(cat, allow)]);
+      instance.withExtraInstructions({
+        ...config.options?.extraInstructions ?? {},
+        genui: buildGenuiClause(cat, allow)
+      });
+    }
     return instance;
   }, [config.assistantId, config.adapter]);
   const [input, setInput] = (0, import_react2.useState)("");
@@ -532,6 +923,23 @@ function useAlquimia(config) {
   );
   const [attachments, setAttachments] = (0, import_react2.useState)([]);
   const [isUploadingAttachments, setIsUploadingAttachments] = (0, import_react2.useState)(false);
+  const [pendingClientTool, setPendingClientTool] = (0, import_react2.useState)(null);
+  const completedToolsRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const genuiCatalog = config.genui?.catalog ?? coreCatalog;
+  const [genuiSurfaces, setGenuiSurfaces] = (0, import_react2.useState)([]);
+  const messagesLenRef = (0, import_react2.useRef)(0);
+  messagesLenRef.current = messages.length;
+  const genuiAnchorRef = (0, import_react2.useRef)(0);
+  {
+    let anchor = messages.length;
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].role === "user") {
+        anchor = i + 1;
+        break;
+      }
+    }
+    genuiAnchorRef.current = anchor;
+  }
   const isLoading = isMessageLoading || isStreamingLoading || isUploadingAttachments;
   function cleanMessages() {
     setMessages([]);
@@ -799,6 +1207,11 @@ function useAlquimia(config) {
     if (worklogEnabled) {
       setWorklog((prev) => reduceWorklog(prev ?? initialWorklogState(), frameToRecord(data)));
     }
+    const pending = extractPendingClientTool(data);
+    if (pending) {
+      setPendingClientTool(pending);
+      return;
+    }
     const eventTaskId = data.taskid || "";
     if (data.errors?.length) {
       for (const error of data.errors) {
@@ -828,9 +1241,106 @@ function useAlquimia(config) {
       cleanup(false, eventSource);
     }
   }
+  const completeToolExecution = (0, import_react2.useCallback)(
+    async (controlId, result) => {
+      if (completedToolsRef.current.has(controlId)) return;
+      completedToolsRef.current.add(controlId);
+      try {
+        await sdk.submitToolResult({ ...result, control_id: controlId });
+        setPendingClientTool((cur) => cur?.controlId === controlId ? null : cur);
+      } catch (err) {
+        completedToolsRef.current.delete(controlId);
+        throw err;
+      }
+    },
+    [sdk]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!config.genui) return;
+    if (!pendingClientTool || pendingClientTool.toolName !== "render_ui") return;
+    const { controlId } = pendingClientTool;
+    const parameters = pendingClientTool.parameters && typeof pendingClientTool.parameters === "object" ? { catalogId: genuiCatalog.id, ...pendingClientTool.parameters } : pendingClientTool.parameters;
+    const res = validateSurface(parameters, genuiCatalog);
+    if (!res.ok || !res.value) {
+      void completeToolExecution(controlId, {
+        control_id: controlId,
+        tool_name: "render_ui",
+        status: "error",
+        message: "Surface failed client validation: " + res.errors.map((e) => `${e.path} ${e.message}`).join("; "),
+        result: { errors: res.errors }
+      });
+      return;
+    }
+    const surface = res.value;
+    setGenuiSurfaces(
+      (prev) => prev.some((s) => s.controlId === controlId) ? prev : [...prev, { controlId, surface, afterCount: genuiAnchorRef.current }]
+    );
+    const interactive = surface.components.some((c) => c.action?.wantResponse === true);
+    if (!interactive) {
+      void completeToolExecution(controlId, {
+        control_id: controlId,
+        tool_name: "render_ui",
+        status: "success",
+        result: {
+          shown: true,
+          instruction: "The UI is rendered and visible to the user. Do NOT restate it as text/markdown/ASCII; reply with at most one short sentence."
+        }
+      });
+    }
+  }, [pendingClientTool, completeToolExecution, config.genui]);
+  const genuiOnAgentAction = (0, import_react2.useCallback)(
+    (controlId) => (action) => {
+      setGenuiSurfaces(
+        (prev) => prev.map((s) => s.controlId === controlId ? { ...s, submitted: true } : s)
+      );
+      void completeToolExecution(controlId, {
+        control_id: controlId,
+        tool_name: "render_ui",
+        status: "success",
+        // Includes componentId, so the agent can tell which element was acted on when
+        // several share one action name (a grid of option cards, say).
+        result: buildSurfaceResult(action)
+      });
+    },
+    [completeToolExecution]
+  );
+  const genuiDismiss = (0, import_react2.useCallback)(
+    (userMessage) => {
+      if (!pendingClientTool || pendingClientTool.toolName !== "render_ui") return;
+      const { controlId } = pendingClientTool;
+      const said = typeof userMessage === "string" ? userMessage.trim() : "";
+      const item = genuiSurfaces.find((s) => s.controlId === controlId);
+      setGenuiSurfaces(
+        (prev) => prev.map(
+          (s) => s.controlId === controlId ? { ...s, submitted: true, dismissedWith: said || void 0 } : s
+        )
+      );
+      if (said) setInput("");
+      void completeToolExecution(controlId, {
+        control_id: controlId,
+        tool_name: "render_ui",
+        status: "success",
+        result: buildDismissResult(item?.surface.surfaceId ?? "", said)
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pendingClientTool, genuiSurfaces, completeToolExecution]
+  );
+  const genuiAwaitingUser = !!(pendingClientTool && pendingClientTool.toolName === "render_ui" && genuiSurfaces.some(
+    (s) => s.controlId === pendingClientTool.controlId && s.surface.components.some((c) => c.action?.wantResponse === true)
+  ));
+  const genui = config.genui ? {
+    surfaces: genuiSurfaces,
+    onAgentAction: genuiOnAgentAction,
+    awaitingUser: genuiAwaitingUser,
+    dismiss: genuiDismiss
+  } : void 0;
   return {
     sdk,
     activeTool,
+    pendingClientTool,
+    completeToolExecution,
+    genui,
     cleanMessages,
     createMessageId,
     handleInputChange,