@jini-ai/ui 0.3.11 → 0.3.12

package/dist/features/mcp-ui/surfaces/checkbox.d.ts

@@ -13,6 +13,16 @@ export interface CheckboxProps {
      */
     readonly required?: boolean;
     readonly disabled?: boolean;
+    /**
+     * One extra `data-*` attribute on the `<input>`, escaped like every other value. For a caller
+     * that needs to look the box up by something other than its DOM `name` — e.g. the confirmation
+     * surface's per-choice ids, which are caller data and may contain characters `fieldElementId`'s
+     * `name` validation disallows.
+     */
+    readonly dataAttribute?: {
+        readonly name: string;
+        readonly value: string;
+    };
 }
 /**
  * Renders one boolean field.

package/dist/features/mcp-ui/surfaces/checkbox.js

@@ -16,10 +16,14 @@ import { fieldDescribedBy, fieldElementId, renderFieldLabel } from './document.j
  */
 export function renderCheckbox(props) {
     const id = fieldElementId(props.name);
+    const dataAttribute = props.dataAttribute === undefined
+        ? ''
+        : ` ${escapeHtml(props.dataAttribute.name)}="${escapeHtml(props.dataAttribute.value)}"`;
     const attributes = ` id="${escapeHtml(id)}" name="${escapeHtml(props.name)}"` +
         (props.value === true ? ' checked' : '') +
         (props.required === true ? ' required' : '') +
         (props.disabled === true ? ' disabled' : '') +
+        dataAttribute +
         fieldDescribedBy(props);
     return `<div class="mcpui-field mcpui-field-inline">\n<input class="mcpui-checkbox" type="checkbox"${attributes}>\n<span>${renderFieldLabel(props)}</span>\n</div>`;
 }

package/dist/features/mcp-ui/surfaces/confirmation.d.ts

@@ -38,11 +38,37 @@ export interface ConfirmationToolAction {
     /** Passed verbatim as the tool's `arguments`. The only safe home for a confirmation token. */
     readonly params: Readonly<Record<string, unknown>>;
 }
