@wildo-ai/presets-components 1.1.3 → 1.1.5

package/dist/esm/components/ai-elements/decision/approval-argument-fields.js

@@ -0,0 +1,208 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckboxRoot, InputRoot, SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValue, TextareaRoot, } from '@wildo-ai/saas-frontend-lib';
+//===============================================================
+//  Approval argument fields (#587)
+//
+// A field editor over a gated tool call's arguments, generated from the tool's input-schema
+// descriptor, used by `AI_ApprovalRequest` when an approver edits the call.
+//
+// ## Why not the automated-form pipeline
+//
+// The issue pointed at `AutomatedForm`. It was checked against this surface and rejected on three
+// counts. Its default label resolution humanizes field names, while a tool's argument keys must
+// render VERBATIM — they carry no i18n entry, and turning `renameTodo` into "Rename Todo" is invented
+// display text. It owns a submit lifecycle, while an approval is decided by the Approve / Deny actions
+// beside it. And its field registry assumes a resource-aware form context an agent's tool does not
+// have. This surface needs something narrower — one control per argument, seeded from the proposed
+// call, reporting a value — so it is built from the same preset controls instead.
+//
+// ## A convenience, never the control
+//
+// The descriptor drops refinements (length, range, pattern) by construction, and nothing here
+// validates beyond "does this JSON parse". The server re-validates the edit against the tool's live
+// schema and refuses a violation with a message naming the argument; that refusal is what protects
+// the call.
+//
+// ## Anything a field cannot express is edited as JSON, per argument
+//
+// Lists, records, unions, dates and unknown shapes each keep a small JSON editor of their own, so one
+// awkward argument never forces the whole call back into a blob — and a descriptor with nothing a
+// field can express is not offered as fields at all (see `fieldsEditableArgumentsSchema`).
+//===============================================================
+/** Which editor an approver is authoring a call in. */
+export var ApprovalArgumentEditorMode;
+(function (ApprovalArgumentEditorMode) {
+    /** One field per argument, generated from the tool's input-schema descriptor. */
+    ApprovalArgumentEditorMode["FIELDS"] = "fields";
+    /** The arguments as one JSON object — always reachable, and the fallback for shapes fields cannot express. */
+    ApprovalArgumentEditorMode["JSON"] = "json";
+})(ApprovalArgumentEditorMode || (ApprovalArgumentEditorMode = {}));
+/** How one argument is edited. A closed vocabulary: the editor switches on it exhaustively. */
+export var ApprovalArgumentEditorKind;
+(function (ApprovalArgumentEditorKind) {
+    /** A free-text string. */
+    ApprovalArgumentEditorKind["TEXT"] = "text";
+    /** A number. */
+    ApprovalArgumentEditorKind["NUMBER"] = "number";
+    /** A boolean. */
+    ApprovalArgumentEditorKind["BOOLEAN"] = "boolean";
+    /** One of a fixed set of string values — an enum, or a string literal. */
+    ApprovalArgumentEditorKind["CHOICE"] = "choice";
+    /** A nested object, edited as a group of its own arguments. */
+    ApprovalArgumentEditorKind["GROUP"] = "group";
+    /** Any shape a single field cannot express — edited as that argument's own JSON text. */
+    ApprovalArgumentEditorKind["JSON"] = "json";
+})(ApprovalArgumentEditorKind || (ApprovalArgumentEditorKind = {}));
+/**
+ * The editor for one argument's descriptor.
+ *
+ * semantic-literal-boundary: `SerializableZodSchema.type` is a type-level union declared by
+ * `@wildo-ai/zod-decorators` with no runtime enum to compare against; this switch is where that
+ * external vocabulary is translated into {@link ApprovalArgumentEditorKind}.
+ */
+export function classifyArgumentDescriptor(descriptor) {
+    switch (descriptor.type) {
+        case "string":
+            return ApprovalArgumentEditorKind.TEXT;
+        case "number":
+            return ApprovalArgumentEditorKind.NUMBER;
+        case "boolean":
+            return ApprovalArgumentEditorKind.BOOLEAN;
+        case "enum":
+            return ApprovalArgumentEditorKind.CHOICE;
+        case "literal":
+            return typeof descriptor.value === "string" ? ApprovalArgumentEditorKind.CHOICE : ApprovalArgumentEditorKind.JSON;
+        case "object":
+            return ApprovalArgumentEditorKind.GROUP;
+        default:
+            return ApprovalArgumentEditorKind.JSON;
+    }
+}
+/**
+ * The descriptor as fields, or `undefined` when fields would add nothing.
+ *
+ * Fields are offered only for an OBJECT whose properties include at least one argument a field can
+ * express. A root that is not an object, or an object made only of JSON-edited shapes, would be a JSON
+ * editor wearing a form's clothes — the raw editor is the honest answer there.
+ */
+export function fieldsEditableArgumentsSchema(descriptor) {
+    if (!descriptor || typeof descriptor !== "object")
+        return undefined;
+    const candidate = descriptor;
+    if (candidate.type !== "object" || !candidate.properties || typeof candidate.properties !== "object")
+        return undefined;
+    const offersAField = Object.values(candidate.properties)
+        .some((property) => classifyArgumentDescriptor(property) !== ApprovalArgumentEditorKind.JSON);
+    return offersAField ? candidate : undefined;
+}
+function readAtPath(value, path) {
+    return path.reduce((current, key) => (current !== null && typeof current === "object" ? current[key] : undefined), value);
+}
+/** Immutable write; writing `undefined` REMOVES the argument, because an omitted argument and an empty one differ. */
+function writeAtPath(value, path, next) {
+    const [head, ...rest] = path;
+    if (head === undefined)
+        return value;
+    const copy = { ...value };
+    if (rest.length === 0) {
+        if (next === undefined)
+            delete copy[head];
+        else
+            copy[head] = next;
+        return copy;
+    }
+    const child = copy[head];
+    copy[head] = writeAtPath(child !== null && typeof child === "object" && !Array.isArray(child) ? child : {}, rest, next);
+    return copy;
+}
+const draftKeyOf = (path) => JSON.stringify(path);
+function collectJsonPaths(schema, prefix = []) {
+    return Object.entries(schema.properties).flatMap(([key, child]) => {
+        const path = [...prefix, key];
+        const kind = classifyArgumentDescriptor(child);
+        if (kind === ApprovalArgumentEditorKind.GROUP)
+            return collectJsonPaths(child, path);
+        return kind === ApprovalArgumentEditorKind.JSON ? [path] : [];
+    });
+}
+/**
+ * The arguments the approver has AUTHORED: the field values, with every JSON-edited argument parsed
+ * back in. `value` is `undefined` whenever any of those texts does not parse — the approval must not be
+ * submittable then, or it would silently send the model's value for an argument the approver believes
+ * they changed. An emptied JSON text omits that argument.
+ */
+export function composeEditedArguments(schema, values, jsonDrafts) {
+    let composed = values;
+    const invalidDraftKeys = [];
+    for (const path of collectJsonPaths(schema)) {
+        const key = draftKeyOf(path);
+        const draft = jsonDrafts[key];
+        if (draft === undefined)
+            continue;
+        if (draft.trim() === "") {
+            composed = writeAtPath(composed, path, undefined);
+            continue;
+        }
+        try {
+            composed = writeAtPath(composed, path, JSON.parse(draft));
+        }
+        catch {
+            invalidDraftKeys.push(key);
+        }
+    }
+    return { value: invalidDraftKeys.length > 0 ? undefined : composed, invalidDraftKeys };
+}
+export function ApprovalArgumentFields({ schema, initialValue, disabled, invalidJsonMessage, onChange, }) {
+    const [values, setValues] = React.useState(initialValue);
+    const [jsonDrafts, setJsonDrafts] = React.useState(() => Object.fromEntries(collectJsonPaths(schema).map((path) => {
+        const current = readAtPath(initialValue, path);
+        return [draftKeyOf(path), current === undefined ? "" : JSON.stringify(current, null, 2)];
+    })));
+    const composed = React.useMemo(() => composeEditedArguments(schema, values, jsonDrafts), [schema, values, jsonDrafts]);
+    // Held in a ref so a parent that does not memoize its handler cannot turn this report into a render loop.
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
+    React.useEffect(() => {
+        onChangeRef.current({ value: composed.value, invalid: composed.invalidDraftKeys.length > 0 });
+    }, [composed]);
+    const renderGroup = (group, prefix) => Object.entries(group.properties).map(([key, descriptor]) => {
+        const path = [...prefix, key];
+        const id = `approval-argument-${path.join("-")}`;
+        const required = !descriptor.optional && !descriptor.nullable;
+        const current = readAtPath(values, path);
+        const set = (next) => setValues((previous) => writeAtPath(previous, path, next));
+        // Keys render VERBATIM: they are the tool's own parameter names and carry no i18n entry.
+        const label = _jsx("label", { htmlFor: id, className: "font-mono text-2xs text-muted-foreground", children: key });
+        const kind = classifyArgumentDescriptor(descriptor);
+        switch (kind) {
+            case ApprovalArgumentEditorKind.TEXT:
+                return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [label, _jsx(InputRoot, { id: id, value: typeof current === "string" ? current : "", required: required, disabled: disabled, className: "font-mono text-2xs", 
+                            // Emptying an OPTIONAL string omits it; a required one stays an empty string, which the
+                            // server's validation then names if the tool refuses it.
+                            onChange: (event) => set(event.target.value === "" && !required ? undefined : event.target.value) })] }, id));
+            case ApprovalArgumentEditorKind.NUMBER:
+                return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [label, _jsx(InputRoot, { id: id, type: "number", value: typeof current === "number" ? String(current) : "", required: required, disabled: disabled, className: "font-mono text-2xs", onChange: (event) => set(event.target.value === "" ? undefined : Number(event.target.value)) })] }, id));
+            case ApprovalArgumentEditorKind.BOOLEAN:
+                return (_jsxs("div", { className: "flex items-center gap-element", children: [_jsx(CheckboxRoot, { id: id, checked: current === true, disabled: disabled, onCheckedChange: (checked) => set(checked === true) }), label] }, id));
+            case ApprovalArgumentEditorKind.CHOICE: {
+                // The values are the tool's own identifiers and render as authored, for the same reason as the keys.
+                const options = descriptor.type === "enum" ? descriptor.values : [String(descriptor.value)];
+                return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [label, _jsxs(SelectRoot, { value: typeof current === "string" ? current : undefined, onValueChange: (next) => set(next), disabled: disabled, required: required, children: [_jsx(SelectTrigger, { id: id, className: "font-mono text-2xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: options.map((option) => (_jsx(SelectItem, { value: option, children: option }, option))) })] })] }, id));
+            }
+            case ApprovalArgumentEditorKind.GROUP:
+                return (_jsxs("fieldset", { className: "flex min-w-0 flex-col gap-element rounded-md border p-2", children: [_jsx("legend", { className: "font-mono text-2xs text-muted-foreground", children: key }), renderGroup(descriptor, path)] }, id));
+            case ApprovalArgumentEditorKind.JSON: {
+                const draftKey = draftKeyOf(path);
+                const invalid = composed.invalidDraftKeys.includes(draftKey);
+                return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [label, _jsx(TextareaRoot, { id: id, rows: 3, value: jsonDrafts[draftKey] ?? "", disabled: disabled, className: "font-mono text-2xs", "aria-invalid": invalid || undefined, onChange: (event) => {
+                                const text = event.target.value;
+                                setJsonDrafts((previous) => ({ ...previous, [draftKey]: text }));
+                            } }), invalid && _jsx("span", { className: "text-2xs text-destructive", children: invalidJsonMessage })] }, id));
+            }
+        }
+    });
+    return _jsx("div", { className: "flex flex-col gap-element", children: renderGroup(schema, []) });
+}
+//# sourceMappingURL=approval-argument-fields.js.map

