@jini-ai/ui 0.3.13 → 0.3.14

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

@@ -26,7 +26,8 @@ export interface BridgeScriptSpec {
  *   rejected with the Host's own error message on a JSON-RPC error response.
  * - `notify(method, params)` → a raw fire-and-forget notification, for the lifecycle messages a
  *   surface may want beyond what the bridge sends itself.
- * - `openLink(url)` → `ui/open-link`, the only way an isolated frame can navigate anything.
+ * - `openLink(url)` → `Promise` of the Host's answer to the `ui/open-link` REQUEST (queued until the
+ *   handshake completes, like `callTool`) — the only way an isolated frame can navigate anything.
  * - `requestTeardown()` → `ui/notifications/request-teardown`, the draft-spec way for a "Done"
  *   button to ask the Host to remove the frame.
  * - `whenReady(fn)` → runs `fn` after the handshake, immediately if it already completed.

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

@@ -60,7 +60,8 @@ export const SURFACE_HANDSHAKE_FAILED_ATTRIBUTE = 'data-mcpui-handshake-failed';
  *   rejected with the Host's own error message on a JSON-RPC error response.
  * - `notify(method, params)` → a raw fire-and-forget notification, for the lifecycle messages a
  *   surface may want beyond what the bridge sends itself.
- * - `openLink(url)` → `ui/open-link`, the only way an isolated frame can navigate anything.
+ * - `openLink(url)` → `Promise` of the Host's answer to the `ui/open-link` REQUEST (queued until the
+ *   handshake completes, like `callTool`) — the only way an isolated frame can navigate anything.
  * - `requestTeardown()` → `ui/notifications/request-teardown`, the draft-spec way for a "Done"
  *   button to ask the Host to remove the frame.
  * - `whenReady(fn)` → runs `fn` after the handshake, immediately if it already completed.
