@jini-ai/ui 0.6.12 → 0.6.15-rc.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @jini-ai/ui
 
+## 0.6.13
+
+### Patch Changes
+
+- 0728914: Engine guard clean-up (`pnpm guard` 106 -> 0): layer, subpath-isolation and module-state findings fixed by moving
+  shared contracts to their owners instead of reaching across domains. Additive public API: `@jini-ai/core/filesystem`
+  (guarded-reader contracts), `useFetchQueryScope` from `@jini-ai/ui` fetch-query (per-provider query scope),
+  `@jini-ai/chat/react` re-exports of the accepted-input, run-state and agent-plugin chat-state helpers. The Claude
+  filesystem probe cache in `@jini-ai/agent-runtime` is instance-owned. No behaviour change intended; host-facing
+  breaks are listed in `owner-store-to-server` and `guard-host-ports`.
+- 0a2b903: Share accessible eye toggles across React credential fields, including multiline question answers,
+  CLI overrides, provider keys, login, new users, password resets, and source configuration. Preserve
+  autofill protection, translated toggle names, agent handles, and secret-answer redaction. Hidden
+  source environment blocks keep names visible and stored values masked until explicitly revealed.
+
+  Chat and user-management require `@jini-ai/ui ^0.5.7` for the new `SecretInput` and `SecretTextarea`
+  exports. Release UI 0.5.7 (or adjust those peer floors to the actual release containing these exports)
+  with these consumers; older UI versions cannot satisfy their imports. Hosts supply `.jini-secret`,
+  `.jini-secret-toggle`, and `.jini-secret--multiline` visual rules.
+
+- 01de8c4: Allow the built-in fetch-query provider to accept core clock and scheduler ports while retaining existing timing defaults and provider-scoped cleanup.
+- Updated dependencies [7479159]
+- Updated dependencies [c31264d]
+- Updated dependencies [0728914]
+- Updated dependencies [6ecbdb2]
+- Updated dependencies [63bacc5]
+  - @jini-ai/core@0.6.13
+
 ## 0.6.12
 
 ### Patch Changes

package/README.md

@@ -478,6 +478,20 @@ Fetch-query caches accept the shared `Clock` from `@jini-ai/core/primitives` thr
 by default and idle retention five minutes. Browser HTTP defaults now use injected
 native fetch ports and have no platform imports.
 
+The built-in `@jini-ai/ui/fetch-query` provider accepts those same optional ports:
+
+```tsx
+<FetchQueryProvider environment={environment} clock={clock} scheduler={scheduler}>
+  <Records />
+</FetchQueryProvider>
+```
+
+`clock.nowMs()` controls cache timestamps and freshness. The scheduler's
+`schedule({ callback, delayMs })` returns a handle; `cancel({ handle })` releases it.
+Omitted ports retain real-clock/native-timer defaults. Keep the injected objects stable:
+replacing `environment`, `clock` or `scheduler` recreates the cache and disposes the previous
+scope's timers and subscriptions. Timing injection applies only to the built-in provider.
+
 The A2UI interpreter uses that same core `Clock` with `nowMs()`; import the clock type
 directly from `@jini-ai/core/primitives`. The obsolete `A2uiClockPort` re-export is removed.
 Create the basic catalog with `createLabCatalog({})` and inject it through

package/dist/features/admin-widgets/components/InfoTip.d.ts

@@ -10,8 +10,9 @@ import { useInfoTip } from "./InfoTip.hooks.js";
  * preference, with the hook's headroom guard choosing below near the viewport's top; near a side
  * edge (or a host panel marked `data-jini-tip-bounds`) it shifts by its real width, never squeezes.
  * Keep state and DOM measurement in the injectable hook so rendering can use fixed fake state.