package/dist/esm/components/ai-elements/decision/approval-argument-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"approval-argument-fields.js","sourceRoot":"","sources":["../../../../../../src/components/ai-elements/decision/approval-argument-fields.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CheckboxRoot,\n  InputRoot,\n  SelectContent,\n  SelectItem,\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n  TextareaRoot,\n} from '@wildo-ai/saas-frontend-lib';\nimport type { SerializableZodSchema } from '@wildo-ai/zod-decorators';\n\n//===============================================================\n//  Approval argument fields (#587)\n//\n// A field editor over a gated tool call's arguments, generated from the tool's input-schema\n// descriptor, used by `AI_ApprovalRequest` when an approver edits the call.\n//\n// ## Why not the automated-form pipeline\n//\n// The issue pointed at `AutomatedForm`. It was checked against this surface and rejected on three\n// counts. Its default label resolution humanizes field names, while a tool's argument keys must\n// render VERBATIM — they carry no i18n entry, and turning `renameTodo` into \"Rename Todo\" is invented\n// display text. It owns a submit lifecycle, while an approval is decided by the Approve / Deny actions\n// beside it. And its field registry assumes a resource-aware form context an agent's tool does not\n// have. This surface needs something narrower — one control per argument, seeded from the proposed\n// call, reporting a value — so it is built from the same preset controls instead.\n//\n// ## A convenience, never the control\n//\n// The descriptor drops refinements (length, range, pattern) by construction, and nothing here\n// validates beyond \"does this JSON parse\". The server re-validates the edit against the tool's live\n// schema and refuses a violation with a message naming the argument; that refusal is what protects\n// the call.\n//\n// ## Anything a field cannot express is edited as JSON, per argument\n//\n// Lists, records, unions, dates and unknown shapes each keep a small JSON editor of their own, so one\n// awkward argument never forces the whole call back into a blob — and a descriptor with nothing a\n// field can express is not offered as fields at all (see `fieldsEditableArgumentsSchema`).\n//===============================================================\n\n/** Which editor an approver is authoring a call in. */\nexport enum ApprovalArgumentEditorMode {\n  /** One field per argument, generated from the tool's input-schema descriptor. */\n  FIELDS = \"fields\",\n  /** The arguments as one JSON object — always reachable, and the fallback for shapes fields cannot express. */\n  JSON = \"json\",\n}\n\n/** How one argument is edited. A closed vocabulary: the editor switches on it exhaustively. */\nexport enum ApprovalArgumentEditorKind {\n  /** A free-text string. */\n  TEXT = \"text\",\n  /** A number. */\n  NUMBER = \"number\",\n  /** A boolean. */\n  BOOLEAN = \"boolean\",\n  /** One of a fixed set of string values — an enum, or a string literal. */\n  CHOICE = \"choice\",\n  /** A nested object, edited as a group of its own arguments. */\n  GROUP = \"group\",\n  /** Any shape a single field cannot express — edited as that argument's own JSON text. */\n  JSON = \"json\",\n}\n\nexport type ApprovalArgumentsObjectDescriptor = Extract<SerializableZodSchema, { type: \"object\" }>;\ntype ArgumentPath = readonly string[];\n\n/**\n * The editor for one argument's descriptor.\n *\n * semantic-literal-boundary: `SerializableZodSchema.type` is a type-level union declared by\n * `@wildo-ai/zod-decorators` with no runtime enum to compare against; this switch is where that\n * external vocabulary is translated into {@link ApprovalArgumentEditorKind}.\n */\nexport function classifyArgumentDescriptor(descriptor: SerializableZodSchema): ApprovalArgumentEditorKind {\n  switch (descriptor.type) {\n    case \"string\":\n      return ApprovalArgumentEditorKind.TEXT;\n    case \"number\":\n      return ApprovalArgumentEditorKind.NUMBER;\n    case \"boolean\":\n      return ApprovalArgumentEditorKind.BOOLEAN;\n    case \"enum\":\n      return ApprovalArgumentEditorKind.CHOICE;\n    case \"literal\":\n      return typeof descriptor.value === \"string\" ? ApprovalArgumentEditorKind.CHOICE : ApprovalArgumentEditorKind.JSON;\n    case \"object\":\n      return ApprovalArgumentEditorKind.GROUP;\n    default:\n      return ApprovalArgumentEditorKind.JSON;\n  }\n}\n\n/**\n * The descriptor as fields, or `undefined` when fields would add nothing.\n *\n * Fields are offered only for an OBJECT whose properties include at least one argument a field can\n * express. A root that is not an object, or an object made only of JSON-edited shapes, would be a JSON\n * editor wearing a form's clothes — the raw editor is the honest answer there.\n */\nexport function fieldsEditableArgumentsSchema(descriptor: unknown): ApprovalArgumentsObjectDescriptor | undefined {\n  if (!descriptor || typeof descriptor !== \"object\") return undefined;\n  const candidate = descriptor as SerializableZodSchema;\n  if (candidate.type !== \"object\" || !candidate.properties || typeof candidate.properties !== \"object\") return undefined;\n  const offersAField = Object.values(candidate.properties)\n    .some((property) => classifyArgumentDescriptor(property) !== ApprovalArgumentEditorKind.JSON);\n  return offersAField ? candidate : undefined;\n}\n\nfunction readAtPath(value: unknown, path: ArgumentPath): unknown {\n  return path.reduce<unknown>(\n    (current, key) => (current !== null && typeof current === \"object\" ? (current as Record<string, unknown>)[key] : undefined),\n    value,\n  );\n}\n\n/** Immutable write; writing `undefined` REMOVES the argument, because an omitted argument and an empty one differ. */\nfunction writeAtPath(value: Record<string, unknown>, path: ArgumentPath, next: unknown): Record<string, unknown> {\n  const [head, ...rest] = path;\n  if (head === undefined) return value;\n  const copy: Record<string, unknown> = { ...value };\n  if (rest.length === 0) {\n    if (next === undefined) delete copy[head];\n    else copy[head] = next;\n    return copy;\n  }\n  const child = copy[head];\n  copy[head] = writeAtPath(\n    child !== null && typeof child === \"object\" && !Array.isArray(child) ? (child as Record<string, unknown>) : {},\n    rest,\n    next,\n  );\n  return copy;\n}\n\nconst draftKeyOf = (path: ArgumentPath): string => JSON.stringify(path);\n\nfunction collectJsonPaths(schema: ApprovalArgumentsObjectDescriptor, prefix: ArgumentPath = []): ArgumentPath[] {\n  return Object.entries(schema.properties).flatMap(([key, child]) => {\n    const path = [...prefix, key];\n    const kind = classifyArgumentDescriptor(child);\n    if (kind === ApprovalArgumentEditorKind.GROUP) return collectJsonPaths(child as ApprovalArgumentsObjectDescriptor, path);\n    return kind === ApprovalArgumentEditorKind.JSON ? [path] : [];\n  });\n}\n\n/**\n * The arguments the approver has AUTHORED: the field values, with every JSON-edited argument parsed\n * back in. `value` is `undefined` whenever any of those texts does not parse — the approval must not be\n * submittable then, or it would silently send the model's value for an argument the approver believes\n * they changed. An emptied JSON text omits that argument.\n */\nexport function composeEditedArguments(\n  schema: ApprovalArgumentsObjectDescriptor,\n  values: Record<string, unknown>,\n  jsonDrafts: Readonly<Record<string, string>>,\n): { value: Record<string, unknown> | undefined; invalidDraftKeys: readonly string[] } {\n  let composed = values;\n  const invalidDraftKeys: string[] = [];\n  for (const path of collectJsonPaths(schema)) {\n    const key = draftKeyOf(path);\n    const draft = jsonDrafts[key];\n    if (draft === undefined) continue;\n    if (draft.trim() === \"\") {\n      composed = writeAtPath(composed, path, undefined);\n      continue;\n    }\n    try {\n      composed = writeAtPath(composed, path, JSON.parse(draft) as unknown);\n    } catch {\n      invalidDraftKeys.push(key);\n    }\n  }\n  return { value: invalidDraftKeys.length > 0 ? undefined : composed, invalidDraftKeys };\n}\n\nexport type ApprovalArgumentFieldsProps = {\n  schema: ApprovalArgumentsObjectDescriptor;\n  /** The arguments to start from — so the approver changes one value rather than retyping the call. */\n  initialValue: Record<string, unknown>;\n  disabled?: boolean;\n  /** Shown under a JSON-edited argument whose text does not parse. */\n  invalidJsonMessage: string;\n  /** Called with the authored arguments whenever they change; `invalid` while any JSON text does not parse. */\n  onChange: (next: { value: Record<string, unknown> | undefined; invalid: boolean }) => void;\n};\n\nexport function ApprovalArgumentFields({\n  schema,\n  initialValue,\n  disabled,\n  invalidJsonMessage,\n  onChange,\n}: ApprovalArgumentFieldsProps): React.JSX.Element {\n  const [values, setValues] = React.useState<Record<string, unknown>>(initialValue);\n  const [jsonDrafts, setJsonDrafts] = React.useState<Record<string, string>>(() =>\n    Object.fromEntries(collectJsonPaths(schema).map((path) => {\n      const current = readAtPath(initialValue, path);\n      return [draftKeyOf(path), current === undefined ? \"\" : JSON.stringify(current, null, 2)];\n    })),\n  );\n  const composed = React.useMemo(() => composeEditedArguments(schema, values, jsonDrafts), [schema, values, jsonDrafts]);\n\n  // Held in a ref so a parent that does not memoize its handler cannot turn this report into a render loop.\n  const onChangeRef = React.useRef(onChange);\n  onChangeRef.current = onChange;\n  React.useEffect(() => {\n    onChangeRef.current({ value: composed.value, invalid: composed.invalidDraftKeys.length > 0 });\n  }, [composed]);\n\n  const renderGroup = (group: ApprovalArgumentsObjectDescriptor, prefix: ArgumentPath): React.ReactNode =>\n    Object.entries(group.properties).map(([key, descriptor]) => {\n      const path = [...prefix, key];\n      const id = `approval-argument-${path.join(\"-\")}`;\n      const required = !descriptor.optional && !descriptor.nullable;\n      const current = readAtPath(values, path);\n      const set = (next: unknown): void => setValues((previous) => writeAtPath(previous, path, next));\n      // Keys render VERBATIM: they are the tool's own parameter names and carry no i18n entry.\n      const label = <label htmlFor={id} className=\"font-mono text-2xs text-muted-foreground\">{key}</label>;\n      const kind = classifyArgumentDescriptor(descriptor);\n\n      switch (kind) {\n        case ApprovalArgumentEditorKind.TEXT:\n          return (\n            <div key={id} className=\"flex flex-col gap-0.5\">\n              {label}\n              <InputRoot\n                id={id}\n                value={typeof current === \"string\" ? current : \"\"}\n                required={required}\n                disabled={disabled}\n                className=\"font-mono text-2xs\"\n                // Emptying an OPTIONAL string omits it; a required one stays an empty string, which the\n                // server's validation then names if the tool refuses it.\n                onChange={(event) => set(event.target.value === \"\" && !required ? undefined : event.target.value)}\n              />\n            </div>\n          );\n        case ApprovalArgumentEditorKind.NUMBER:\n          return (\n            <div key={id} className=\"flex flex-col gap-0.5\">\n              {label}\n              <InputRoot\n                id={id}\n                type=\"number\"\n                value={typeof current === \"number\" ? String(current) : \"\"}\n                required={required}\n                disabled={disabled}\n                className=\"font-mono text-2xs\"\n                onChange={(event) => set(event.target.value === \"\" ? undefined : Number(event.target.value))}\n              />\n            </div>\n          );\n        case ApprovalArgumentEditorKind.BOOLEAN:\n          return (\n            <div key={id} className=\"flex items-center gap-element\">\n              <CheckboxRoot\n                id={id}\n                checked={current === true}\n                disabled={disabled}\n                onCheckedChange={(checked) => set(checked === true)}\n              />\n              {label}\n            </div>\n          );\n        case ApprovalArgumentEditorKind.CHOICE: {\n          // The values are the tool's own identifiers and render as authored, for the same reason as the keys.\n          const options = descriptor.type === \"enum\" ? descriptor.values : [String((descriptor as { value: unknown }).value)];\n          return (\n            <div key={id} className=\"flex flex-col gap-0.5\">\n              {label}\n              <SelectRoot\n                value={typeof current === \"string\" ? current : undefined}\n                onValueChange={(next) => set(next)}\n                disabled={disabled}\n                required={required}\n              >\n                <SelectTrigger id={id} className=\"font-mono text-2xs\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  {options.map((option) => (\n                    <SelectItem key={option} value={option}>{option}</SelectItem>\n                  ))}\n                </SelectContent>\n              </SelectRoot>\n            </div>\n          );\n        }\n        case ApprovalArgumentEditorKind.GROUP:\n          return (\n            <fieldset key={id} className=\"flex min-w-0 flex-col gap-element rounded-md border p-2\">\n              <legend className=\"font-mono text-2xs text-muted-foreground\">{key}</legend>\n              {renderGroup(descriptor as ApprovalArgumentsObjectDescriptor, path)}\n            </fieldset>\n          );\n        case ApprovalArgumentEditorKind.JSON: {\n          const draftKey = draftKeyOf(path);\n          const invalid = composed.invalidDraftKeys.includes(draftKey);\n          return (\n            <div key={id} className=\"flex flex-col gap-0.5\">\n              {label}\n              <TextareaRoot\n                id={id}\n                rows={3}\n                value={jsonDrafts[draftKey] ?? \"\"}\n                disabled={disabled}\n                className=\"font-mono text-2xs\"\n                aria-invalid={invalid || undefined}\n                onChange={(event) => {\n                  const text = event.target.value;\n                  setJsonDrafts((previous) => ({ ...previous, [draftKey]: text }));\n                }}\n              />\n              {invalid && <span className=\"text-2xs text-destructive\">{invalidJsonMessage}</span>}\n            </div>\n          );\n        }\n      }\n    });\n\n  return <div className=\"flex flex-col gap-element\">{renderGroup(schema, [])}</div>;\n}\n"]}