+/** One row of an optional per-item checkbox list — see {@link ConfirmationSurfaceSpec.choices}. */
+export interface ConfirmationChoice {
+    /**
+     * The value reported back when this box is ticked. Caller data, not a DOM name: it may contain
+     * any character, because it never becomes an HTML `name`/`id` (those are `choice-<index>` in the
+     * DOM; see `renderChoices`) — only a `data-mcpui-choice` attribute value, which any string escapes
+     * into safely.
+     */
+    readonly id: string;
+    readonly label: string;
+    readonly hint?: string;
+}
 export interface ConfirmationSurfaceSpec {
     readonly title: string;
     readonly description?: string;
     /** The facts being agreed about. A dialog that says "delete this?" without naming *this* is not consent. */
     readonly details?: readonly SurfaceDetail[];
+    /**
+     * Optional per-row checkboxes, rendered unchecked between the details and the warning. Ticking one
+     * never confirms anything by itself — the same property the module doc opens with, extended to a
+     * second input: a tick reaches a tool call ONLY by riding along on confirm's own trusted,
+     * past-dwell click, merged into {@link ConfirmationToolAction.params} under {@link choicesParam}
+     * at the moment of that click and never before. With no `choices`, the rendered document and the
+     * params confirm posts are byte-identical to a spec written before this field existed.
+     */
+    readonly choices?: readonly ConfirmationChoice[];
+    /**
+     * The params key the ticked ids are posted under, merged into (never replacing) `confirm.params`.
+     * Defaults to `"overwrite"`.
+     */
+    readonly choicesParam?: string;
     /** A callout above the buttons — the consequence that is not obvious from the details alone. */
     readonly warning?: string;
     /** Styles the affirmative button as destructive. Affects presentation only; it changes no behavior. */

package/dist/features/mcp-ui/surfaces/confirmation.js

@@ -30,6 +30,7 @@
 import { createUIResource } from '../resource.js';
 import { escapeHtml, escapeJsValue } from '../escape.js';
 import { DEFAULT_SURFACE_STATUS_TEXT, SURFACE_SCRIPT_PRELUDE, renderActions, renderDetailList, renderStatusRegion, renderSurfaceDocument, renderSurfaceHeader, } from './document.js';
+import { renderCheckbox } from './checkbox.js';
 /**
  * How long the dialog must have been visible before a confirm click counts, in ms. A click sooner
  * than a person could have read the dialog is ignored — the same dwell browsers put on permission
@@ -42,6 +43,38 @@ const DEFAULT_APP = { appName: 'jini-mcp-ui-confirmation', appVersion: '1' };
 function isToolAction(action) {
     return action !== undefined && 'toolName' in action;
 }
+/**
+ * Renders the optional choice checkboxes, one unchecked box per {@link ConfirmationChoice}.
+ *
+ * Named `choice-<index>` in the DOM — never by `choice.id`, which is caller data and may contain
+ * characters `fieldElementId`'s `name` validation rejects — with the real id carried on the
+ * `data-mcpui-choice` attribute instead, which the script reads back on change.
+ *
+ * @returns `''` for an empty list, matching every other optional fragment in this document.
+ */
+function renderChoices(choices) {
+    if (choices.length === 0)
+        return '';
+    // Ticked state is keyed by id, so two boxes sharing one would tick and report as one.
+    const seen = new Set();
+    for (const choice of choices) {
+        if (seen.has(choice.id)) {
+            throw new Error(`Confirmation choices must have unique ids; ${JSON.stringify(choice.id)} appears more than once.`);
+        }
+        seen.add(choice.id);
+    }
+    const boxes = choices
+        .map((choice, index) => renderCheckbox({
+        name: `choice-${index}`,
+        label: choice.label,
+        ...(choice.hint === undefined ? {} : { hint: choice.hint }),
+        dataAttribute: { name: 'data-mcpui-choice', value: choice.id },
+    }))
+        .join('\n');
+    // Reuses form.ts's `.mcpui-fields` spacing rather than inventing a second stylesheet rule for the
+    // same "stack of controls" layout.
+    return `<fieldset class="mcpui-fields">\n${boxes}\n</fieldset>`;
+}
 /**
  * Renders the confirmation dialog as a complete, self-contained HTML document.
  *
@@ -67,11 +100,18 @@ function confirmationActions(spec) {
 }
 export function renderConfirmationDocument(spec) {
     const text = { ...DEFAULT_SURFACE_STATUS_TEXT, ...spec.text };
+    const choicesParam = spec.choicesParam ?? 'overwrite';
+    // The ticked ids are merged into confirm.params at click time; a key already there (the token,
+    // say) would be silently replaced by an array.
+    if ((spec.choices ?? []).length > 0 && Object.prototype.hasOwnProperty.call(spec.confirm.params, choicesParam)) {
+        throw new Error(`choicesParam ${JSON.stringify(choicesParam)} collides with a key already in confirm.params.`);
+    }
     const actions = confirmationActions(spec);
     const warning = spec.warning === undefined ? '' : `<p class="mcpui-warning">${escapeHtml(spec.warning)}</p>`;
     const bodyHtml = [
         renderSurfaceHeader(spec.description === undefined ? { title: spec.title } : { title: spec.title, description: spec.description }),
         renderDetailList(spec.details ?? []),
+        renderChoices(spec.choices ?? []),
         warning,
         // Confirm starts disabled; the script enables it once the dwell has run out.
         renderActions(actions.map((action) => (action.id === 'confirm' ? { ...action, disabled: true } : action))),
@@ -96,6 +136,7 @@ ${SURFACE_SCRIPT_PRELUDE}
   var PLAN = ${escapeJsValue(plan)};
   var TEXT = ${escapeJsValue(text)};
   var DWELL_MS = ${CONFIRM_DWELL_MS};
+  var CHOICES_PARAM = ${escapeJsValue(choicesParam)};
 
   // Monotonic where available: a wall clock set backwards would otherwise stretch the dwell.
   function now() {
@@ -141,6 +182,47 @@ ${SURFACE_SCRIPT_PRELUDE}
     actionButtons[i].addEventListener("click", onClick);
   }
 
+  // Ticked state, tracked ourselves rather than trusted from each input's own \`.checked\` at
+  // confirm-time -- the same "only a browser-attributed action counts" rule \`onClick\` applies to
+  // the buttons, extended to the one other interactive element this document can contain. Keyed by
+  // \`data-mcpui-choice\` (the caller's id), not DOM order, so a checkbox reordering upstream could
+  // never silently swap which id a tick reports.
+  var choiceInputs = Array.prototype.slice.call(document.querySelectorAll("[data-mcpui-choice]"));
+  var checkedIds = {};
+  for (var c = 0; c < choiceInputs.length; c++) {
+    choiceInputs[c].addEventListener("change", onChoiceChange);
+  }
+
+  function onChoiceChange(event) {
+    var id = event.currentTarget.getAttribute("data-mcpui-choice");
+    if (event.isTrusted !== true) {
+      // Put the box back to what we last recorded, so a script-driven toggle from anywhere in this
+      // document can never leave the visible box and the ids confirm would send disagreeing.
+      event.currentTarget.checked = checkedIds[id] === true;
+      return;
+    }
+    if (event.currentTarget.checked) checkedIds[id] = true;
+    else delete checkedIds[id];
+  }
+
+  // Frozen with the buttons while a call is in flight and for good once one settles the dialog, so
+  // the ticks on screen are always the ones that were sent.
+  function setChoicesDisabled(disabled) {
+    for (var k = 0; k < choiceInputs.length; k++) choiceInputs[k].disabled = disabled;
+  }
+
+  // DOM order, not \`for...in\` over checkedIds: object key order for arbitrary caller-supplied
+  // strings is not something to depend on, even where every engine we run on happens to preserve it.
+  function checkedChoiceIds() {
+    var ids = [];
+    for (var j = 0; j < choiceInputs.length; j++) {
+      var choiceId = choiceInputs[j].getAttribute("data-mcpui-choice");
+      // Both: a trusted tick recorded, and the box still showing it. Never send what isn't on screen.
+      if (checkedIds[choiceId] === true && choiceInputs[j].checked) ids.push(choiceId);
+    }
+    return ids;
+  }
+
   function onClick(event) {
     // Only a click the browser attributes to the user counts. element.click() and dispatchEvent
     // from any script in this document produce isTrusted === false.
@@ -151,15 +233,26 @@ ${SURFACE_SCRIPT_PRELUDE}
     // Cancel is exempt: backing out early is never the harm this guards against.
     if (action === "confirm" && !dwellDone()) return;
     locked = true;
+    setChoicesDisabled(true);
     if (step === null) {
       setBusy(true);
       setStatus(TEXT.dismissed, "dismissed");
       api.requestTeardown();
       return;
     }
+    // Choices ride only on confirm, and only when this document has any -- with none, \`params\` stays
+    // the exact \`step.params\` reference PLAN was built from, byte-identical to before this existed.
+    var params = step.params;
+    if (action === "confirm" && choiceInputs.length > 0) {
+      var merged = {};
+      var key;
+      for (key in step.params) if (Object.prototype.hasOwnProperty.call(step.params, key)) merged[key] = step.params[key];
+      merged[CHOICES_PARAM] = checkedChoiceIds();
+      params = merged;
+    }
     setBusy(true);
     setStatus(TEXT.working, "pending");
-    api.callTool(step.toolName, step.params).then(function () {
+    api.callTool(step.toolName, params).then(function () {
       setStatus(TEXT.done, "done");
       api.requestTeardown();
     }, function (error) {
@@ -167,6 +260,7 @@ ${SURFACE_SCRIPT_PRELUDE}
       // or cancel), unless the Host says this dialog is no longer pending -- see reportCallFailure.
       if (!reportCallFailure(error)) return;
       locked = false;
+      setChoicesDisabled(false);
       // reportCallFailure re-enabled every button; confirm still waits out an unfinished dwell.
       syncConfirm();
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/ui",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Generic, product-neutral React UI primitives and feature domains. Framework-free types, decision rules, catalogs, and host port contracts live behind ./core (no React, no DOM). The Excalidraw and Lexical editors live behind ./sketch-editor and ./lexical-rich-text-editor; the GrapesJS-backed inline HTML editor lives behind ./html-editor.",
   "license": "Apache-2.0",
   "repository": {
@@ -107,8 +107,8 @@
     "shiki": "^1.24.4",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.25.76",
-    "@jini-ai/agentic": "0.3.6",
     "@jini-ai/platform": "0.3.0",
+    "@jini-ai/agentic": "0.3.6",
     "@jini-ai/protocol": "0.3.0"
   },
   "devDependencies": {