@@ -115,14 +116,23 @@ export function renderBridgeScript(spec) {
   // tools/call with a JSON-RPC invalidRequest, so sending early would turn "the user clicked a
   // little too fast" into a refusal the surface would have to explain. A call held when the
   // handshake FAILS is rejected rather than held forever, so the dialog can say so.
-  function callTool(name, args) {
-    var params = { name: name, arguments: args || {} };
-    if (ready) return request("tools/call", params);
+  function requestWhenReady(method, params) {
+    if (ready) return request(method, params);
     return new Promise(function (resolve, reject) {
-      queuedCalls.push({ resolve: resolve, reject: reject, params: params });
+      queuedCalls.push({ resolve: resolve, reject: reject, method: method, params: params });
     });
   }
 
+  function callTool(name, args) {
+    return requestWhenReady("tools/call", { name: name, arguments: args || {} });
+  }
+
+  // A REQUEST, not a notification: the spec defines ui/open-link as a request, and @mcp-ui/client's
+  // AppBridge registers it with setRequestHandler, so an id-less message is silently dropped.
+  function openLink(url) {
+    return requestWhenReady("ui/open-link", { url: url });
+  }
+
   function reportSize() {
     var root = document.documentElement;
     notify("ui/notifications/size-changed", { width: root.scrollWidth, height: root.scrollHeight });
@@ -164,7 +174,7 @@ export function renderBridgeScript(spec) {
     var handlers = readyHandlers;
     queuedCalls = [];
     readyHandlers = [];
-    for (var i = 0; i < calls.length; i++) request("tools/call", calls[i].params).then(calls[i].resolve, calls[i].reject);
+    for (var i = 0; i < calls.length; i++) request(calls[i].method, calls[i].params).then(calls[i].resolve, calls[i].reject);
     for (var j = 0; j < handlers.length; j++) handlers[j]();
     if (typeof ResizeObserver === "function") new ResizeObserver(reportSize).observe(document.documentElement);
   }
@@ -190,7 +200,7 @@ export function renderBridgeScript(spec) {
   window.${global} = {
     callTool: callTool,
     notify: notify,
-    openLink: function (url) { notify("ui/open-link", { url: url }); },
+    openLink: openLink,
     requestTeardown: function () { notify("ui/notifications/request-teardown"); },
     whenReady: function (fn) { if (ready) fn(); else if (!settled) readyHandlers.push(fn); },
     hostContext: function () { return hostContext; },

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

@@ -38,6 +38,18 @@ export interface ConfirmationToolAction {
     /** Passed verbatim as the tool's `arguments`. The only safe home for a confirmation token. */
     readonly params: Readonly<Record<string, unknown>>;
 }
+/**
+ * A further affirmative button beside confirm, such as "Allow for this chat" next to "Allow" — see
+ * {@link ConfirmationSurfaceSpec.alternatives}.
+ */
+export interface ConfirmationAlternative extends ConfirmationToolAction {
+    /**
+     * The button's `data-mcpui-action` handle. A lowercase `[a-z0-9]+(-[a-z0-9]+)*` handle, unique,
+     * and never `confirm` or `cancel`: the script dispatches on it, and an agent driving the frame
+     * finds the button by it (`mcpui-action-<id>`).
+     */
+    readonly id: string;
+}
 /** One row of an optional per-item checkbox list — see {@link ConfirmationSurfaceSpec.choices}. */
 export interface ConfirmationChoice {
     /**
@@ -74,6 +86,14 @@ export interface ConfirmationSurfaceSpec {
     /** Styles the affirmative button as destructive. Affects presentation only; it changes no behavior. */
     readonly danger?: boolean;
     readonly confirm: ConfirmationToolAction;
+    /**
+     * Further affirmative buttons, rendered after confirm and before cancel, each calling its own tool
+     * with its own params. Every one is held to exactly what confirm is held to: disabled until the
+     * dwell has run, only a trusted click counts, one call locks the whole dialog, and ticked
+     * {@link choices} ride along on it the way they ride on confirm. With none, the dialog renders and
+     * behaves exactly as the two-button one does.
+     */
+    readonly alternatives?: readonly ConfirmationAlternative[];
     /** Omit for a dialog whose cancel only dismisses. Give it a tool to burn a pending token server-side. */
     readonly cancel?: ConfirmationToolAction | {
         readonly label: string;

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

@@ -40,6 +40,17 @@ import { renderCheckbox } from './checkbox.js';
  */
 export const CONFIRM_DWELL_MS = 1500;
 const DEFAULT_APP = { appName: 'jini-mcp-ui-confirmation', appVersion: '1' };
+const ALTERNATIVE_ID_PATTERN = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+/** Refuses an alternative id the script or a driver could confuse with another button. */
+function assertAlternativeIds(alternatives) {
+    const seen = new Set(['confirm', 'cancel']);
+    for (const alternative of alternatives) {
+        if (!ALTERNATIVE_ID_PATTERN.test(alternative.id) || seen.has(alternative.id)) {
+            throw new Error(`Confirmation alternative ids must be unique lowercase handles other than "confirm" and "cancel"; ${JSON.stringify(alternative.id)} is not.`);
+        }
+        seen.add(alternative.id);
+    }
+}
 function isToolAction(action) {
     return action !== undefined && 'toolName' in action;
 }
@@ -93,6 +104,7 @@ function renderChoices(choices) {
 function confirmationActions(spec) {
     const actions = [
         { id: 'confirm', label: spec.confirm.label, variant: spec.danger === true ? 'danger' : 'primary' },
+        ...(spec.alternatives ?? []).map((alternative) => ({ id: alternative.id, label: alternative.label, variant: 'neutral' })),
     ];
     if (spec.cancel !== undefined)
         actions.push({ id: 'cancel', label: spec.cancel.label, variant: 'neutral' });
@@ -106,7 +118,16 @@ export function renderConfirmationDocument(spec) {
     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.`);
     }
+    for (const alternative of (spec.choices ?? []).length > 0 ? (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)]);
     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 }),
@@ -114,7 +135,7 @@ export function renderConfirmationDocument(spec) {
         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))),
+        renderActions(actions.map((action) => (affirmative.has(action.id) ? { ...action, disabled: true } : action))),
         renderStatusRegion(),
     ]
         .filter((fragment) => fragment !== '')
@@ -125,6 +146,9 @@ export function renderConfirmationDocument(spec) {
     const plan = {
         confirm: { toolName: spec.confirm.toolName, params: spec.confirm.params },
     };
+    for (const alternative of alternatives) {
+        plan[alternative.id] = { toolName: alternative.toolName, params: alternative.params };
+    }
     if (spec.cancel !== undefined) {
         plan['cancel'] = isToolAction(spec.cancel)
             ? { toolName: spec.cancel.toolName, params: spec.cancel.params }
@@ -137,6 +161,10 @@ ${SURFACE_SCRIPT_PRELUDE}
   var TEXT = ${escapeJsValue(text)};
   var DWELL_MS = ${CONFIRM_DWELL_MS};
   var CHOICES_PARAM = ${escapeJsValue(choicesParam)};
+  var AFFIRMATIVE = ${escapeJsValue([...affirmative])};
+  function isAffirmative(action) {
+    return AFFIRMATIVE.indexOf(action) !== -1;
+  }
 
   // Monotonic where available: a wall clock set backwards would otherwise stretch the dwell.
   function now() {
@@ -150,14 +178,18 @@ ${SURFACE_SCRIPT_PRELUDE}
   // has not been seen, so its dwell starts when it is shown, and restarts each time it is shown again.
   var visibleSince = null;
   var dwellTimer = null;
-  var confirmButton = document.querySelector('[data-mcpui-action="confirm"]');
+  var affirmativeButtons = actionButtons.filter(function (node) {
+    return isAffirmative(node.getAttribute("data-mcpui-action"));
+  });
 
   function dwellDone() {
     return visibleSince !== null && now() - visibleSince >= DWELL_MS;
   }
-  // Confirm is enabled exactly when the dwell has run out and no call holds the dialog.
+  // Confirm (and every alternative) is enabled exactly when the dwell has run out and no call holds
+  // the dialog.
   function syncConfirm() {
-    if (confirmButton !== null && !locked) confirmButton.disabled = !dwellDone();
+    if (locked) return;
+    for (var b = 0; b < affirmativeButtons.length; b++) affirmativeButtons[b].disabled = !dwellDone();
   }
   // Re-checks rather than trusts the timer: setTimeout and now() are different clocks, and a timer
   // that fired a hair early must not leave confirm disabled for good.
@@ -231,7 +263,7 @@ ${SURFACE_SCRIPT_PRELUDE}
     var step = PLAN[action];
     if (step === undefined) return;
     // Cancel is exempt: backing out early is never the harm this guards against.
-    if (action === "confirm" && !dwellDone()) return;
+    if (isAffirmative(action) && !dwellDone()) return;
     locked = true;
     setChoicesDisabled(true);
     if (step === null) {
@@ -243,7 +275,7 @@ ${SURFACE_SCRIPT_PRELUDE}
     // 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) {
+    if (isAffirmative(action) && 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];

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-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-panel);\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.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-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-panel);\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>`.
  *
@@ -66,6 +66,12 @@ export declare function renderSurfaceHeader(spec: {
 export interface SurfaceDetail {
     readonly label: string;
     readonly value: string;
+    /**
+     * `code` renders the value in a monospace `<pre>` that keeps its line breaks and scrolls inside
+     * its own box past a fixed height, so a long SQL statement or JSON argument stays readable without
+     * stretching the dialog past its frame. Omitted (or `text`) keeps the plain inline value.
+     */
+    readonly format?: 'text' | 'code';
 }
 /**
  * Renders a `label: value` description list.

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

@@ -67,6 +67,20 @@ body {
 }
 .mcpui-details dt { color: var(--jini-mcpui-text-soft); font-weight: 500; }
 .mcpui-details dd { margin: 0; overflow-wrap: anywhere; color: var(--jini-mcpui-text); }
+.mcpui-code {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-height: 16em;
+  overflow: auto;
+  font-family: var(--jini-mcpui-font-mono);
+  font-size: 12.5px;
+  line-height: 1.45;
+  padding: 6px 8px;
+  border: 1px solid var(--jini-mcpui-border);
+  border-radius: var(--jini-mcpui-radius-sm);
+  background: var(--jini-mcpui-bg);
+}
 .mcpui-warning {
   margin: 14px 0 0;
   padding: 9px 11px;
@@ -209,7 +223,11 @@ export function renderDetailList(details) {
     if (details.length === 0)
         return '';
     const rows = details
-        .map((detail) => `  <dt>${escapeHtml(detail.label)}</dt><dd>${escapeHtml(detail.value)}</dd>`)
+        .map((detail) => {
+        const value = escapeHtml(detail.value);
+        const body = detail.format === 'code' ? `<pre class="mcpui-code">${value}</pre>` : value;
+        return `  <dt>${escapeHtml(detail.label)}</dt><dd>${body}</dd>`;
+    })
         .join('\n');
     return `<dl class="mcpui-details">\n${rows}\n</dl>`;
 }

package/dist/features/mcp-ui/surfaces/text-input.js

@@ -48,10 +48,10 @@ export function renderTextInput(props) {
         ? `<textarea class="mcpui-textarea"${common}${optionalAttribute('rows', props.rows)}>${props.value === undefined ? '' : escapeHtml(String(props.value))}</textarea>`
         : `<input class="mcpui-input" type="${type}"${common}` +
             optionalAttribute('value', props.value) +
-            // A stored secret (e.g. a cloud provider's access key) must never be offered to a browser's
-            // password manager as a saveable website login — it belongs to this `ui://` surface, not a
-            // credential the browser should remember.
-            (props.secret === true ? optionalAttribute('autocomplete', 'off') : '') +
+            // A stored secret (e.g. a cloud provider's access key or a database password) must never be
+            // autofilled with a saved website login. `new-password`, not `off`: Chrome ignores `off` on
+            // password inputs by design and fills the saved login anyway.
+            (type === 'password' ? optionalAttribute('autocomplete', 'new-password') : '') +
             (isNumber
                 ? optionalAttribute('min', props.min) + optionalAttribute('max', props.max) + optionalAttribute('step', props.step)
                 : '') +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/ui",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "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,9 +107,9 @@
     "shiki": "^1.24.4",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.25.76",
-    "@jini-ai/platform": "0.3.0",
-    "@jini-ai/protocol": "0.3.0",
-    "@jini-ai/agentic": "0.3.7"
+    "@jini-ai/agentic": "0.3.7",
+    "@jini-ai/protocol": "0.3.1",
+    "@jini-ai/platform": "0.3.0"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",