package/dist/esm/components/ai-elements/decision/approval.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Alert } from '@wildo-ai/saas-frontend-lib';
+import type { SerializableZodSchema } from '@wildo-ai/zod-decorators';
 import type { ComponentProps } from "react";
 export type AI_ApprovalRequestProps = ComponentProps<typeof Alert> & {
     approvalId: string;
@@ -24,23 +25,54 @@ export type AI_ApprovalRequestProps = ComponentProps<typeof Alert> & {
      */
     toolName?: string;
     executionContext?: Record<string, unknown>;
-    onApprove?: (approvalId: string, comment?: string) => void;
+    /**
+     * Offer the approver an EDITOR over the proposed arguments (#566).
+     *
+     * Off by default, and it is not a styling preference: turning it on changes what an approval MEANS
+     * — the approver stops assenting to the agent's call and starts authoring one. A surface that
+     * shows the editor must be wired to a decision path that carries the result, or it collects a
+     * change and drops it, which is the failure #537 refused to ship.
+     *
+     * The editor offers the tool's FIELDS when `argumentsSchema` describes a shape they can express
+     * (#587), and raw JSON otherwise; the raw editor stays one click away in both cases. Neither is the
+     * control: the server re-validates the edit against the tool's live schema and refuses a violation
+     * with a readable message, which is why a field editor that drops refinements is still honest.
+     */
+    allowArgumentModification?: boolean;
+    /** The gated tool's input-schema descriptor (#587). Absent, or a shape fields cannot express, means raw JSON. */
+    argumentsSchema?: SerializableZodSchema;
+    /**
+     * Why the last submitted edit was refused (#587), as LOCALIZED text. The approval is still pending: the
+     * editor reopens on the refused arguments and shows this reason beside them. The engine wrapper renders it
+     * from the approval's own labels, one per refusal reason, naming the tool and the offending arguments
+     * (#1186) — a direct consumer must pass words the reader can read, never a server's sentence.
+     */
+    argumentModificationError?: string;
+    /** What the approver submitted when that edit was refused (#587) — the reopened editor starts from it. */
+    rejectedArguments?: Record<string, unknown>;
+    /**
+     * `modifiedToolArgs` is present only when the approver EDITED the arguments. Absent means "run the
+     * call as proposed", which is what every approval meant before this parameter existed.
+     */
+    onApprove?: (approvalId: string, comment?: string, modifiedToolArgs?: Record<string, unknown>) => void;
     onDeny?: (approvalId: string, comment?: string) => void;
     onEscalate?: (approvalId: string, comment?: string) => void;
     isProcessing?: boolean;
     createdAt?: Date;
 };
-export declare const AI_ApprovalRequest: ({ approvalId, actionDescription, riskLevel, executionId, systemRef, expiresAt, requiredRoles, toolName, executionContext, onApprove, onDeny, onEscalate, isProcessing, createdAt, className, ...props }: AI_ApprovalRequestProps) => React.JSX.Element | null;
+export declare const AI_ApprovalRequest: ({ approvalId, actionDescription, riskLevel, executionId, systemRef, expiresAt, requiredRoles, toolName, executionContext, allowArgumentModification, argumentsSchema, argumentModificationError, rejectedArguments, onApprove, onDeny, onEscalate, isProcessing, createdAt, className, ...props }: AI_ApprovalRequestProps) => React.JSX.Element | null;
 export type AI_ApprovalActionsProps = ComponentProps<"div"> & {
     approvalId: string;
     riskLevel?: "low" | "medium" | "high" | "critical";
-    onApprove?: (approvalId: string, comment?: string) => void;
+    /** Present only while the approver has the argument editor open with a parseable draft (#566). */
+    modifiedToolArgs?: Record<string, unknown>;
+    onApprove?: (approvalId: string, comment?: string, modifiedToolArgs?: Record<string, unknown>) => void;
     onDeny?: (approvalId: string, comment?: string) => void;
     onEscalate?: (approvalId: string, comment?: string) => void;
     isProcessing?: boolean;
     disabled?: boolean;
 };
-export declare const AI_ApprovalActions: ({ approvalId, riskLevel, onApprove, onDeny, onEscalate, isProcessing, disabled, className, ...props }: AI_ApprovalActionsProps) => React.JSX.Element | null;
+export declare const AI_ApprovalActions: ({ approvalId, riskLevel, modifiedToolArgs, onApprove, onDeny, onEscalate, isProcessing, disabled, className, ...props }: AI_ApprovalActionsProps) => React.JSX.Element | null;
 export type AI_ApprovalQueueItem = {
     approvalId: string;
     executionId: string;

package/dist/esm/components/ai-elements/decision/approval.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"approval.d.ts","sourceRoot":"","sources":["../../../../../src/components/ai-elements/decision/approval.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"approval.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ai-elements/decision/approval.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/ai-elements/decision/approval.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, ButtonVariants_Variant, ScrollArea, TextareaRoot, cn, useI18n, Surface, } from '@wildo-ai/saas-frontend-lib';
 import { FrontendComponentType, ButtonSize, SurfaceVariant } from "@wildo-ai/presets-components-models";
+import { ApprovalArgumentEditorMode, ApprovalArgumentFields, fieldsEditableArgumentsSchema } from "./approval-argument-fields.js";
 const CT = FrontendComponentType.LOW_LEVEL_AI_APPROVAL;
 //===============================================================
 //  Human-in-the-Loop Approval Components
@@ -40,25 +41,94 @@ function useCountdown(expiresAt) {
         : `${seconds}s`;
     return { remaining, isExpired: false };
 }
-export const AI_ApprovalRequest = ({ approvalId, actionDescription, riskLevel, executionId, systemRef, expiresAt, requiredRoles, toolName, executionContext, onApprove, onDeny, onEscalate, isProcessing, createdAt, className, ...props }) => {
+export const AI_ApprovalRequest = ({ approvalId, actionDescription, riskLevel, executionId, systemRef, expiresAt, requiredRoles, toolName, executionContext, allowArgumentModification, argumentsSchema, argumentModificationError, rejectedArguments, onApprove, onDeny, onEscalate, isProcessing, createdAt, className, ...props }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
     const { remaining, isExpired } = useCountdown(expiresAt);
     const variant = riskLevel === "critical" || riskLevel === "high" ? "destructive" : "default";
+    /*
+     * The argument editor's state (#566).
+     *
+     * `draft` is `null` while the approver is reading rather than editing — distinct from an empty
+     * string, which is a draft they have cleared. Opening the editor seeds it from the PROPOSED
+     * arguments, so the starting point is the call the agent asked for and an approver changes one
+     * value rather than retyping the object.
+     */
+    const fieldsSchema = React.useMemo(() => fieldsEditableArgumentsSchema(argumentsSchema), [argumentsSchema]);
+    /*
+     * A refused edit reopens on what the approver SUBMITTED (#587). The request unmounted while its
+     * decision was in flight, so without this the approver would land back on the model's proposal and
+     * lose the change the server has just explained.
+     */
+    const reopenedOn = argumentModificationError !== undefined ? (rejectedArguments ?? executionContext) : undefined;
+    const [editorMode, setEditorMode] = React.useState(() => reopenedOn === undefined ? null : fieldsSchema ? ApprovalArgumentEditorMode.FIELDS : ApprovalArgumentEditorMode.JSON);
+    // The value the field editor (re)mounts on — replaced when the approver switches back from JSON.
+    const [fieldsSeed, setFieldsSeed] = React.useState(() => reopenedOn ?? executionContext ?? {});
+    const [fieldsEdit, setFieldsEdit] = React.useState({
+        value: undefined,
+        invalid: false,
+    });
+    const handleFieldsChange = React.useCallback((next) => setFieldsEdit(next), []);
+    const [draft, setDraft] = React.useState(() => JSON.stringify(reopenedOn ?? executionContext ?? {}, null, 2));
+    const parsedDraft = React.useMemo(() => {
+        try {
+            const value = JSON.parse(draft);
+            // An array or a scalar is valid JSON and cannot be a tool's arguments. Refusing it HERE spares
+            // the round trip; the server refuses it too, which is what actually protects the call.
+            if (value === null || typeof value !== "object" || Array.isArray(value))
+                return { value: undefined, invalid: true };
+            return { value: value, invalid: false };
+        }
+        catch {
+            return { value: undefined, invalid: true };
+        }
+    }, [draft]);
     if (!isReady)
         return null;
-    return (_jsxs(Alert, { variant: variant, className: cn("flex flex-col gap-card-sm", className), ...props, children: [_jsxs("div", { className: "flex items-center justify-between gap-element", children: [_jsxs("div", { className: "flex items-center gap-element", children: [riskLevel && (_jsx(Badge, { variant: riskLevel === "critical" || riskLevel === "high" ? "destructive" : "outline", className: "text-2xs", children: tComponent(CT, `risk${riskLevel.charAt(0).toUpperCase()}${riskLevel.slice(1)}`) })), systemRef && (_jsx("span", { className: "text-2xs text-muted-foreground", children: systemRef }))] }), remaining && (_jsx(Badge, { variant: "secondary", className: "text-2xs tabular-nums", children: tComponent(CT, "expiresCountdown", { time: remaining }) })), isExpired && (_jsx(Badge, { variant: "destructive", className: "text-2xs", children: tComponent(CT, "expired") }))] }), _jsx(AlertDescription, { className: "text-sm", children: actionDescription }), requiredRoles && requiredRoles.length > 0 && (_jsxs("div", { className: "flex items-center gap-element", children: [_jsxs("span", { className: "text-2xs text-muted-foreground", children: [tComponent(CT, "requiredRoles"), ":"] }), _jsx("div", { className: "flex gap-1", children: requiredRoles.map((role) => (_jsx(Badge, { variant: "outline", className: "text-2xs", children: role }, role))) })] })), toolName !== undefined && (_jsxs("div", { className: "flex items-center gap-element", children: [_jsxs("span", { className: "text-2xs text-muted-foreground", children: [tComponent(CT, "toolCall"), ":"] }), _jsx("code", { className: "rounded bg-muted px-1 py-0.5 text-2xs font-mono", children: toolName })] })), executionContext && Object.keys(executionContext).length > 0 && (_jsxs("div", { className: "flex flex-col gap-element", children: [_jsxs("span", { className: "text-2xs text-muted-foreground", children: [tComponent(CT, "toolArguments"), ":"] }), _jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.INSET, children: _jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-element gap-y-0.5 rounded-md bg-muted p-2 text-2xs", children: Object.entries(executionContext).map(([key, value]) => (_jsxs(React.Fragment, { children: [_jsx("dt", { className: "font-mono text-muted-foreground", children: key }), _jsx("dd", { className: "min-w-0 break-words font-mono", children: typeof value === "string" || typeof value === "number" || typeof value === "boolean"
+    return (_jsxs(Alert, { variant: variant, className: cn("flex flex-col gap-card-sm", className), ...props, children: [_jsxs("div", { className: "flex items-center justify-between gap-element", children: [_jsxs("div", { className: "flex items-center gap-element", children: [riskLevel && (_jsx(Badge, { variant: riskLevel === "critical" || riskLevel === "high" ? "destructive" : "outline", className: "text-2xs", children: tComponent(CT, `risk${riskLevel.charAt(0).toUpperCase()}${riskLevel.slice(1)}`) })), systemRef && (_jsx("span", { className: "text-2xs text-muted-foreground", children: systemRef }))] }), remaining && (_jsx(Badge, { variant: "secondary", className: "text-2xs tabular-nums", children: tComponent(CT, "expiresCountdown", { time: remaining }) })), isExpired && (_jsx(Badge, { variant: "destructive", className: "text-2xs", children: tComponent(CT, "expired") }))] }), _jsx(AlertDescription, { className: "text-sm", children: actionDescription }), requiredRoles && requiredRoles.length > 0 && (_jsxs("div", { className: "flex items-center gap-element", children: [_jsxs("span", { className: "text-2xs text-muted-foreground", children: [tComponent(CT, "requiredRoles"), ":"] }), _jsx("div", { className: "flex gap-1", children: requiredRoles.map((role) => (_jsx(Badge, { variant: "outline", className: "text-2xs", children: role }, role))) })] })), toolName !== undefined && (_jsxs("div", { className: "flex items-center gap-element", children: [_jsxs("span", { className: "text-2xs text-muted-foreground", children: [tComponent(CT, "toolCall"), ":"] }), _jsx("code", { className: "rounded bg-muted px-1 py-0.5 text-2xs font-mono", children: toolName })] })), executionContext && Object.keys(executionContext).length > 0 && (_jsxs("div", { className: "flex flex-col gap-element", children: [_jsxs("div", { className: "flex items-center justify-between gap-element", children: [_jsxs("span", { className: "text-2xs text-muted-foreground", children: [tComponent(CT, "toolArguments"), ":"] }), allowArgumentModification && (_jsxs("div", { className: "flex items-center gap-1", children: [editorMode !== null && fieldsSchema && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.SM, disabled: isProcessing || isExpired || (editorMode === ApprovalArgumentEditorMode.JSON && parsedDraft.invalid), onClick: () => {
+                                            if (editorMode === ApprovalArgumentEditorMode.FIELDS) {
+                                                setDraft(JSON.stringify(fieldsEdit.value ?? fieldsSeed, null, 2));
+                                                setEditorMode(ApprovalArgumentEditorMode.JSON);
+                                            }
+                                            else if (parsedDraft.value) {
+                                                setFieldsSeed(parsedDraft.value);
+                                                setEditorMode(ApprovalArgumentEditorMode.FIELDS);
+                                            }
+                                        }, children: tComponent(CT, editorMode === ApprovalArgumentEditorMode.FIELDS ? "editArgumentsAsJson" : "editArgumentsAsFields") })), _jsx(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.SM, disabled: isProcessing || isExpired, onClick: () => {
+                                            if (editorMode !== null) {
+                                                setEditorMode(null);
+                                                return;
+                                            }
+                                            // Opening always starts from the call the agent PROPOSED.
+                                            const proposed = executionContext ?? {};
+                                            setFieldsSeed(proposed);
+                                            setDraft(JSON.stringify(proposed, null, 2));
+                                            setEditorMode(fieldsSchema ? ApprovalArgumentEditorMode.FIELDS : ApprovalArgumentEditorMode.JSON);
+                                        }, children: tComponent(CT, editorMode === null ? "editArguments" : "discardArgumentEdits") })] }))] }), argumentModificationError !== undefined && editorMode !== null && (_jsxs("span", { className: "text-2xs text-destructive", children: [tComponent(CT, "argumentModificationRefused"), ": ", argumentModificationError] })), editorMode === null ? (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.INSET, children: _jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-element gap-y-0.5 rounded-md bg-muted p-2 text-2xs", children: Object.entries(executionContext).map(([key, value]) => (_jsxs(React.Fragment, { children: [_jsx("dt", { className: "font-mono text-muted-foreground", children: key }), _jsx("dd", { className: "min-w-0 break-words font-mono", children: typeof value === "string" || typeof value === "number" || typeof value === "boolean"
                                             ? String(value)
-                                            : JSON.stringify(value) })] }, key))) }) })] })), _jsx(AI_ApprovalActions, { approvalId: approvalId, riskLevel: riskLevel, onApprove: onApprove, onDeny: onDeny, onEscalate: onEscalate, isProcessing: isProcessing, disabled: isExpired })] }));
+                                            : JSON.stringify(value) })] }, key))) }) })) : editorMode === ApprovalArgumentEditorMode.FIELDS && fieldsSchema ? (_jsx(ApprovalArgumentFields, { schema: fieldsSchema, initialValue: fieldsSeed, disabled: isProcessing || isExpired, invalidJsonMessage: tComponent(CT, "argumentValueNotValidJson"), onChange: handleFieldsChange })) : (_jsxs(_Fragment, { children: [_jsx(TextareaRoot, { rows: Math.min(12, Object.keys(executionContext).length + 3), value: draft, onChange: (e) => setDraft(e.target.value), className: "font-mono text-2xs", disabled: isProcessing || isExpired, "aria-invalid": parsedDraft.invalid || undefined, "aria-label": tComponent(CT, "editArguments") }), parsedDraft.invalid && (_jsx("span", { className: "text-2xs text-destructive", children: tComponent(CT, "argumentsNotValidJson") }))] }))] })), _jsx(AI_ApprovalActions, { approvalId: approvalId, riskLevel: riskLevel, onApprove: onApprove, onDeny: onDeny, onEscalate: onEscalate, isProcessing: isProcessing, 
+                // Approving with unparseable text would send nothing and silently run the model's own
+                // arguments — a change collected and dropped, which is the one outcome this feature exists
+                // to prevent. The button is unavailable until the draft is an object.
+                disabled: isExpired
+                    || (editorMode === ApprovalArgumentEditorMode.FIELDS && fieldsEdit.invalid)
+                    || (editorMode === ApprovalArgumentEditorMode.JSON && parsedDraft.invalid), 
+                // Whatever the approver is authoring in — and `undefined` whenever the editor is closed, which is
+                // what "run the call as proposed" means on the wire.
+                modifiedToolArgs: editorMode === ApprovalArgumentEditorMode.FIELDS
+                    ? fieldsEdit.value
+                    : editorMode === ApprovalArgumentEditorMode.JSON
+                        ? parsedDraft.value
+                        : undefined })] }));
 };
