@jini-ai/ui 0.5.5 → 0.6.10

package/dist/features/lexical-rich-text-editor/rules.js

@@ -205,6 +205,10 @@ function isUsableRect(r) {
 function toCaretRect(r) {
     return { top: r.top, bottom: r.bottom, left: r.left, right: r.right };
 }
+/** A caret rect pinned to a box's left edge (zero width). */
+function leftEdgeRect(r) {
+    return { top: r.top, bottom: r.bottom, left: r.left, right: r.left };
+}
 /** Reads the caret's viewport rect via the native selection, with ordered
  *  fallbacks for the collapsed-caret 0×0 case: (1) range bounding rect,
  *  (2) range client-rects list, (3) a zero-width probe range cloned at the
@@ -213,99 +217,108 @@ export function readCaretRect(rootEl) {
     if (typeof window === 'undefined')
         return null;
     const winSel = window.getSelection();
-    if (winSel && winSel.rangeCount > 0) {
-        const range = winSel.getRangeAt(0);
-        // jsdom does not implement Range geometry — guard every native call so a
-        // missing method falls through to the element/root box instead of
-        // throwing.
-        if (typeof range.getBoundingClientRect === 'function') {
-            const r = range.getBoundingClientRect();
-            if (isUsableRect(r))
-                return toCaretRect(r);
-        }
-        if (typeof range.getClientRects === 'function') {
-            const rects = range.getClientRects();
-            if (rects.length > 0 && isUsableRect(rects[0]))
-                return toCaretRect(rects[0]);
-        }
-        const anchorNode = range.startContainer;
-        if (anchorNode.nodeType === Node.TEXT_NODE) {
-            try {
-                const probe = document.createRange();
-                const len = anchorNode.length;
-                const off = Math.min(range.startOffset, len);
-                probe.setStart(anchorNode, off);
-                probe.setEnd(anchorNode, off);
-                if (typeof probe.getBoundingClientRect === 'function') {
-                    const pr = probe.getBoundingClientRect();
-                    if (isUsableRect(pr))
-                        return toCaretRect(pr);
-                }
-                if (typeof probe.getClientRects === 'function') {
-                    const prList = probe.getClientRects();
-                    if (prList.length > 0 && isUsableRect(prList[0]))
-                        return toCaretRect(prList[0]);
-                }
-            }
-            catch {
-                /* fall through */
-            }
-        }
-        const el = anchorNode.nodeType === Node.ELEMENT_NODE
-            ? anchorNode
-            : anchorNode.parentElement;
-        if (el) {
-            const er = el.getBoundingClientRect();
-            if (isUsableRect(er)) {
-                return { top: er.top, bottom: er.bottom, left: er.left, right: er.left };
-            }
-        }
+    const fromSelection = winSel && winSel.rangeCount > 0 ? caretRectFromRange(winSel.getRangeAt(0)) : null;
+    if (fromSelection)
+        return fromSelection;
+    return rootEl ? leftEdgeRect(rootEl.getBoundingClientRect()) : null;
+}
+/** Fallbacks (1)–(4) of `readCaretRect` for one live selection range. */
+function caretRectFromRange(range) {
+    const fromRange = rangeGeometryRect(range);
+    if (fromRange)
+        return fromRange;
+    const anchorNode = range.startContainer;
+    if (anchorNode.nodeType === Node.TEXT_NODE) {
+        const probed = probeTextCaretRect({ text: anchorNode, offset: range.startOffset });
+        if (probed)
+            return probed;
+    }
+    return anchorElementRect(anchorNode);
+}
+/** Fallbacks (1) and (2): a range's bounding rect, then its first client rect. */
+function rangeGeometryRect(range) {
+    // jsdom does not implement Range geometry — guard every native call so a
+    // missing method falls through to the element/root box instead of
+    // throwing.
+    if (typeof range.getBoundingClientRect === 'function') {
+        const r = range.getBoundingClientRect();
+        if (isUsableRect(r))
+            return toCaretRect(r);
     }
-    if (rootEl) {
-        const rr = rootEl.getBoundingClientRect();
-        return { top: rr.top, bottom: rr.bottom, left: rr.left, right: rr.left };
+    if (typeof range.getClientRects === 'function') {
+        const rects = range.getClientRects();
+        if (rects.length > 0 && isUsableRect(rects[0]))
+            return toCaretRect(rects[0]);
     }
     return null;
 }
+/** Fallback (3): geometry of a zero-width probe range at the anchor text offset. */
+function probeTextCaretRect(at) {
+    try {
+        const probe = document.createRange();
+        const off = Math.min(at.offset, at.text.length);
+        probe.setStart(at.text, off);
+        probe.setEnd(at.text, off);
+        return rangeGeometryRect(probe);
+    }
+    catch {
+        /* fall through */
+        return null;
+    }
+}
+/** Fallback (4): the anchor element's box (or the text anchor's parent's). */
+function anchorElementRect(anchorNode) {
+    const el = anchorNode.nodeType === Node.ELEMENT_NODE ? anchorNode : anchorNode.parentElement;
+    if (!el)
+        return null;
+    const er = el.getBoundingClientRect();
+    return isUsableRect(er) ? leftEdgeRect(er) : null;
+}
 /** Default ABOVE the caret (a composer typically sits at a panel's bottom,
  *  so above never occludes the input line); flip BELOW only when above lacks
  *  room. Clamp horizontally into the viewport (or `boundary`, when given).
  *  Caps height; the caller's popover scrolls internally. */
 export function computeCaretFloatingLayerPosition(caret, size, boundary, config) {
-    const { gap, margin, hardMaxHeight, preferredWidth } = config;
+    const { margin } = config;
     const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const viewportAvailableWidth = vw - margin * 2;
-    const boundaryAvailableWidth = boundary ? boundary.width - margin * 2 : viewportAvailableWidth;
+    const width = layerWidth({ vw, boundary, margin, preferredWidth: config.preferredWidth });
+    const vertical = verticalPlacement({
+        caret,
+        vh: window.innerHeight,
+        wantedH: size?.height ?? config.hardMaxHeight,
+        ...config,
+    });
+    const left = clampLeft({ caretLeft: caret.left, vw, boundary, margin, width });
+    return { left, top: vertical.top, width, maxHeight: vertical.maxHeight, placement: vertical.placement };
+}
+function layerWidth(at) {
+    const viewportAvailableWidth = at.vw - at.margin * 2;
+    const boundaryAvailableWidth = at.boundary
+        ? at.boundary.width - at.margin * 2
+        : viewportAvailableWidth;
     const availableWidth = Math.max(240, Math.min(viewportAvailableWidth, boundaryAvailableWidth));
-    const width = Math.min(preferredWidth, availableWidth);
+    return Math.min(at.preferredWidth, availableWidth);
+}
+function verticalPlacement(at) {
+    const { caret, gap, margin, wantedH } = at;
     const spaceAbove = caret.top - gap - margin;
-    const spaceBelow = vh - caret.bottom - gap - margin;
-    const wantedH = size?.height ?? hardMaxHeight;
+    const spaceBelow = at.vh - caret.bottom - gap - margin;
     const aboveFits = spaceAbove >= Math.min(wantedH, 160);
     const placement = aboveFits || spaceAbove >= spaceBelow ? 'above' : 'below';
     const space = placement === 'above' ? spaceAbove : spaceBelow;
-    const maxHeight = Math.max(120, Math.min(hardMaxHeight, space));
-    let top;
-    if (placement === 'above') {
-        const h = Math.min(wantedH, maxHeight);
-        top = caret.top - gap - h;
-        if (top < margin)
-            top = margin;
-    }
-    else {
-        top = caret.bottom + gap;
-    }
+    const maxHeight = Math.max(120, Math.min(at.hardMaxHeight, space));
+    if (placement === 'below')
+        return { top: caret.bottom + gap, maxHeight, placement };
+    const h = Math.min(wantedH, maxHeight);
+    return { top: Math.max(margin, caret.top - gap - h), maxHeight, placement };
+}
+function clampLeft(at) {
+    const { vw, boundary, margin, width } = at;
     const minLeft = boundary ? Math.max(margin, boundary.left + margin) : margin;
     const maxLeft = boundary
         ? Math.max(minLeft, Math.min(vw - margin - width, boundary.right - margin - width))
         : vw - margin - width;
-    let left = caret.left;
-    if (left > maxLeft)
-        left = maxLeft;
-    if (left < minLeft)
-        left = minLeft;
-    return { left, top, width, maxHeight, placement };
+    return Math.max(minLeft, Math.min(at.caretLeft, maxLeft));
 }
 /** Combines detection + caret-rect reading into the shape `RichTextInput`
  *  reports upward on every editor update. */

package/dist/features/lexical-rich-text-editor/serialize.js

@@ -9,32 +9,34 @@ import { $isMentionNode } from './mention-node.js';
 export function serializeRichText(state) {
     return state.read(() => {
         const mentions = [];
-        const blocks = [];
-        for (const block of $getRoot().getChildren()) {
-            if (!$isParagraphNode(block)) {
-                // Stray non-paragraph block (shouldn't happen): fall back to its text.
-                blocks.push(block.getTextContent());
-                continue;
-            }
-            let line = '';
-            for (const child of block.getChildren()) {
-                if ($isMentionNode(child)) {
-                    line += child.getToken();
-                    mentions.push(child.getEntity());
-                }
-                else if ($isLineBreakNode(child)) {
-                    line += '\n';
-                }
-                else if ($isTextNode(child)) {
-                    line += child.getTextContent();
-                }
-                else if ($isElementNode(child)) {
-                    line += child.getTextContent();
-                }
-            }
-            blocks.push(line);
-        }
+        const blocks = $getRoot()
+            .getChildren()
+            .map((block) => $isParagraphNode(block)
+            ? serializeParagraph({ paragraph: block, mentions })
+            : // Stray non-paragraph block (shouldn't happen): fall back to its text.
+                block.getTextContent());
         return { text: blocks.join('\n'), mentions };
     });
 }
+/**
+ * One paragraph's wire text; appends each atomic mention's entity to
+ * `mentions` in document order. A non-mention decorator child contributes
+ * nothing.
+ */
+function serializeParagraph(at) {
+    let line = '';
+    for (const child of at.paragraph.getChildren()) {
+        if ($isMentionNode(child)) {
+            line += child.getToken();
+            at.mentions.push(child.getEntity());
+        }
+        else if ($isLineBreakNode(child)) {
+            line += '\n';
+        }
+        else if ($isTextNode(child) || $isElementNode(child)) {
+            line += child.getTextContent();
+        }
+    }
+    return line;
+}
 //# sourceMappingURL=serialize.js.map

package/dist/features/mcp-ui/secret-card.js

@@ -27,51 +27,131 @@ function checkedFields(form) {
     return form.fields.map(field => ({ ...field }));
 }
 /** Classify before persistence; an abort wins over an already-buffered answer.
- * Trimming tests blankness only: rewriting a provider secret can corrupt intentional newlines.
- * @complexity O(n + b) before save in fields and submitted secret bytes; failure text delegates
- * to core's exact-secret redaction scan. Host persistence cost is external. */
-async function saveAnswer(required) {
-    const { answer, fields, prep, ctx, spec, options, exchangeId } = required;
-    if (ctx.signal.aborted)
-        return { status: 'abandoned' };
+ * @complexity O(1). */
+function answerStep(required) {
+    const { answer, signal } = required;
+    if (signal.aborted)
+        return { run: { status: 'abandoned' } };
     if (answer.status !== 'received')
-        return { status: answer.status };
+        return { run: { status: answer.status } };
     if (answer.params[SURFACE_DISMISSED_PARAM] === true)
-        return { status: 'cancelled' };
-    const values = Object.fromEntries(fields.map(field => [field.name, answer.params[field.name]]));
+        return { run: { status: 'cancelled' } };
+    return { params: answer.params };
+}
+/** The exact submitted secret, or undefined when it is blank or malformed.
+ * Trimming tests blankness only: rewriting a provider secret can corrupt intentional newlines.
+ * @complexity O(b) in the submitted secret bytes. */
+function secretValue(required) {
+    const { field, value } = required;
+    if (value !== undefined && typeof value !== 'string')
+        return undefined;
+    const secret = typeof value === 'string' ? value : '';
+    if (secret.trim() === '' && (secret !== '' || field.allowBlank !== true))
+        return undefined;
+    return secret;
+}
+/** Project only declared names; undefined means a required secret was blank or malformed.
+ * @complexity O(n + b) in fields and submitted secret bytes. */
+function collectValues(required) {
+    const { fields, params } = required;
+    const values = Object.fromEntries(fields.map(field => [field.name, params[field.name]]));
     const secrets = [];
     for (const field of fields) {
         if (field.secret !== true)
             continue;
-        const value = values[field.name];
-        if (value !== undefined && typeof value !== 'string')
-            return { status: 'blank' };
-        const secret = typeof value === 'string' ? value : '';
-        if (secret.trim() === '' && (secret !== '' || field.allowBlank !== true))
-            return { status: 'blank' };
+        const secret = secretValue({ field, value: values[field.name] });
+        if (secret === undefined)
+            return undefined;
         values[field.name] = secret;
         secrets.push(secret);
     }
+    return { values, secrets };
+}
+/** Map a save exception to fixed, redacted text and log fixed metadata only.
+ * @complexity O(m + b): delegates to core's exact-secret redaction scan. */
+function failedRun(required) {
+    const { error, secrets, signal, toolId, options, exchangeId } = required;
+    if (signal.aborted)
+        return { status: 'abandoned' };
+    let safeMessage = options.text?.saveFailure ?? 'Saving failed. Nothing was saved.';
+    try {
+        safeMessage = options.safeError?.(error) ?? safeMessage;
+    }
+    catch { /* An error mapper must not disclose a second exception containing the submitted value. */ }
+    // Even an accidentally permissive allowlist must not echo the submitted secret.
+    safeMessage = redactSecrets({ input: safeMessage }, { exactSecrets: secrets });
+    try {
+        options.logFailure?.({ toolId, exchangeId, saved: false });
+    }
+    catch { /* Logging must not replace the safe model result with an opaque logger exception. */ }
+    return { status: 'failed', safeMessage };
+}
+/** Classify, then persist; an abort wins over an already-buffered answer.
+ * @complexity O(n + b) before save in fields and submitted secret bytes; failure text delegates
+ * to core's exact-secret redaction scan. Host persistence cost is external. */
+async function saveAnswer(required) {
+    const { answer, fields, prep, ctx, spec, options, exchangeId } = required;
+    const step = answerStep({ answer, signal: ctx.signal });
+    if ('run' in step)
+        return step.run;
+    const collected = collectValues({ fields, params: step.params });
+    if (collected === undefined)
+        return { status: 'blank' };
     if (ctx.signal.aborted)
         return { status: 'abandoned' };
+    const { values, secrets } = collected;
     try {
         return { status: 'saved', saved: await spec.save({ values, prep, signal: ctx.signal }) };
     }
     catch (error) {
+        return failedRun({ error, secrets, signal: ctx.signal, toolId: spec.toolId, options, exchangeId });
+    }
+}
+/** Fail closed without an emitter. @complexity O(1). @throws ToolInputError with fixed text. */
+function requireEmitter(required, optional) {
+    if (optional.emitSurface)
+        return optional.emitSurface;
+    throw new ToolInputError({ message: required.options.text?.noEmitter ?? `${required.toolId}: this execution context has no interactive form channel (no emitSurface), so this form cannot be shown here. Nothing was changed.` });
+}
+/** The form resource: engine-owned routing params and dismissal around the host's copy.
+ * @complexity O(n + h) in fields and rendered HTML. */
+function buildCardForm(required) {
+    const { form, fields, uri, framing, toolId, exchangeId, options } = required;
+    return buildFormSurface({ ...form, fields, uri, ...framing, toolName: toolId,
+        baseParams: { [SURFACE_EXCHANGE_ID_PARAM]: exchangeId },
+        cancel: { label: form.cancelLabel ?? options.text?.cancelLabel ?? 'Cancel', toolName: toolId,
+            params: { [SURFACE_EXCHANGE_ID_PARAM]: exchangeId, [SURFACE_DISMISSED_PARAM]: true } },
+    });
+}
+/** Open the exchange, emit the card and hold the call until the real save is reported.
+ * @complexity O(n + h + b) locally, plus host I/O. */
+async function runCard(required) {
+    const { spec, options, deps, ctx, emit, prep, form, fields } = required;
+    const exchange = deps.surfaceExchanges.open({ binding: { toolId: spec.toolId, principalId: ctx.principal.id, channel: 'mcp-ui' }, emit });
+    const closeOnAbort = () => exchange.close({});
+    ctx.signal.addEventListener('abort', closeOnAbort, { once: true });
+    try {
+        // Close the open/register race as well as the prepare/abort race.
         if (ctx.signal.aborted)
-            return { status: 'abandoned' };
-        let safeMessage = options.text?.saveFailure ?? 'Saving failed. Nothing was saved.';
-        try {
-            safeMessage = options.safeError?.(error) ?? safeMessage;
-        }
-        catch { /* An error mapper must not disclose a second exception containing the submitted value. */ }
-        // Even an accidentally permissive allowlist must not echo the submitted secret.
-        safeMessage = redactSecrets({ input: safeMessage }, { exactSecrets: secrets });
-        try {
-            options.logFailure?.({ toolId: spec.toolId, exchangeId, saved: false });
-        }
-        catch { /* Logging must not replace the safe model result with an opaque logger exception. */ }
-        return { status: 'failed', safeMessage };
+            return spec.result({ prep, run: { status: 'abandoned' } });
+        const uri = `ui://${options.uriHost ?? 'jini'}/secret-card/${encodeURIComponent(spec.toolId)}/${encodeURIComponent(exchange.id)}`;
+        const framing = options.frameSize === undefined ? {} : { preferredFrameSize: options.frameSize };
+        const resource = buildCardForm({ form, fields, uri, framing, toolId: spec.toolId, exchangeId: exchange.id, options });
+        return await deps.askThenReport({ exchange, confirmationEmission: { channel: 'mcp-ui', payload: { resource } },
+            handle: async (answer) => {
+                const run = await saveAnswer({ answer, fields, prep, ctx, spec, options, exchangeId: exchange.id });
+                const result = spec.result({ prep, run });
+                const outcome = spec.outcome({ prep, run });
+                if (outcome === undefined)
+                    return { result };
+                return { result, outcome: { channel: 'mcp-ui', payload: { resource: buildOutcomeSurface({ ...outcome, uri, ...framing }) } } };
+            },
+        });
+    }
+    finally {
+        ctx.signal.removeEventListener('abort', closeOnAbort);
+        // Also covers rendering/projection failures before or inside askThenReport; close is idempotent.
+        exchange.close({});
     }
 }
 /**
@@ -92,8 +172,7 @@ export function defineSecretCardTool(required, options = {}) {
         toolId: spec.toolId,
         secretFieldNames: prep => checkedFields(spec.form({ prep })).filter(field => field.secret === true).map(field => field.name),
         handler: deps => async (ctx, optional = {}) => {
-            if (!optional.emitSurface)
-                throw new ToolInputError({ message: options.text?.noEmitter ?? `${spec.toolId}: this execution context has no interactive form channel (no emitSurface), so this form cannot be shown here. Nothing was changed.` });
+            const emit = requireEmitter({ toolId: spec.toolId, options }, optional);
             const prep = await spec.prepare({ ctx });
             if (ctx.signal.aborted)
                 return spec.result({ prep, run: { status: 'abandoned' } });
@@ -101,36 +180,7 @@ export function defineSecretCardTool(required, options = {}) {
             const fields = checkedFields(form);
             if (ctx.signal.aborted)
                 return spec.result({ prep, run: { status: 'abandoned' } });
-            const exchange = deps.surfaceExchanges.open({ binding: { toolId: spec.toolId, principalId: ctx.principal.id, channel: 'mcp-ui' }, emit: optional.emitSurface });
-            const closeOnAbort = () => exchange.close({});
-            ctx.signal.addEventListener('abort', closeOnAbort, { once: true });
-            try {
-                // Close the open/register race as well as the prepare/abort race.
-                if (ctx.signal.aborted)
-                    return spec.result({ prep, run: { status: 'abandoned' } });
-                const uri = `ui://${options.uriHost ?? 'jini'}/secret-card/${encodeURIComponent(spec.toolId)}/${encodeURIComponent(exchange.id)}`;
-                const framing = options.frameSize === undefined ? {} : { preferredFrameSize: options.frameSize };
-                const resource = buildFormSurface({ ...form, fields, uri, ...framing, toolName: spec.toolId,
-                    baseParams: { [SURFACE_EXCHANGE_ID_PARAM]: exchange.id },
-                    cancel: { label: form.cancelLabel ?? options.text?.cancelLabel ?? 'Cancel', toolName: spec.toolId,
-                        params: { [SURFACE_EXCHANGE_ID_PARAM]: exchange.id, [SURFACE_DISMISSED_PARAM]: true } },
-                });
-                return await deps.askThenReport({ exchange, confirmationEmission: { channel: 'mcp-ui', payload: { resource } },
-                    handle: async (answer) => {
-                        const run = await saveAnswer({ answer, fields, prep, ctx, spec, options, exchangeId: exchange.id });
-                        const result = spec.result({ prep, run });
-                        const outcome = spec.outcome({ prep, run });
-                        if (outcome === undefined)
-                            return { result };
-                        return { result, outcome: { channel: 'mcp-ui', payload: { resource: buildOutcomeSurface({ ...outcome, uri, ...framing }) } } };
-                    },
-                });
-            }
-            finally {
-                ctx.signal.removeEventListener('abort', closeOnAbort);
-                // Also covers rendering/projection failures before or inside askThenReport; close is idempotent.
-                exchange.close({});
-            }
+            return runCard({ spec, options, deps, ctx, emit, prep, form, fields });
         },
     };
 }

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

@@ -110,43 +110,47 @@ function confirmationActions(spec) {
         actions.push({ id: 'cancel', label: spec.cancel.label, variant: 'neutral' });
     return actions;
 }
-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)) {
+/** 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.
+ * @complexity O(a) in the alternative count. @throws Error naming the colliding param (and alternative). */
+function assertChoicesParamFree(spec, required) {
+    const { choicesParam } = required;
+    if ((spec.choices ?? []).length === 0)
+        return;
+    if (Object.prototype.hasOwnProperty.call(spec.confirm.params, choicesParam)) {
         throw new Error(`choicesParam ${JSON.stringify(choicesParam)} collides with a key already in confirm.params.`);
     }
-    for (const alternative of (spec.choices ?? []).length > 0 ? (spec.alternatives ?? []) : []) {
+    for (const alternative of spec.alternatives ?? []) {
         if (Object.prototype.hasOwnProperty.call(alternative.params, choicesParam)) {
             throw new Error(`choicesParam ${JSON.stringify(choicesParam)} collides with a key already in the params of alternative ${JSON.stringify(alternative.id)}.`);
         }
     }
-    const alternatives = spec.alternatives ?? [];
-    assertAlternativeIds(alternatives);
-    const actions = confirmationActions(spec);
-    // Every affirmative button starts disabled and waits out the dwell; only cancel is live at once.
-    const affirmative = new Set(['confirm', ...alternatives.map((alternative) => alternative.id)]);
+}
+/** Header, context, choices, warning, actions and the status region. @complexity O(n) in the rendered length. */
+function confirmationBodyHtml(spec, required) {
+    const { affirmative } = required;
     const warning = spec.warning === undefined ? '' : `<p class="mcpui-warning">${escapeHtml(spec.warning)}</p>`;
-    const bodyHtml = [
+    return [
         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) => (affirmative.has(action.id) ? { ...action, disabled: true } : action))),
+        renderActions(confirmationActions(spec).map((action) => (affirmative.has(action.id) ? { ...action, disabled: true } : action))),
         renderStatusRegion(),
     ]
         .filter((fragment) => fragment !== '')
         .join('\n');
-    // A map from button id to what that button does. `null` means "dismiss locally, call nothing" —
-    // the shape a cancel-without-a-tool takes, kept as an explicit null rather than an absent key so
-    // the script can tell "this button dismisses" from "this button is unknown to me".
+}
+/** A map from button id to what that button does. `null` means "dismiss locally, call nothing" —
+ * the shape a cancel-without-a-tool takes, kept as an explicit null rather than an absent key so
+ * the script can tell "this button dismisses" from "this button is unknown to me".
+ * @complexity O(a) in the alternative count. */
+function confirmationPlan(spec, required) {
     const plan = {
         confirm: { toolName: spec.confirm.toolName, params: spec.confirm.params },
     };
-    for (const alternative of alternatives) {
+    for (const alternative of required.alternatives) {
         plan[alternative.id] = { toolName: alternative.toolName, params: alternative.params };
     }
     if (spec.cancel !== undefined) {
@@ -154,7 +158,12 @@ export function renderConfirmationDocument(spec) {
             ? { toolName: spec.cancel.toolName, params: spec.cancel.params }
             : null;
     }
-    const script = `(function () {
+    return plan;
+}
+/** The inline runtime script: dwell, visibility, locking and tool calls. @complexity O(s) in the script length. */
+function confirmationScript(required) {
+    const { plan, text, choicesParam, affirmative } = required;
+    return `(function () {
   "use strict";
 ${SURFACE_SCRIPT_PRELUDE}
   var PLAN = ${escapeJsValue(plan)};
@@ -303,10 +312,19 @@ ${SURFACE_SCRIPT_PRELUDE}
     });
   }
 }());`;
+}
+export function renderConfirmationDocument(spec) {
+    const text = { ...DEFAULT_SURFACE_STATUS_TEXT, ...spec.text };
+    const choicesParam = spec.choicesParam ?? 'overwrite';
+    assertChoicesParamFree(spec, { choicesParam });
+    const alternatives = spec.alternatives ?? [];
+    assertAlternativeIds(alternatives);
+    // Every affirmative button starts disabled and waits out the dwell; only cancel is live at once.
+    const affirmative = new Set(['confirm', ...alternatives.map((alternative) => alternative.id)]);
     return renderSurfaceDocument({
         title: spec.title,
-        bodyHtml,
-        script,
+        bodyHtml: confirmationBodyHtml(spec, { affirmative }),
+        script: confirmationScript({ plan: confirmationPlan(spec, { alternatives }), text, choicesParam, affirmative }),
         app: spec.app ?? DEFAULT_APP,
         ...(spec.lang === undefined ? {} : { lang: spec.lang }),
         ...(spec.tokens === undefined ? {} : { tokens: spec.tokens }),

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

@@ -8,7 +8,7 @@ import { type SurfaceTokenName } from './tokens.js';
  * be a color no caller could reskin. `var(--x, fallback)` appears only where a value is genuinely
  * optional.
  */
-export declare const SURFACE_BASE_CSS = "*, *::before, *::after { box-sizing: border-box; }\nhtml, body { margin: 0; padding: 0; }\nbody {\n  /* Transparent, not var(--jini-mcpui-bg): this document has no page of its own to paint. It is an\n     allow-scripts-only sandboxed iframe embedded directly in a host's chat transcript, and html's\n     background is left at its (also transparent) initial value, so the host's own pane shows\n     straight through to .mcpui-surface below rather than through a second, unrelated rectangle of\n     fill color sitting between the two. --jini-mcpui-bg stays declared for a caller styling\n     something else via extraCss -- nothing in this stylesheet reads it anymore. */\n  background: transparent;\n  color: var(--jini-mcpui-text);\n  font-family: var(--jini-mcpui-font);\n  font-size: 14px;\n  line-height: 1.5;\n  padding: 16px;\n  -webkit-font-smoothing: antialiased;\n}\n.mcpui-surface {\n  background: linear-gradient(135deg,\n    color-mix(in srgb, var(--jini-mcpui-accent) 5%, var(--jini-mcpui-panel)) 0%,\n    var(--jini-mcpui-panel) 60%);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 18%, var(--jini-mcpui-border));\n  border-radius: var(--jini-mcpui-radius-md);\n  box-shadow: var(--jini-mcpui-surface-shadow);\n  padding: 18px 20px 16px;\n  max-width: 640px;\n  margin: 0 auto;\n}\n.mcpui-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--jini-mcpui-text-strong);\n}\n.mcpui-description { margin: 6px 0 0; color: var(--jini-mcpui-text-muted); }\n.mcpui-details {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 4px 14px;\n  margin: 14px 0 0;\n}\n.mcpui-details dt { color: var(--jini-mcpui-text-soft); font-weight: 500; }\n.mcpui-details dd { margin: 0; overflow-wrap: anywhere; color: var(--jini-mcpui-text); }\n.mcpui-details-outcome { display: flex; flex-direction: column; gap: 8px; }\n.mcpui-outcome-row { display: flex; align-items: flex-start; gap: 14px; }\n.mcpui-outcome-row dt { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.mcpui-outcome-row dt .mcpui-hint { display: block; font-weight: 400; }\n.mcpui-outcome-row dd { flex: 1; min-width: 0; }\n/* Capped so a long status cannot squeeze the label back to one character per line; the full text\n   stays in the cell's title. */\n.mcpui-outcome-row dd.mcpui-detail-status {\n  flex: 0 1 auto; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n/* The iframe has 16px body padding on each side: 352px viewport = 320px card. Stacked, the value\n   has the full width, so it wraps between words instead of truncating. */\n@media (max-width: 352px) {\n  .mcpui-outcome-row { flex-direction: column; gap: 2px; }\n  .mcpui-outcome-row dd.mcpui-detail-status { max-width: 100%; white-space: normal; overflow-wrap: normal; }\n}\n.mcpui-code {\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  max-height: 16em;\n  overflow: auto;\n  font-family: var(--jini-mcpui-font-mono);\n  font-size: 12.5px;\n  line-height: 1.45;\n  padding: 6px 8px;\n  border: 1px solid var(--jini-mcpui-border);\n  border-radius: var(--jini-mcpui-radius-sm);\n  background: var(--jini-mcpui-bg);\n}\n.mcpui-warning {\n  margin: 14px 0 0;\n  padding: 9px 11px;\n  border-radius: var(--jini-mcpui-radius-md);\n  border: 1px solid var(--jini-mcpui-danger);\n  background: var(--jini-mcpui-danger-tint);\n  color: var(--jini-mcpui-text-strong);\n}\n.mcpui-fields { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; border: 0; padding: 0; }\n.mcpui-field { display: flex; flex-direction: column; gap: 4px; }\n.mcpui-field-inline { flex-direction: row; align-items: flex-start; gap: 8px; }\n.mcpui-label { font-weight: 500; color: var(--jini-mcpui-text-strong); }\n.mcpui-required { color: var(--jini-mcpui-accent); margin-left: 2px; }\n.mcpui-hint { color: var(--jini-mcpui-text-soft); font-size: 13px; }\n.mcpui-input, .mcpui-select, .mcpui-textarea {\n  font: inherit;\n  color: var(--jini-mcpui-text);\n  background: var(--jini-mcpui-panel);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 14%, var(--jini-mcpui-border-strong));\n  border-radius: var(--jini-mcpui-radius-sm);\n  padding: 7px 9px;\n  width: 100%;\n  min-width: 0;\n}\n.mcpui-textarea { resize: vertical; min-height: 72px; font-family: var(--jini-mcpui-font); }\n.mcpui-checkbox { margin: 3px 0 0; accent-color: var(--jini-mcpui-accent); }\n.mcpui-choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }\n.mcpui-choice { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; margin: 6px 0 0; }\n.mcpui-choice-label { color: var(--jini-mcpui-text); font-weight: 400; }\n.mcpui-input:focus-visible, .mcpui-select:focus-visible, .mcpui-textarea:focus-visible,\n.mcpui-checkbox:focus-visible, .mcpui-button:focus-visible {\n  outline: 2px solid var(--jini-mcpui-accent-ring);\n  outline-offset: 1px;\n  border-color: var(--jini-mcpui-accent);\n}\n.mcpui-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }\n.mcpui-button {\n  font: inherit;\n  font-weight: 500;\n  padding: 7px 15px;\n  border-radius: var(--jini-mcpui-radius-pill);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 14%, var(--jini-mcpui-border-strong));\n  background: var(--jini-mcpui-panel);\n  color: var(--jini-mcpui-text);\n  cursor: pointer;\n}\n.mcpui-button:hover:not([disabled]) { background: var(--jini-mcpui-accent-tint); }\n.mcpui-button-primary {\n  background: var(--jini-mcpui-accent);\n  border-color: var(--jini-mcpui-accent);\n  color: var(--jini-mcpui-accent-ink);\n}\n.mcpui-button-primary:hover:not([disabled]) { background: var(--jini-mcpui-accent-hover); border-color: var(--jini-mcpui-accent-hover); }\n.mcpui-button-danger {\n  background: var(--jini-mcpui-danger);\n  border-color: var(--jini-mcpui-danger);\n  color: var(--jini-mcpui-panel);\n}\n.mcpui-button-danger:hover:not([disabled]) { background: var(--jini-mcpui-danger-hover); border-color: var(--jini-mcpui-danger-hover); }\n.mcpui-button[disabled] { opacity: 0.55; cursor: default; }\n.mcpui-status { margin: 12px 0 0; min-height: 1.4em; color: var(--jini-mcpui-text-muted); }\n.mcpui-status[data-state=\"failed\"], .mcpui-status[data-state=\"invalid\"], .mcpui-status[data-state=\"expired\"] { color: var(--jini-mcpui-danger); }\n.mcpui-status[data-state=\"done\"] { color: var(--jini-mcpui-text-strong); }\n/* Neither a plain success nor a failure \u2014 e.g. an outcome surface reporting \"uploaded, not yet\n   reachable\" (outcome.ts's own state: partial). Distinct from both --jini-mcpui-danger (would\n   wrongly read as \"this failed\") and --jini-mcpui-text-strong (would wrongly read as \"this is\n   fully done\"); the accent token reads as \"worth a second look\" without asserting either. */\n.mcpui-status[data-state=\"partial\"] { color: var(--jini-mcpui-accent); }\n.mcpui-code { font-family: var(--jini-mcpui-font-mono); font-size: 13px; color: var(--jini-mcpui-text-faint); }";
+export declare const SURFACE_BASE_CSS = "*, *::before, *::after { box-sizing: border-box; }\nhtml, body { margin: 0; padding: 0; }\nbody {\n  /* Transparent, not var(--jini-mcpui-bg): this document has no page of its own to paint. It is an\n     allow-scripts-only sandboxed iframe embedded directly in a host's chat transcript, and html's\n     background is left at its (also transparent) initial value, so the host's own pane shows\n     straight through to .mcpui-surface below rather than through a second, unrelated rectangle of\n     fill color sitting between the two. --jini-mcpui-bg stays declared for a caller styling\n     something else via extraCss -- nothing in this stylesheet reads it anymore. */\n  background: transparent;\n  color: var(--jini-mcpui-text);\n  font-family: var(--jini-mcpui-font);\n  font-size: 14px;\n  line-height: 1.5;\n  padding: 16px;\n  -webkit-font-smoothing: antialiased;\n}\n.mcpui-surface {\n  background: linear-gradient(135deg,\n    color-mix(in srgb, var(--jini-mcpui-accent) 5%, var(--jini-mcpui-panel)) 0%,\n    var(--jini-mcpui-panel) 60%);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 18%, var(--jini-mcpui-border));\n  border-radius: var(--jini-mcpui-radius-md);\n  box-shadow: var(--jini-mcpui-surface-shadow);\n  padding: 18px 20px 16px;\n  max-width: 640px;\n  margin: 0 auto;\n}\n.mcpui-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--jini-mcpui-text-strong);\n}\n.mcpui-description { margin: 6px 0 0; color: var(--jini-mcpui-text-muted); }\n/* fit-content(40%), not max-content: one long label used to take the whole row and squeeze every\n   value to one character per line. Labels wrap at 40% instead. */\n.mcpui-details {\n  display: grid;\n  grid-template-columns: fit-content(40%) minmax(0, 1fr);\n  gap: 4px 14px;\n  margin: 14px 0 0;\n}\n.mcpui-details dt { color: var(--jini-mcpui-text-soft); font-weight: 500; overflow-wrap: anywhere; }\n.mcpui-details dd { margin: 0; overflow-wrap: anywhere; color: var(--jini-mcpui-text); }\n.mcpui-details-outcome { display: flex; flex-direction: column; gap: 8px; }\n.mcpui-outcome-row { display: flex; align-items: flex-start; gap: 14px; }\n.mcpui-outcome-row dt { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.mcpui-outcome-row dt .mcpui-hint { display: block; font-weight: 400; }\n.mcpui-outcome-row dd { flex: 1; min-width: 0; }\n/* Capped so a long status cannot squeeze the label back to one character per line; the full text\n   stays in the cell's title. */\n.mcpui-outcome-row dd.mcpui-detail-status {\n  flex: 0 1 auto; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n/* Frames up to 480px: stack each label above its value so the value gets the full width.\n   Outcome lists keep their own row layout. */\n@media (max-width: 480px) {\n  .mcpui-details:not(.mcpui-details-outcome) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }\n  .mcpui-details:not(.mcpui-details-outcome) dd { margin-bottom: 8px; }\n}\n/* The iframe has 16px body padding on each side: 352px viewport = 320px card. Stacked, the value\n   has the full width, so it wraps between words instead of truncating. */\n@media (max-width: 352px) {\n  .mcpui-outcome-row { flex-direction: column; gap: 2px; }\n  .mcpui-outcome-row dd.mcpui-detail-status { max-width: 100%; white-space: normal; overflow-wrap: normal; }\n}\n.mcpui-code {\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  max-height: 16em;\n  overflow: auto;\n  font-family: var(--jini-mcpui-font-mono);\n  font-size: 12.5px;\n  line-height: 1.45;\n  padding: 6px 8px;\n  border: 1px solid var(--jini-mcpui-border);\n  border-radius: var(--jini-mcpui-radius-sm);\n  background: var(--jini-mcpui-bg);\n}\n.mcpui-warning {\n  margin: 14px 0 0;\n  padding: 9px 11px;\n  border-radius: var(--jini-mcpui-radius-md);\n  border: 1px solid var(--jini-mcpui-danger);\n  background: var(--jini-mcpui-danger-tint);\n  color: var(--jini-mcpui-text-strong);\n}\n.mcpui-fields { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; border: 0; padding: 0; }\n.mcpui-field { display: flex; flex-direction: column; gap: 4px; }\n.mcpui-field-inline { flex-direction: row; align-items: flex-start; gap: 8px; }\n.mcpui-label { font-weight: 500; color: var(--jini-mcpui-text-strong); }\n.mcpui-required { color: var(--jini-mcpui-accent); margin-left: 2px; }\n.mcpui-hint { color: var(--jini-mcpui-text-soft); font-size: 13px; }\n.mcpui-input, .mcpui-select, .mcpui-textarea {\n  font: inherit;\n  color: var(--jini-mcpui-text);\n  background: var(--jini-mcpui-panel);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 14%, var(--jini-mcpui-border-strong));\n  border-radius: var(--jini-mcpui-radius-sm);\n  padding: 7px 9px;\n  width: 100%;\n  min-width: 0;\n}\n.mcpui-textarea { resize: vertical; min-height: 72px; font-family: var(--jini-mcpui-font); }\n.mcpui-checkbox { margin: 3px 0 0; accent-color: var(--jini-mcpui-accent); }\n.mcpui-choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }\n.mcpui-choice { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; margin: 6px 0 0; }\n.mcpui-choice-label { color: var(--jini-mcpui-text); font-weight: 400; }\n.mcpui-input:focus-visible, .mcpui-select:focus-visible, .mcpui-textarea:focus-visible,\n.mcpui-checkbox:focus-visible, .mcpui-button:focus-visible {\n  outline: 2px solid var(--jini-mcpui-accent-ring);\n  outline-offset: 1px;\n  border-color: var(--jini-mcpui-accent);\n}\n.mcpui-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }\n.mcpui-button {\n  font: inherit;\n  font-weight: 500;\n  padding: 7px 15px;\n  border-radius: var(--jini-mcpui-radius-pill);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 14%, var(--jini-mcpui-border-strong));\n  background: var(--jini-mcpui-panel);\n  color: var(--jini-mcpui-text);\n  cursor: pointer;\n}\n.mcpui-button:hover:not([disabled]) { background: var(--jini-mcpui-accent-tint); }\n.mcpui-button-primary {\n  background: var(--jini-mcpui-accent);\n  border-color: var(--jini-mcpui-accent);\n  color: var(--jini-mcpui-accent-ink);\n}\n.mcpui-button-primary:hover:not([disabled]) { background: var(--jini-mcpui-accent-hover); border-color: var(--jini-mcpui-accent-hover); }\n.mcpui-button-danger {\n  background: var(--jini-mcpui-danger);\n  border-color: var(--jini-mcpui-danger);\n  color: var(--jini-mcpui-panel);\n}\n.mcpui-button-danger:hover:not([disabled]) { background: var(--jini-mcpui-danger-hover); border-color: var(--jini-mcpui-danger-hover); }\n.mcpui-button[disabled] { opacity: 0.55; cursor: default; }\n.mcpui-status { margin: 12px 0 0; min-height: 1.4em; color: var(--jini-mcpui-text-muted); }\n.mcpui-status[data-state=\"failed\"], .mcpui-status[data-state=\"invalid\"], .mcpui-status[data-state=\"expired\"] { color: var(--jini-mcpui-danger); }\n.mcpui-status[data-state=\"done\"] { color: var(--jini-mcpui-text-strong); }\n/* Neither a plain success nor a failure \u2014 e.g. an outcome surface reporting \"uploaded, not yet\n   reachable\" (outcome.ts's own state: partial). Distinct from both --jini-mcpui-danger (would\n   wrongly read as \"this failed\") and --jini-mcpui-text-strong (would wrongly read as \"this is\n   fully done\"); the accent token reads as \"worth a second look\" without asserting either. */\n.mcpui-status[data-state=\"partial\"] { color: var(--jini-mcpui-accent); }\n.mcpui-code { font-family: var(--jini-mcpui-font-mono); font-size: 13px; color: var(--jini-mcpui-text-faint); }";
 /**
  * The Content-Security-Policy every generated surface declares in its own `<head>`.
  *

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

@@ -59,13 +59,15 @@ body {
   color: var(--jini-mcpui-text-strong);
 }
 .mcpui-description { margin: 6px 0 0; color: var(--jini-mcpui-text-muted); }
+/* fit-content(40%), not max-content: one long label used to take the whole row and squeeze every
+   value to one character per line. Labels wrap at 40% instead. */
 .mcpui-details {
   display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
+  grid-template-columns: fit-content(40%) minmax(0, 1fr);
   gap: 4px 14px;
   margin: 14px 0 0;
 }
-.mcpui-details dt { color: var(--jini-mcpui-text-soft); font-weight: 500; }
+.mcpui-details dt { color: var(--jini-mcpui-text-soft); font-weight: 500; overflow-wrap: anywhere; }
 .mcpui-details dd { margin: 0; overflow-wrap: anywhere; color: var(--jini-mcpui-text); }
 .mcpui-details-outcome { display: flex; flex-direction: column; gap: 8px; }
 .mcpui-outcome-row { display: flex; align-items: flex-start; gap: 14px; }
@@ -77,6 +79,12 @@ body {
 .mcpui-outcome-row dd.mcpui-detail-status {
   flex: 0 1 auto; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
+/* Frames up to 480px: stack each label above its value so the value gets the full width.
+   Outcome lists keep their own row layout. */
+@media (max-width: 480px) {
+  .mcpui-details:not(.mcpui-details-outcome) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
+  .mcpui-details:not(.mcpui-details-outcome) dd { margin-bottom: 8px; }
+}
 /* The iframe has 16px body padding on each side: 352px viewport = 320px card. Stacked, the value
    has the full width, so it wraps between words instead of truncating. */
 @media (max-width: 352px) {