- * Touch has no hover, so a tap (or Enter/Space) pins the tip open until a second tap, an outside
- * tap, blur or Escape; a hover-opened tip still closes when the pointer leaves.
+ * Touch has no hover, so a tap pins the tip open until a second tap, an outside tap, blur, Escape
+ * or a 2.5 s timeout; Enter/Space pin it without the timeout. A hover- or mouse-click-opened tip
+ * closes when the pointer leaves, and only one tip is open at a time.
  */
 export interface InfoTipProps {
     /** The explanation the bubble shows; newlines separate lines, and "• " lines show as a hanging list. */

package/dist/features/admin-widgets/components/InfoTip.hooks.d.ts

@@ -3,6 +3,16 @@ import { type KeyboardEvent } from "react";
  * measurement, so another async dependency/port layer would provide no rejection seam to test. */
 /** Hosts mark a panel (e.g. an assistant dock) with this attribute to keep tips inside it. */
 export declare const TIP_BOUNDS_ATTRIBUTE = "data-jini-tip-bounds";
+/** How long a tap-opened tip stays up on its own; touch has no pointer-leave to close it. */
+export declare const TAP_TIP_MS = 2500;
+/**
+ * Makes `close` the one open tip, closing whichever tip held that slot before. Hosts with their own
+ * tip state (e.g. a dock-header tip) can call it too, to join the same one-open rule.
+ * @param close Closes the claiming tip; identity must stay stable while it is open.
+ * @returns A release that empties the slot only if `close` still holds it.
+ * @complexity O(1).
+ */
+export declare function claimOpenTip(close: () => void): () => void;
 export interface InfoTipController {
     open: boolean;
     placement: "above" | "below";
@@ -21,9 +31,14 @@ export interface InfoTipController {
     hide: () => void;
     /** Pointer left the icon: closes only a hover-opened tip, never one the operator tapped open. */
     leave: () => void;
-    /** Tap/click/Enter/Space: pins an open tip so it survives the pointer leaving (touch has no
-     *  hover to keep it up), or closes a pinned one. Hover alone never pins. */
+    /** Tap/Enter/Space: pins an open tip so it survives the pointer leaving (touch has no hover to
+     *  keep it up), or closes a pinned one. Hover and mouse clicks never pin. */
     toggle: () => void;
+    /** Records the pointer type of the press a following click comes from; optional for injected
+     *  controllers. */
+    pointerDown?: (e: {
+        pointerType: string;
+    }) => void;
     /** Escape closes in place; Enter/Space toggle like a button; blur covers Tab/Shift+Tab. */
     handleIconKeyDown: (e: KeyboardEvent<HTMLSpanElement>) => void;
 }

package/dist/features/admin-widgets/components/InfoTip.hooks.js

@@ -5,6 +5,27 @@ import { placeInfoTipBubble } from "./InfoTip.rules.js";
  * measurement, so another async dependency/port layer would provide no rejection seam to test. */
 /** Hosts mark a panel (e.g. an assistant dock) with this attribute to keep tips inside it. */
 export const TIP_BOUNDS_ATTRIBUTE = "data-jini-tip-bounds";
+/** How long a tap-opened tip stays up on its own; touch has no pointer-leave to close it. */
+export const TAP_TIP_MS = 2500;
+/** The close of the one tip open app-wide. A pinned or focused tip used to stay up beside the one
+ * the pointer had just reached (owner, 2026-10-25: two "Soon" tips open at once). */
+let closeOpenTip = null;
+/**
+ * Makes `close` the one open tip, closing whichever tip held that slot before. Hosts with their own
+ * tip state (e.g. a dock-header tip) can call it too, to join the same one-open rule.
+ * @param close Closes the claiming tip; identity must stay stable while it is open.
+ * @returns A release that empties the slot only if `close` still holds it.
+ * @complexity O(1).
+ */
+export function claimOpenTip(close) {
+    if (closeOpenTip && closeOpenTip !== close)
+        closeOpenTip();
+    closeOpenTip = close;
+    return () => {
+        if (closeOpenTip === close)
+            closeOpenTip = null;
+    };
+}
 /** Prefer a host's placement when the measured bubble fits; default preserves automatic flipping.
  * @complexity Time/space: O(1), with one icon and one bubble measurement.
  */
@@ -12,9 +33,16 @@ export function useInfoTip(_input = {}, { placement: preferredPlacement } = {})
     const [open, setOpen] = useState(false);
     const [placement, setPlacement] = useState("above");
     const [coords, setCoords] = useState({ top: 0, left: 0 });
+    // "tap" pins auto-hide; "key" (Enter/Space) pins stay until blur or Escape.
     const [pinned, setPinned] = useState(false);
     const iconRef = useRef(null);
     const bubbleRef = useRef(null);
+    const pointerTypeRef = useRef(null);
+    // Stable identity for the one-open-tip slot; state setters never change.
+    const hide = useRef(() => {
+        setOpen(false);
+        setPinned(false);
+    }).current;
     // Placement math lives in `placeInfoTipBubble`; this only gathers the measurements. Before the
     // portal exists the bubble is unmeasured and the rules assume the worst-case width.
     const place = () => {
@@ -43,36 +71,58 @@ export function useInfoTip(_input = {}, { placement: preferredPlacement } = {})
         if (open)
             place();
     }, [open, preferredPlacement]);
-    const hide = () => {
-        setOpen(false);
-        setPinned(false);
-    };
     const leave = () => {
         if (!pinned)
             setOpen(false);
     };
+    const pointerDown = (e) => {
+        pointerTypeRef.current = e.pointerType;
+    };
     const toggle = () => {
+        const via = pointerTypeRef.current;
+        pointerTypeRef.current = null;
         if (open && pinned) {
             hide();
             return;
         }
         show();
-        setPinned(true);
+        // A mouse already has hover to hold the tip up; pinning on a mouse click is what left tips
+        // stuck open after the pointer moved on. No pointer press means Enter/Space.
+        if (via !== "mouse")
+            setPinned(via ? "tap" : "key");
     };
-    // A tapped-open tip stays up until the operator taps elsewhere; the bubble itself is
-    // pointer-events:none, so "outside the icon" is every other target.
-    useDismissOnOutsideOrEscape({ onDismiss: hide }, { enabled: pinned, containerRef: iconRef });
-    // The bubble is position:fixed at measured viewport coordinates, so a scroll while it is open
-    // would leave it floating over the wrong content. Re-measure instead of closing: a pinned tip
-    // the operator is reading should follow its icon.
     useEffect(() => {
         if (!open)
             return;
+        return claimOpenTip(hide);
+    }, [open]);
+    // A tapped-open tip stays up until the operator taps elsewhere or it times out; the bubble
+    // itself is pointer-events:none, so "outside the icon" is every other target.
+    useDismissOnOutsideOrEscape({ onDismiss: hide }, { enabled: pinned !== false, containerRef: iconRef });
+    useEffect(() => {
+        if (pinned !== "tap")
+            return;
+        const timer = setTimeout(hide, TAP_TIP_MS);
+        return () => clearTimeout(timer);
+    }, [pinned]);
+    // The bubble is position:fixed at measured viewport coordinates, so a scroll that moves the icon
+    // would leave it floating over the wrong content, and the pointer has usually left the icon
+    // without a mouseleave firing yet: close it. A scroll in an unrelated pane (a streaming chat)
+    // leaves it be. A resize re-measures instead, so it keeps following its icon.
+    useEffect(() => {
+        if (!open)
+            return;
+        const closeIfMoved = (e) => {
+            const icon = iconRef.current;
+            if (icon && e.target instanceof Node && !e.target.contains(icon))
+                return;
+            hide();
+        };
         const follow = () => show();
-        window.addEventListener("scroll", follow, true);
+        window.addEventListener("scroll", closeIfMoved, true);
         window.addEventListener("resize", follow);
         return () => {
-            window.removeEventListener("scroll", follow, true);
+            window.removeEventListener("scroll", closeIfMoved, true);
             window.removeEventListener("resize", follow);
         };
     }, [open]);
@@ -89,6 +139,6 @@ export function useInfoTip(_input = {}, { placement: preferredPlacement } = {})
             toggle();
         }
     }