-export const AI_ApprovalActions = ({ approvalId, riskLevel, onApprove, onDeny, onEscalate, isProcessing, disabled, className, ...props }) => {
+export const AI_ApprovalActions = ({ approvalId, riskLevel, modifiedToolArgs, onApprove, onDeny, onEscalate, isProcessing, disabled, className, ...props }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
     const [comment, setComment] = React.useState("");
     const isHighRisk = riskLevel === "high" || riskLevel === "critical";
     const actionsDisabled = isProcessing || disabled;
     if (!isReady)
         return null;
-    const approveButton = (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.DEFAULT, size: ButtonSize.SM, disabled: actionsDisabled, onClick: isHighRisk ? undefined : () => onApprove?.(approvalId, comment || undefined), children: isProcessing ? tComponent(CT, "processing") : tComponent(CT, "approve") }));
-    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), ...props, children: [_jsx(TextareaRoot, { rows: 2, value: comment, onChange: (e) => setComment(e.target.value), placeholder: tComponent(CT, "commentPlaceholder"), className: "text-xs", disabled: actionsDisabled }), _jsxs("div", { className: "flex items-center gap-element", children: [isHighRisk ? (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: approveButton }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: tComponent(CT, "confirmTitle") }), _jsx(AlertDialogDescription, { children: tComponent(CT, "confirmDescription") })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: tComponent(CT, "confirmCancel") }), _jsx(AlertDialogAction, { onClick: () => onApprove?.(approvalId, comment || undefined), children: tComponent(CT, "confirmProceed") })] })] })] })) : (approveButton), _jsx(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, size: ButtonSize.SM, disabled: actionsDisabled, onClick: () => onDeny?.(approvalId, comment || undefined), children: tComponent(CT, "deny") }), onEscalate && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.SECONDARY, size: ButtonSize.SM, disabled: actionsDisabled, onClick: () => onEscalate?.(approvalId, comment || undefined), children: tComponent(CT, "escalate") }))] })] }));
+    const approveButton = (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.DEFAULT, size: ButtonSize.SM, disabled: actionsDisabled, onClick: isHighRisk ? undefined : () => onApprove?.(approvalId, comment || undefined, modifiedToolArgs), children: isProcessing ? tComponent(CT, "processing") : tComponent(CT, "approve") }));
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), ...props, children: [_jsx(TextareaRoot, { rows: 2, value: comment, onChange: (e) => setComment(e.target.value), placeholder: tComponent(CT, "commentPlaceholder"), className: "text-xs", disabled: actionsDisabled }), _jsxs("div", { className: "flex items-center gap-element", children: [isHighRisk ? (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: approveButton }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: tComponent(CT, "confirmTitle") }), _jsx(AlertDialogDescription, { children: tComponent(CT, "confirmDescription") })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: tComponent(CT, "confirmCancel") }), _jsx(AlertDialogAction, { onClick: () => onApprove?.(approvalId, comment || undefined, modifiedToolArgs), children: tComponent(CT, "confirmProceed") })] })] })] })) : (approveButton), _jsx(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, size: ButtonSize.SM, disabled: actionsDisabled, onClick: () => onDeny?.(approvalId, comment || undefined), children: tComponent(CT, "deny") }), onEscalate && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.SECONDARY, size: ButtonSize.SM, disabled: actionsDisabled, onClick: () => onEscalate?.(approvalId, comment || undefined), children: tComponent(CT, "escalate") }))] })] }));
 };
 //===============================================================
 //  AI_ApprovalQueue