-    return { open, placement, coords, iconRef, bubbleRef, show, hide, leave, toggle, handleIconKeyDown };
+    return { open, placement, coords, iconRef, bubbleRef, show, hide, leave, toggle, pointerDown, handleIconKeyDown };
 }
 //# sourceMappingURL=InfoTip.hooks.js.map

package/dist/features/admin-widgets/components/InfoTip.js

@@ -7,10 +7,10 @@ import { infoTipBubbleStyle, infoTipLines } from "./InfoTip.rules.js";
 /** Focus/hover tooltip that portals outside clipping ancestors; Escape dismisses in place. */
 export function InfoTip({ label, triggerLabel, descriptionId, placement: preferredPlacement, useTip = useInfoTip, agentHandle: handle, icon }) {
     const inline = preferredPlacement === "inline";
-    const { open, placement, coords, iconRef, bubbleRef, show, hide, leave, toggle, handleIconKeyDown } = useTip({}, { placement: inline ? undefined : preferredPlacement });
+    const { open, placement, coords, iconRef, bubbleRef, show, hide, leave, toggle, pointerDown, handleIconKeyDown } = useTip({}, { placement: inline ? undefined : preferredPlacement });
     const autoId = useId();
     const { name, textId, describedBy } = infoTipNaming({ label, autoId }, { triggerLabel, descriptionId });
-    return (_jsxs("span", { className: inline ? "info-tip info-tip--inline" : "info-tip", children: [_jsx("span", { ref: iconRef, className: icon ? "info-tip-icon info-tip-icon--custom" : "info-tip-icon", role: "button", tabIndex: 0, "aria-label": name, "aria-expanded": open, ...(describedBy ? { "aria-describedby": describedBy } : {}), onMouseEnter: show, onMouseLeave: leave, onFocus: show, onBlur: hide, onClick: toggle, onKeyDown: handleIconKeyDown, ...(handle ? agentHandle({ handle }, { role: "button", label: name }) : {}), children: icon ?? "ⓘ" }), textId ? _jsx("span", { id: textId, hidden: true, children: label }) : null, open ? _jsx(InfoTipOpenCopy, { label: label, inline: inline, placement: placement, coords: coords, iconRef: iconRef, bubbleRef: bubbleRef }) : null] }));
+    return (_jsxs("span", { className: inline ? "info-tip info-tip--inline" : "info-tip", children: [_jsx("span", { ref: iconRef, className: icon ? "info-tip-icon info-tip-icon--custom" : "info-tip-icon", role: "button", tabIndex: 0, "aria-label": name, "aria-expanded": open, ...(describedBy ? { "aria-describedby": describedBy } : {}), onMouseEnter: show, onMouseLeave: leave, onFocus: show, onBlur: hide, onPointerDown: pointerDown, onClick: toggle, onKeyDown: handleIconKeyDown, ...(handle ? agentHandle({ handle }, { role: "button", label: name }) : {}), children: icon ?? "ⓘ" }), textId ? _jsx("span", { id: textId, hidden: true, children: label }) : null, open ? _jsx(InfoTipOpenCopy, { label: label, inline: inline, placement: placement, coords: coords, iconRef: iconRef, bubbleRef: bubbleRef }) : null] }));
 }
 /**
  * The icon's accessible name and the id of the hidden copy of `label` (if any).

package/dist/features/admin-widgets/index.d.ts

@@ -6,7 +6,7 @@ export { InfoTip } from './components/InfoTip.js';
 export type { InfoTipProps } from './components/InfoTip.js';
 export { useInfoTip } from './components/InfoTip.hooks.js';
 export type { InfoTipController } from './components/InfoTip.hooks.js';
-export { TIP_BOUNDS_ATTRIBUTE } from './components/InfoTip.hooks.js';
+export { TIP_BOUNDS_ATTRIBUTE, TAP_TIP_MS, claimOpenTip } from './components/InfoTip.hooks.js';
 export { placeInfoTipBubble, infoTipBubbleStyle } from './components/InfoTip.rules.js';
 export type { InfoTipPlacement } from './components/InfoTip.rules.js';
 export { SeeMore, resolveSeeMoreView } from './components/SeeMore/SeeMore.js';

package/dist/features/admin-widgets/index.js

@@ -2,7 +2,7 @@ export { Select, resolveSelectTriggerLabel } from './components/Select/Select.js
 export { useSelectDropdown, usePanelPosition } from './components/Select/Select.hooks.js';
 export { InfoTip } from './components/InfoTip.js';
 export { useInfoTip } from './components/InfoTip.hooks.js';
-export { TIP_BOUNDS_ATTRIBUTE } from './components/InfoTip.hooks.js';
+export { TIP_BOUNDS_ATTRIBUTE, TAP_TIP_MS, claimOpenTip } from './components/InfoTip.hooks.js';
 export { placeInfoTipBubble, infoTipBubbleStyle } from './components/InfoTip.rules.js';
 export { SeeMore, resolveSeeMoreView } from './components/SeeMore/SeeMore.js';
 export { useSeeMoreClamp } from './components/SeeMore/SeeMore.hooks.js';

package/dist/features/execution/react/components/AgentCliEnvFields.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
 import { useT } from '../../../i18n/index.js';
+import { SecretInput } from '../../../../react/components/SecretInput.js';
 import { agentCliEnvValue, cliEnvFieldsForAgent } from '../../rules.js';
 /**
  * Per-agent CLI environment overrides — proxy URLs, custom config
@@ -17,16 +19,33 @@ import { agentCliEnvValue, cliEnvFieldsForAgent } from '../../rules.js';
  */
 export function AgentCliEnvFields({ agentId, fields, config, onChange }) {
     const t = useT();
+    const idBase = useId();
     const relevant = cliEnvFieldsForAgent(fields, agentId);
     if (relevant.length === 0)
         return null;
-    return (_jsxs("details", { className: "jini-agent-cli-env", "data-testid": `jini-agent-cli-env-${agentId}`, children: [_jsx("summary", { className: "jini-agent-cli-env-summary", children: t('Advanced: proxy & custom paths') }), _jsxs("div", { className: "jini-agent-cli-env-body", children: [_jsx("p", { className: "jini-field-hint", children: t("Environment variables passed to this CLI when it runs.") }), _jsx("div", { className: "jini-agent-cli-env-grid", children: relevant.map((field) => (_jsxs("label", { className: "jini-field", children: [_jsx("span", { className: "jini-field-label", children: field.label }), _jsx("input", { className: "jini-input", type: field.secret ? 'password' : 'text', value: agentCliEnvValue(config, agentId, field.envKey), placeholder: field.placeholder, spellCheck: false, 
-                                    /* Per-field, because this input is both kinds at once. A `secret` field renders
-                                       `type="password"`, and Chrome deliberately ignores `autoComplete="off"` on
-                                       credential-shaped fields — the same defect fixed on `ByokProviderForm`'s API-key
-                                       input; see its comment for the full reasoning. A NON-secret field (a proxy URL, a
-                                       config path) keeps `off`: `new-password` there would invite Chrome to offer to
-                                       GENERATE a password for a field that holds a file path. */
-                                    autoComplete: field.secret ? 'new-password' : 'off', "data-testid": `jini-agent-cli-env-${agentId}-${field.envKey}`, onChange: (event) => onChange(agentId, field.envKey, event.target.value) })] }, `${field.agentId}:${field.envKey}`))) })] })] }));
+    return (_jsxs("details", { className: "jini-agent-cli-env", "data-testid": `jini-agent-cli-env-${agentId}`, children: [_jsx("summary", { className: "jini-agent-cli-env-summary", children: t('Advanced: proxy & custom paths') }), _jsxs("div", { className: "jini-agent-cli-env-body", children: [_jsx("p", { className: "jini-field-hint", children: t("Environment variables passed to this CLI when it runs.") }), _jsx("div", { className: "jini-agent-cli-env-grid", children: relevant.map((field) => {
+                            const id = `${idBase}-${field.envKey}`;
+                            const input = {
+                                id,
+                                className: 'jini-input',
+                                value: agentCliEnvValue(config, agentId, field.envKey),
+                                placeholder: field.placeholder,
+                                spellCheck: false,
+                                'data-testid': `jini-agent-cli-env-${agentId}-${field.envKey}`,
+                                onChange: (event) => onChange(agentId, field.envKey, event.target.value),
+                            };
+                            /* Per-field, because this input is both kinds at once. A `secret` field is a password
+                               input, and Chrome deliberately ignores `autoComplete="off"` on credential-shaped
+                               fields — the same defect fixed on `ByokProviderForm`'s API-key input; see its comment
+                               for the full reasoning. A NON-secret field (a proxy URL, a config path) keeps `off`:
+                               `new-password` there would invite Chrome to offer to GENERATE a password for a field
+                               that holds a file path. */
+                            return (
+                            // A `<div>` + `<label htmlFor>`: the secret field's eye toggle must stay out of a
+                            // wrapping label, or its "Show …" name would join the input's own.
+                            _jsxs("div", { className: "jini-field", children: [_jsx("label", { className: "jini-field-label", htmlFor: id, children: field.label }), field.secret
+                                        ? _jsx(SecretInput, { ...input, label: field.label, autoComplete: "new-password" })
+                                        : _jsx("input", { ...input, type: "text", autoComplete: "off" })] }, `${field.agentId}:${field.envKey}`));
+                        }) })] })] }));
 }
 //# sourceMappingURL=AgentCliEnvFields.js.map

package/dist/features/execution/react/components/ByokProviderForm.js

@@ -5,6 +5,7 @@ import { useT } from '../../../i18n/index.js';
 import { CUSTOM_MODEL_SENTINEL } from '../../constants.js';
 import { apiKeyFormatWarning, parseMaxTokens, presetRequiresApiKey, shouldShowCustomModelInput, showsBaseUrlField, } from '../../rules.js';
 import { SearchableModelSelect } from './SearchableModelSelect.js';
+import { SecretInput } from '../../../../react/components/SecretInput.js';
 import { useByokFieldValidation } from '../hooks/use-byok-field-validation.hooks.js';
 /** `' is-missing'` when `field` is a required field the operator still has to fill. */
 function missingClass(validation, field) {
@@ -56,31 +57,27 @@ function ByokConnectionFields({ config, patch, preset, agentHandle, validation }
 function ByokApiKeyField({ config, patch, preset, agentHandle, validation, presets, revealKey, onToggleReveal, apiKeyFooter, apiKeyPlaceholder, apiKeyActions, }) {
     const t = useT();
     const keyInputId = useId();
-    const KeyField = apiKeyActions ? 'div' : 'label';
     /** Deliberately NOT folded into `missing` above: that set drives `is-missing` styling and the
      *  Test-connection disable, and a wrong-SHAPED key must never reach either. */
     const keyFormatWarning = apiKeyFormatWarning(config, preset, presets);
-    return (_jsxs(_Fragment, { children: [_jsxs(KeyField, { className: "jini-field", onBlurCapture: () => validation.markTouched({ field: 'apiKey' }), children: [_jsxs("span", { className: "jini-field-label", children: [_jsx(ByokApiKeyLabel, { keyInputId: apiKeyActions ? keyInputId : undefined }), preset?.apiKeyConsoleUrl ? (_jsx("a", { className: "jini-field-link", href: preset.apiKeyConsoleUrl, target: "_blank", rel: "noreferrer noopener", children: t('Get key') })) : null] }), _jsxs("span", { className: "jini-field-input-row", children: [_jsx("input", { ...(apiKeyActions ? { id: keyInputId } : {}), className: 'jini-input' + missingClass(validation, 'apiKey'), type: revealKey ? 'text' : 'password', 
-                                /* `new-password`, NOT `"off"` — Chrome deliberately ignores `off` on credential-shaped
-                                   fields (a long-standing intentional decision, not a bug). `off` here is what let the
-                                   reported autofill through: Chrome filled this field with the admin's own saved
-                                   PASSWORD, the form sent it, and the provider answered with its own "API key not
-                                   valid" — a true message about a string the operator never typed. `new-password` is
-                                   the value Chrome/Safari/Firefox actually honor for "this is not a saved-login
-                                   field", which suppresses both the credential dropdown and the silent fill.
-                      
-                                   Known trade-off, not fixed here: Chrome may now offer to GENERATE a password on
-                                   this field — a suggestion popup, not a silently wrong value. */
-                                autoComplete: "new-password", spellCheck: false, placeholder: apiKeyPlaceholder, value: config.apiKey, onChange: (event) => patch({ apiKey: event.target.value }), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'api-key', role: 'field', label: t('API key') }) }) }), _jsx("button", { type: "button", className: "jini-input-affix-btn", "aria-pressed": revealKey, onClick: onToggleReveal, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'reveal-key', role: 'button', label: t('Reveal API key') }) }), children: revealKey ? t('Hide') : t('Show') })] }), apiKeyActions ? _jsx("span", { className: "jini-byok-key-actions", children: apiKeyActions }) : null, _jsx("span", { className: "jini-field-hint", children: t('Stored only by this host.') }), keyFormatWarning ? (_jsx("span", { className: "jini-field-hint is-error", role: "status", children: t(keyFormatWarning.message, keyFormatWarning.vars) })) : null] }), _jsx(ByokSlot, { className: "jini-byok-key-footer", children: apiKeyFooter })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "jini-field", onBlurCapture: () => validation.markTouched({ field: 'apiKey' }), children: [_jsxs("span", { className: "jini-field-label", children: [_jsx(ByokApiKeyLabel, { keyInputId: keyInputId }), preset?.apiKeyConsoleUrl ? (_jsx("a", { className: "jini-field-link", href: preset.apiKeyConsoleUrl, target: "_blank", rel: "noreferrer noopener", children: t('Get key') })) : null] }), _jsx(SecretInput, { id: keyInputId, label: t('API key'), revealed: revealKey, onRevealedChange: onToggleReveal, className: 'jini-input' + missingClass(validation, 'apiKey'), 
+                        /* `new-password`, NOT `"off"` — Chrome deliberately ignores `off` on credential-shaped
+                           fields (a long-standing intentional decision, not a bug). `off` here is what let the
+                           reported autofill through: Chrome filled this field with the admin's own saved
+                           PASSWORD, the form sent it, and the provider answered with its own "API key not
+                           valid" — a true message about a string the operator never typed. `new-password` is
+                           the value Chrome/Safari/Firefox actually honor for "this is not a saved-login
+                           field", which suppresses both the credential dropdown and the silent fill.
+                
+                           Known trade-off, not fixed here: Chrome may now offer to GENERATE a password on
+                           this field — a suggestion popup, not a silently wrong value. */
+                        autoComplete: "new-password", spellCheck: false, placeholder: apiKeyPlaceholder, value: config.apiKey, onChange: (event) => patch({ apiKey: event.target.value }), toggleAttrs: agentHandleProps({}, { base: agentHandle, ...({ action: 'reveal-key', role: 'button', label: t('Reveal API key') }) }), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'api-key', role: 'field', label: t('API key') }) }) }), apiKeyActions ? _jsx("span", { className: "jini-byok-key-actions", children: apiKeyActions }) : null, _jsx("span", { className: "jini-field-hint", children: t('Stored only by this host.') }), keyFormatWarning ? (_jsx("span", { className: "jini-field-hint is-error", role: "status", children: t(keyFormatWarning.message, keyFormatWarning.vars) })) : null] }), _jsx(ByokSlot, { className: "jini-byok-key-footer", children: apiKeyFooter })] }));
 }
-/** "API key *". With host key actions the field is a `<div>`, so the name gets its own `<label>`
- *  pointing at the input by id; otherwise the whole field is already the label. */
+/** "API key *". The field is a `<div>` (the eye toggle must stay out of any wrapping label), so
+ *  the name gets its own `<label>` pointing at the input by id. */
 function ByokApiKeyLabel({ keyInputId }) {
     const t = useT();
-    if (keyInputId) {
-        return (_jsxs("label", { className: "jini-field-label", htmlFor: keyInputId, children: [_jsx("span", { children: t('API key') }), _jsx("span", { className: "jini-field-required", "aria-hidden": "true", children: "*" })] }));
-    }
-    return (_jsxs(_Fragment, { children: [t('API key'), _jsx("span", { className: "jini-field-required", "aria-hidden": "true", children: "*" })] }));
+    return (_jsxs("label", { className: "jini-field-label", htmlFor: keyInputId, children: [_jsx("span", { children: t('API key') }), _jsx("span", { className: "jini-field-required", "aria-hidden": "true", children: "*" })] }));
 }
 /** The Model field (live picker, free-text box, or both) with "Test connection" beside it. */
 function ByokModelRow({ config, patch, preset, agentHandle, validation, modelDiscovery, explicitCustomModel, setExplicitCustomModel, connectionTest, onTestConnection, canTestConnection, }) {

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/* 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); }";
+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/* A secret control's eye toggle sits inside the field's right edge. The control is padded so long\n   values never run under it; the button is a 40px tap target centred on the input, transparent,\n   so it overhangs the ~36px input invisibly instead of resizing the field. */\n.mcpui-secret { position: relative; display: flex; flex-direction: column; }\n.mcpui-secret > .mcpui-input, .mcpui-secret > .mcpui-textarea { padding-right: 44px; }\n.mcpui-secret-toggle {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 40px;\n  height: 40px;\n  margin-top: -20px;\n  padding: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: var(--jini-mcpui-radius-sm);\n  background: transparent;\n  color: var(--jini-mcpui-text-soft);\n  cursor: pointer;\n}\n.mcpui-secret > .mcpui-textarea + .mcpui-secret-toggle { top: 0; margin-top: -2px; }\n.mcpui-secret-toggle:hover:not([disabled]) { color: var(--jini-mcpui-text-strong); }\n.mcpui-secret-toggle[disabled] { opacity: 0.55; cursor: default; }\n.mcpui-secret-toggle:focus-visible { outline: 2px solid var(--jini-mcpui-accent-ring); outline-offset: -6px; }\n.mcpui-secret-toggle[aria-pressed=\"true\"] .mcpui-secret-icon-show,\n.mcpui-secret-toggle:not([aria-pressed=\"true\"]) .mcpui-secret-icon-hide { display: none; }\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

@@ -130,6 +130,34 @@ body {
   min-width: 0;
 }
 .mcpui-textarea { resize: vertical; min-height: 72px; font-family: var(--jini-mcpui-font); }
+/* A secret control's eye toggle sits inside the field's right edge. The control is padded so long
+   values never run under it; the button is a 40px tap target centred on the input, transparent,
+   so it overhangs the ~36px input invisibly instead of resizing the field. */
+.mcpui-secret { position: relative; display: flex; flex-direction: column; }
+.mcpui-secret > .mcpui-input, .mcpui-secret > .mcpui-textarea { padding-right: 44px; }
+.mcpui-secret-toggle {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--jini-mcpui-radius-sm);
+  background: transparent;
+  color: var(--jini-mcpui-text-soft);
+  cursor: pointer;
+}
+.mcpui-secret > .mcpui-textarea + .mcpui-secret-toggle { top: 0; margin-top: -2px; }
+.mcpui-secret-toggle:hover:not([disabled]) { color: var(--jini-mcpui-text-strong); }
+.mcpui-secret-toggle[disabled] { opacity: 0.55; cursor: default; }
+.mcpui-secret-toggle:focus-visible { outline: 2px solid var(--jini-mcpui-accent-ring); outline-offset: -6px; }
+.mcpui-secret-toggle[aria-pressed="true"] .mcpui-secret-icon-show,
+.mcpui-secret-toggle:not([aria-pressed="true"]) .mcpui-secret-icon-hide { display: none; }
 .mcpui-checkbox { margin: 3px 0 0; accent-color: var(--jini-mcpui-accent); }
 .mcpui-choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }
 .mcpui-choice { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; margin: 6px 0 0; }

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

@@ -7,10 +7,24 @@ interface SurfaceFieldBase {
     /** Help text, wired up with `aria-describedby`. */
     readonly hint?: string;
     readonly required?: boolean;
+    /** Waive on an exact choice or an alternative control; headerNames restricts entered headers. Kept secrets are validated by the host. */
+    readonly requiredUnless?: {
+        readonly field: string;
+        readonly equals: string;
+        readonly orPresent?: string;
+        readonly headerNames?: readonly string[];
+    };
+    /** Require only while the controlling public field matches one of these choices. */
+    readonly requiredWhen?: {
+        readonly field: string;
+        readonly in: readonly string[];
+    };
     readonly disabled?: boolean;
 }
 export interface StringField extends SurfaceFieldBase {
     readonly kind: 'string';
+    /** A sealed saved value satisfies validation while the requirement remains visible. */
+    readonly hasSavedValue?: boolean;
     readonly value?: string;
     readonly placeholder?: string;
     readonly multiline?: boolean;
@@ -73,8 +87,21 @@ export interface FieldReadSpec {
     readonly label: string;
     readonly kind: SurfaceField['kind'];
     readonly required: boolean;
+    readonly hasSavedValue?: boolean;
+    readonly requiredUnless?: {
+        readonly field: string;
+        readonly equals: string;
+        readonly orPresent?: string;
+        readonly headerNames?: readonly string[];
+    };
+    /** Require only while the controlling public field matches one of these choices. */
+    readonly requiredWhen?: {
+        readonly field: string;
+        readonly in: readonly string[];
+    };
+    readonly hint?: string;
 }
-/** Projects fields down to what the inline script needs, so the generated JS carries no labels, hints, or option lists it will never read. */
+/** Projects fields to runtime validation data; conditional requirements also carry their guidance. */
 export declare function toFieldReadSpecs(fields: readonly SurfaceField[]): readonly FieldReadSpec[];
 export {};
 //# sourceMappingURL=fields.d.ts.map

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

@@ -67,13 +67,17 @@ export function renderFieldControl(field, text) {
             return renderChoiceGroup({ ...base(field), selection: 'multiple', options: field.options, ...present(field, ['value']) });
     }
 }
-/** Projects fields down to what the inline script needs, so the generated JS carries no labels, hints, or option lists it will never read. */
+/** Projects fields to runtime validation data; conditional requirements also carry their guidance. */
 export function toFieldReadSpecs(fields) {
     return fields.map((field) => ({
         name: field.name,
         label: field.label,
         kind: field.kind,
         required: field.required === true,
+        ...(field.requiredUnless ? { requiredUnless: field.requiredUnless } : {}),
+        ...(field.requiredWhen ? { requiredWhen: field.requiredWhen } : {}),
+        ...(field.kind === 'string' && field.hasSavedValue ? { hasSavedValue: true } : {}),
+        ...((field.requiredUnless || field.requiredWhen) && field.hint ? { hint: field.hint } : {}),
     }));
 }
 //# sourceMappingURL=fields.js.map