@jini-ai/ui 0.5.4 → 0.5.6

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

@@ -2,20 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useId, useState } from 'react';
 import { agentHandleProps, agentSubHandle } from '@jini-ai/agentic';
 import { useT } from '../../../i18n/index.js';
-import { CUSTOM_MODEL_SENTINEL, DEFAULT_PROVIDER_PRESETS } from '../../constants.js';
+import { CUSTOM_MODEL_SENTINEL } from '../../constants.js';
 import { apiKeyFormatWarning, parseMaxTokens, presetRequiresApiKey, shouldShowCustomModelInput, showsBaseUrlField, } from '../../rules.js';
 import { SearchableModelSelect } from './SearchableModelSelect.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) {
+    return validation.isMissing({ field }) ? ' is-missing' : '';
+}
 /**
  * The BYOK credential card: API key, base URL, optional token cap, and model.
  * Origin: `components/byok/*` (`ByokKeyField`, `ByokProviderBaseUrl`,
  * `ByokModelField`, `ByokConnectionTestControl`) — already factored out
  * upstream, so this is assembly plus the origin's required-field marking.
  */
-export function ByokProviderForm({ config, onConfigChange, preset, presets = DEFAULT_PROVIDER_PRESETS, modelDiscovery, connectionTest, onTestConnection, canTestConnection = true, apiKeyFooter, formFooter, modelFooter, apiKeyStoredExternally = false, apiKeyPlaceholder, agentHandle, apiKeyActions, collapseAdvanced = false, deferMissingFeedback = false, }) {
+export function ByokProviderForm({ config, onConfigChange, preset, presets = [], modelDiscovery, connectionTest, onTestConnection, canTestConnection = true, apiKeyFooter, formFooter, modelFooter, apiKeyStoredExternally = false, apiKeyPlaceholder, agentHandle, apiKeyActions, collapseAdvanced = false, deferMissingFeedback = false, }) {
     const t = useT();
-    const keyInputId = useId();
-    const KeyField = apiKeyActions ? 'div' : 'label';
     const [revealKey, setRevealKey] = useState(false);
     /** Whether the operator explicitly picked "Custom…" in the model picker — distinct from "the
      *  saved model simply isn't in the live list". Same UI-local toggle, for the same reason, as
@@ -36,12 +38,53 @@ export function ByokProviderForm({ config, onConfigChange, preset, presets = DEF
     useEffect(() => {
         setRevealKey(false);
     }, [config.providerId]);
-    const { missing, baseUrlInvalid, isMissing, markTouched } = useByokFieldValidation({ config, preset, apiKeyStoredExternally }, { deferMissingFeedback });
+    const validation = useByokFieldValidation({ config, preset, apiKeyStoredExternally }, { deferMissingFeedback });
+    const patch = (next) => onConfigChange({ ...config, ...next });
+    const part = { config, patch, preset, agentHandle, validation };
+    const connectionFields = _jsx(ByokConnectionFields, { ...part });
+    return (_jsxs("div", { className: "jini-byok-card", children: [_jsx("div", { className: "jini-byok-card-head", children: _jsx("h4", { className: "jini-byok-card-title", children: preset ? preset.title : t('Custom endpoint') }) }), presetRequiresApiKey(preset) ? (_jsx(ByokApiKeyField, { ...part, presets: presets, revealKey: revealKey, onToggleReveal: () => setRevealKey((shown) => !shown), apiKeyFooter: apiKeyFooter, apiKeyPlaceholder: apiKeyPlaceholder, apiKeyActions: apiKeyActions })) : null, collapseAdvanced ? null : connectionFields, _jsx(ByokModelRow, { ...part, modelDiscovery: modelDiscovery, explicitCustomModel: explicitCustomModel, setExplicitCustomModel: setExplicitCustomModel, connectionTest: connectionTest, onTestConnection: onTestConnection, canTestConnection: canTestConnection }), _jsx(ByokDiscoveryError, { modelDiscovery: modelDiscovery }), _jsx(ByokConnectionResult, { connectionTest: connectionTest, canTestConnection: canTestConnection }), _jsx(ByokSlot, { className: "jini-byok-model-footer", children: modelFooter }), collapseAdvanced ? _jsx(ByokAdvanced, { validation: validation, children: connectionFields }) : null, _jsx(ByokSlot, { className: "jini-byok-form-footer", children: formFooter })] }));
+}
+/** Base URL (unless the preset has a fixed origin) and Max tokens, on one wrapping row. */
+function ByokConnectionFields({ config, patch, preset, agentHandle, validation }) {
+    const t = useT();
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "jini-byok-field-row", children: [showsBaseUrlField(preset) ? (_jsxs("label", { className: "jini-field", onBlurCapture: () => validation.markTouched({ field: 'baseUrl' }), children: [_jsxs("span", { className: "jini-field-label", children: [t('Base URL'), preset?.baseUrl ? null : _jsx("span", { className: "jini-field-required", "aria-hidden": "true", children: "*" })] }), _jsx("input", { className: 'jini-input' + missingClass(validation, 'baseUrl'), type: "url", inputMode: "url", spellCheck: false, value: config.baseUrl, onChange: (event) => patch({ baseUrl: event.target.value }), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'base-url', role: 'field', label: t('Base URL') }) }) }), _jsx("span", { className: 'jini-field-hint' + (validation.baseUrlInvalid ? ' is-error' : ''), children: validation.baseUrlInvalid
+                                ? t('Enter an absolute http(s) URL.')
+                                : t('Default endpoint. Usually no need to change this.') })] })) : null, _jsxs("label", { className: "jini-field", children: [_jsx("span", { className: "jini-field-label", children: t('Max tokens (optional)') }), _jsx("input", { className: "jini-input", type: "number", min: 1, step: 1, value: config.maxTokens ?? '', onChange: (event) => patch({ maxTokens: parseMaxTokens(event.target.value) }), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'max-tokens', role: 'field', label: t('Max tokens (optional)') }) }) }), _jsx("span", { className: "jini-field-hint", children: t('Cap on the response length. Leave blank to use the model default.') })] })] }) }));
+}
+/** The API-key field (with Show/Hide, host actions and the advisory format warning) plus the
+ *  host's `apiKeyFooter` slot beneath it. */
+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);
-    const suggestions = modelDiscovery.status === 'ok' ? modelDiscovery.models : (preset?.preferredModels ?? []);
-    const modelListId = 'jini-byok-model-options';
+    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 })] }));
+}
+/** "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. */
+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: "*" })] }));
+}
+/** 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, }) {
+    const t = useT();
     /**
      * Live discovery turns the Model field from a text box into a real picker.
      *
@@ -66,41 +109,95 @@ export function ByokProviderForm({ config, onConfigChange, preset, presets = DEF
     // opens the box for an explicit "Custom…" pick AND for a value that simply isn't in the list, so
     // a hydrated or hand-typed id is never silently replaced by whatever sorts first.
     const customModelActive = showModelPicker && shouldShowCustomModelInput(config.model, liveModels, explicitCustomModel);
-    const patch = (next) => onConfigChange({ ...config, ...next });
-    const connectionFields = (_jsx(_Fragment, { children: _jsxs("div", { className: "jini-byok-field-row", children: [showsBaseUrlField(preset) ? (_jsxs("label", { className: "jini-field", onBlurCapture: () => markTouched({ field: 'baseUrl' }), children: [_jsxs("span", { className: "jini-field-label", children: [t('Base URL'), preset?.baseUrl ? null : _jsx("span", { className: "jini-field-required", "aria-hidden": "true", children: "*" })] }), _jsx("input", { className: 'jini-input' + (isMissing({ field: 'baseUrl' }) ? ' is-missing' : ''), type: "url", inputMode: "url", spellCheck: false, value: config.baseUrl, onChange: (event) => patch({ baseUrl: event.target.value }), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'base-url', role: 'field', label: t('Base URL') }) }) }), _jsx("span", { className: 'jini-field-hint' + (baseUrlInvalid ? ' is-error' : ''), children: baseUrlInvalid
-                                ? t('Enter an absolute http(s) URL.')
-                                : t('Default endpoint. Usually no need to change this.') })] })) : null, _jsxs("label", { className: "jini-field", children: [_jsx("span", { className: "jini-field-label", children: t('Max tokens (optional)') }), _jsx("input", { className: "jini-input", type: "number", min: 1, step: 1, value: config.maxTokens ?? '', onChange: (event) => patch({ maxTokens: parseMaxTokens(event.target.value) }), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'max-tokens', role: 'field', label: t('Max tokens (optional)') }) }) }), _jsx("span", { className: "jini-field-hint", children: t('Cap on the response length. Leave blank to use the model default.') })] })] }) }));
-    return (_jsxs("div", { className: "jini-byok-card", children: [_jsx("div", { className: "jini-byok-card-head", children: _jsx("h4", { className: "jini-byok-card-title", children: preset ? preset.title : t('Custom endpoint') }) }), presetRequiresApiKey(preset) ? (_jsxs(_Fragment, { children: [_jsxs(KeyField, { className: "jini-field", onBlurCapture: () => markTouched({ field: 'apiKey' }), children: [_jsxs("span", { className: "jini-field-label", children: [apiKeyActions ? (_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: "*" })] })) : (_jsxs(_Fragment, { children: [t('API key'), _jsx("span", { className: "jini-field-required", "aria-hidden": "true", children: "*" })] })), 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' + (isMissing({ field: 'apiKey' }) ? ' is-missing' : ''), 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: () => setRevealKey((shown) => !shown), ...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] }), apiKeyFooter ? _jsx("div", { className: "jini-byok-key-footer", children: apiKeyFooter }) : null] })) : null, collapseAdvanced ? null : connectionFields, _jsxs("div", { className: "jini-byok-model-row", children: [_jsxs("label", { className: "jini-field", onBlurCapture: () => markTouched({ field: 'model' }), children: [_jsxs("span", { className: "jini-field-label", children: [t('Model'), _jsx("span", { className: "jini-field-required", "aria-hidden": "true", children: "*" })] }), showModelPicker ? (_jsx(SearchableModelSelect, { className: 'jini-input' + (isMissing({ field: 'model' }) ? ' is-missing' : ''), ariaLabel: t('Model'), searchPlaceholder: t('Search models'), testId: "jini-byok-model-select", searchInputTestId: "jini-byok-model-search", ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'model' }) } : {}), value: customModelActive ? CUSTOM_MODEL_SENTINEL : config.model, models: liveModels.map((model) => ({ id: model, label: model })), additionalOptions: [{ value: CUSTOM_MODEL_SENTINEL, label: t('Custom…') }], onChange: (next) => {
-                                    if (next === CUSTOM_MODEL_SENTINEL) {
-                                        // Open the free-text box WITHOUT clearing `config.model`. Blanking it here would
-                                        // discard a working model the moment someone opened the picker to look at it.
-                                        setExplicitCustomModel(true);
-                                        return;
-                                    }
-                                    setExplicitCustomModel(false);
-                                    patch({ model: next });
-                                } })) : null, !showModelPicker || customModelActive ? (_jsx("input", { className: 'jini-input' + (isMissing({ field: 'model' }) ? ' is-missing' : ''), list: !showModelPicker && suggestions.length > 0 ? modelListId : undefined, spellCheck: false, value: config.model, onChange: (event) => patch({ model: event.target.value }), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'model', role: 'field', label: t('Model') }) }) })) : null, !showModelPicker && suggestions.length > 0 ? (_jsx("datalist", { id: modelListId, children: suggestions.map((model) => (_jsx("option", { value: model }, model))) })) : null] }), canTestConnection ? (_jsx("button", { type: "button", className: "jini-btn jini-byok-test-btn", disabled: connectionTest.status === 'testing' || missing.size > 0, onClick: onTestConnection, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'test-connection', role: 'button', label: t('Test connection') }) }), children: connectionTest.status === 'testing' ? t('Testing…') : t('Test connection') })) : null] }), modelDiscovery.status === 'error' ? (
-            // Non-blocking (the field above stays editable, with the preset's static
-            // suggestions) but never silent — a discovery failure is an operator-actionable
-            // fact (bad key, wrong base URL, unreachable endpoint), not "no models exist".
-            //
-            // Moved out of the Model `<label>` when the probe button moved up beside it: as a label
-            // child it grew the field and pushed the bottom-aligned button off the input's line every
-            // time discovery failed. Same element, same `.jini-field-hint.is-error[role="status"]`
-            // identity host suites locate it by — only its parent changed.
-            _jsx("span", { className: "jini-field-hint is-error", role: "status", children: t('Could not load live models: {message}', { message: t(modelDiscovery.message) }) })) : null, canTestConnection && (connectionTest.status === 'ok' || connectionTest.status === 'error') ? (_jsx("div", { className: "jini-byok-test-row", children: _jsx("span", { className: `jini-byok-test-status is-${connectionTest.status}`, role: connectionTest.status === 'error' ? 'alert' : 'status', children: connectionTest.status === 'ok'
-                        ? (connectionTest.message !== undefined ? t(connectionTest.message) : t('Connection succeeded'))
-                        : t(connectionTest.message) }) })) : null, modelFooter ? _jsx("div", { className: "jini-byok-model-footer", children: modelFooter }) : null, collapseAdvanced ? (_jsxs("details", { className: "jini-byok-advanced", open: baseUrlInvalid || missing.has('baseUrl') || undefined, children: [_jsx("summary", { children: t('Advanced') }), connectionFields] })) : null, formFooter ? _jsx("div", { className: "jini-byok-form-footer", children: formFooter }) : null] }));
+    const modelClassName = 'jini-input' + missingClass(validation, 'model');
+    return (
+    // "Test connection" sits BESIDE the Model control (owner ruling, 2026-09-02), not on a row of
+    // its own underneath it. It probes the endpoint the Model field belongs to, and a row's
+    // distance made it read as unrelated to any particular field.
+    //
+    // A SIBLING of the label, never a child: a `<button>` inside a `<label>` makes every click on
+    // the button also focus and activate the labelled control — here, opening the model picker —
+    // and nesting interactive controls in a label is an accessibility defect regardless. Same rule
+    // `apiKeyFooter` documents.
+    //
+    // Wrapping, and `align-items: flex-end`, so the button sits on the input's own line at a
+    // comfortable width and drops below the field at a narrow one. Both status lines
+    // (discovery error, connection result) are deliberately OUTSIDE this row: inside it they would
+    // either sit beside the button or, as label children, push it out of line the moment either
+    // appeared.
+    _jsxs("div", { className: "jini-byok-model-row", children: [_jsxs("label", { className: "jini-field", onBlurCapture: () => validation.markTouched({ field: 'model' }), children: [_jsxs("span", { className: "jini-field-label", children: [t('Model'), _jsx("span", { className: "jini-field-required", "aria-hidden": "true", children: "*" })] }), showModelPicker ? (_jsx(ByokLiveModelSelect, { className: modelClassName, agentHandle: agentHandle, value: customModelActive ? CUSTOM_MODEL_SENTINEL : config.model, liveModels: liveModels, patch: patch, setExplicitCustomModel: setExplicitCustomModel })) : null, !showModelPicker || customModelActive ? (_jsx(ByokModelTextInput, { className: modelClassName, value: config.model, patch: patch, agentHandle: agentHandle, suggestions: showModelPicker ? [] : modelSuggestions(modelDiscovery, preset) })) : null] }), _jsx(ByokTestConnectionButton, { agentHandle: agentHandle, validation: validation, connectionTest: connectionTest, onTestConnection: onTestConnection, canTestConnection: canTestConnection })] }));
+}
+/** The probe's RESULT keeps its own full-width line. Beside the button it would have made the
+ *  Model row's width depend on the length of a provider's error message. Renders nothing until
+ *  the probe has finished. */
+function ByokConnectionResult({ connectionTest, canTestConnection }) {
+    const t = useT();
+    if (!canTestConnection)
+        return null;
+    if (connectionTest.status !== 'ok' && connectionTest.status !== 'error')
+        return null;
+    return (_jsx("div", { className: "jini-byok-test-row", children: _jsx("span", { className: `jini-byok-test-status is-${connectionTest.status}`, role: connectionTest.status === 'error' ? 'alert' : 'status', children: connectionTest.status === 'ok'
+                ? (connectionTest.message !== undefined ? t(connectionTest.message) : t('Connection succeeded'))
+                : t(connectionTest.message) }) }));
+}
+/** Discovery failure, as an inline hint below the Model row. Renders nothing otherwise. */
+function ByokDiscoveryError({ modelDiscovery }) {
+    const t = useT();
+    if (modelDiscovery.status !== 'error')
+        return null;
+    return (
+    // Non-blocking (the field above stays editable, with the preset's static
+    // suggestions) but never silent — a discovery failure is an operator-actionable
+    // fact (bad key, wrong base URL, unreachable endpoint), not "no models exist".
+    //
+    // Moved out of the Model `<label>` when the probe button moved up beside it: as a label
+    // child it grew the field and pushed the bottom-aligned button off the input's line every
+    // time discovery failed. Same element, same `.jini-field-hint.is-error[role="status"]`
+    // identity host suites locate it by — only its parent changed.
+    _jsx("span", { className: "jini-field-hint is-error", role: "status", children: t('Could not load live models: {message}', { message: t(modelDiscovery.message) }) }));
+}
+/** A host slot's wrapper `<div>`, rendered only when the host supplied content for it. */
+function ByokSlot({ className, children }) {
+    return children ? _jsx("div", { className: className, children: children }) : null;
+}
+/** The collapsed "Advanced" disclosure for Base URL and Max tokens. Opens on its own while Base URL
+ *  is invalid or missing, so a required-field problem is never hidden. */
+function ByokAdvanced({ validation, children }) {
+    const t = useT();
+    return (_jsxs("details", { className: "jini-byok-advanced", open: validation.baseUrlInvalid || validation.missing.has('baseUrl') || undefined, children: [_jsx("summary", { children: t('Advanced') }), children] }));
+}
+/** The live-model picker. "Custom…" opens the free-text box beside it; any real pick closes it. */
+function ByokLiveModelSelect({ className, agentHandle, value, liveModels, patch, setExplicitCustomModel, }) {
+    const t = useT();
+    return (_jsx(SearchableModelSelect, { className: className, ariaLabel: t('Model'), searchPlaceholder: t('Search models'), testId: "jini-byok-model-select", searchInputTestId: "jini-byok-model-search", ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'model' }) } : {}), value: value, models: liveModels.map((model) => ({ id: model, label: model })), additionalOptions: [{ value: CUSTOM_MODEL_SENTINEL, label: t('Custom…') }], onChange: (next) => {
+            if (next === CUSTOM_MODEL_SENTINEL) {
+                // Open the free-text box WITHOUT clearing `config.model`. Blanking it here would
+                // discard a working model the moment someone opened the picker to look at it.
+                setExplicitCustomModel(true);
+                return;
+            }
+            setExplicitCustomModel(false);
+            patch({ model: next });
+        } }));
+}
+/** "Test connection", beside the Model field. Disabled while a probe runs or a required field is
+ *  blank; absent for hosts with no probe endpoint. */
+function ByokTestConnectionButton({ agentHandle, validation, connectionTest, onTestConnection, canTestConnection, }) {
+    const t = useT();
+    if (!canTestConnection)
+        return null;
+    return (_jsx("button", { type: "button", className: "jini-btn jini-byok-test-btn", disabled: connectionTest.status === 'testing' || validation.missing.size > 0, onClick: onTestConnection, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'test-connection', role: 'button', label: t('Test connection') }) }), children: connectionTest.status === 'testing' ? t('Testing…') : t('Test connection') }));
+}
+/** Autocomplete hints for the free-text Model box: the live list when discovery succeeded, else the
+ *  preset's static `preferredModels`. */
+function modelSuggestions(modelDiscovery, preset) {
+    return modelDiscovery.status === 'ok' ? modelDiscovery.models : (preset?.preferredModels ?? []);
+}
+/** The free-text Model box, with a `<datalist>` autocomplete when there are suggestions. */
+function ByokModelTextInput({ className, value, patch, agentHandle, suggestions, }) {
+    const t = useT();
+    const modelListId = 'jini-byok-model-options';
+    const showDatalist = suggestions.length > 0;
+    return (_jsxs(_Fragment, { children: [_jsx("input", { className: className, list: showDatalist ? modelListId : undefined, spellCheck: false, value: value, onChange: (event) => patch({ model: event.target.value }), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'model', role: 'field', label: t('Model') }) }) }), showDatalist ? (_jsx("datalist", { id: modelListId, children: suggestions.map((model) => (_jsx("option", { value: model }, model))) })) : null] }));
 }
 //# sourceMappingURL=ByokProviderForm.js.map

package/dist/features/execution/react/components/ExecutionTab.d.ts

@@ -5,8 +5,7 @@ export interface ExecutionTabProps {
     config: ExecutionConfig;
     onConfigChange: (config: ExecutionConfig) => void;
     port: ExecutionPort;
-    /** Endpoint catalog. Defaults to this package's small starter set — a host
-     *  with its own provider list passes it here rather than editing ours. */
+    /** Host-owned endpoint catalog. Omitted means manual endpoint entry. */
     presets?: readonly ProviderPreset[];
     /** Per-agent CLI env-var catalog (proxy URLs, custom config dirs, a
      *  binary-path override). Defaults to this package's starter set for the

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { agentHandleProps, agentSubHandle } from '@jini-ai/agentic';
 import { useT } from '../../../i18n/index.js';
-import { DEFAULT_AGENT_CLI_ENV_FIELDS, DEFAULT_PROVIDER_PRESETS } from '../../constants.js';
+import { DEFAULT_AGENT_CLI_ENV_FIELDS } from '../../constants.js';
 import { groupPresets, isProviderConfigured, nextConfigForAgentCliEnvChange, nextConfigForAgentModel, nextConfigForAgentReasoning, nextConfigForAgentSelect, nextConfigForModeChange, nextConfigForPresetSelect, resolveSelectedPreset, selectedAgentModel, } from '../../rules.js';
 import { useExecutionTab } from '../hooks/useExecutionTab.js';
 import { ByokProviderForm } from './ByokProviderForm.js';
@@ -20,13 +20,14 @@ import { ProviderChipGroup } from './ProviderChipGroup.js';
  * wallet — balance polling, top-up, sign-in coachmarks — is deliberately not
  * ported; it is product-bound, not generic.
  */
-export function ExecutionTab({ config, onConfigChange, port, presets = DEFAULT_PROVIDER_PRESETS, cliEnvFields = DEFAULT_AGENT_CLI_ENV_FIELDS, localCliUnavailableReason, renderAgentIcon, localCliScopeLabel, autoDetect = true, ariaLabel, apiKeyFooter, formFooter, apiKeyStoredExternally, apiKeyPlaceholder, canDiscoverModels = true, describeProbeError, agentHandle, }) {
+export function ExecutionTab({ config, onConfigChange, port, presets = [], cliEnvFields = DEFAULT_AGENT_CLI_ENV_FIELDS, localCliUnavailableReason, renderAgentIcon, localCliScopeLabel, autoDetect = true, ariaLabel, apiKeyFooter, formFooter, apiKeyStoredExternally, apiKeyPlaceholder, canDiscoverModels = true, describeProbeError, agentHandle, }) {
     const t = useT();
-    const { agents, scan, connectionTest, modelDiscovery, agentTest, rescan, testConnection, testAgent, loadModels, resetModelDiscovery, canRescan, canTestAgent, } = useExecutionTab({
+    const tab = useExecutionTab({
         port,
         autoDetect: autoDetect && config.mode === 'local-cli',
         ...(describeProbeError ? { describeProbeError } : {}),
     });
+    const { loadModels, resetModelDiscovery } = tab;
     const selectedPreset = resolveSelectedPreset(presets, config.byok);
     /**
      * Whether a key EXISTS, never what it is. Keyed on the boolean specifically so the effect below
@@ -68,39 +69,60 @@ export function ExecutionTab({ config, onConfigChange, port, presets = DEFAULT_P
         if (!canDiscoverModels)
             resetModelDiscovery();
     }, [canDiscoverModels, resetModelDiscovery]);
-    const { protocols, gateways } = groupPresets(presets);
-    const configuredPresetIds = new Set(presets.filter((preset) => isProviderConfigured(config.byok, preset)).map((preset) => preset.id));
-    const localCliDisabled = Boolean(localCliUnavailableReason);
+    // No "local-cli while unavailable" guard here: `ExecutionModeSwitch` renders that tab `disabled`
+    // whenever `localCliUnavailableReason` is set, and React never dispatches `onClick` for a disabled
+    // button, so `setMode('local-cli')` cannot be reached in that state.
     const setMode = (mode) => {
-        if (mode === 'local-cli' && localCliDisabled)
-            return;
         onConfigChange(nextConfigForModeChange(config, mode));
     };
-    const selectPreset = (preset) => onConfigChange({ ...config, byok: nextConfigForPresetSelect(config.byok, preset) });
     const modes = [
         { id: 'local-cli', title: t('Local CLI'), meta: t('Run an agent installed on this machine') },
         { id: 'byok', title: t('BYOK'), meta: t('Use your own API credentials') },
     ];
-    return (_jsxs("div", { className: "jini-settings-execution", "aria-label": ariaLabel ?? t('Execution mode'), children: [_jsx("div", { className: "jini-seg-control", role: "tablist", "aria-label": t('Execution mode'), style: { '--seg-cols': modes.length }, children: modes.map((mode) => {
-                    const disabled = mode.id === 'local-cli' && localCliDisabled;
-                    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": config.mode === mode.id, disabled: disabled, title: disabled ? localCliUnavailableReason : undefined, className: 'jini-seg-btn' + (config.mode === mode.id ? ' active' : ''), onClick: () => setMode(mode.id), ...agentHandleProps({}, { base: agentHandle, ...({ action: `mode-${mode.id}`, role: 'button', label: mode.title }) }), children: [_jsx("span", { className: "jini-seg-title", children: mode.title }), _jsx("span", { className: "jini-seg-meta", children: disabled ? localCliUnavailableReason : mode.meta })] }, mode.id));
-                }) }), config.mode === 'local-cli' ? (_jsx(LocalCliAgentList, { agents: agents, config: config.localCli, scan: scan, agentTest: agentTest, onSelect: (agentId) => onConfigChange(nextConfigForAgentSelect(config, agentId)), onModelChange: (agentId, model) => onConfigChange(nextConfigForAgentModel(config, agentId, model)), onReasoningChange: (agentId, reasoning) => onConfigChange(nextConfigForAgentReasoning(config, agentId, reasoning)), onEnvChange: (agentId, envKey, value) => onConfigChange(nextConfigForAgentCliEnvChange(config, agentId, envKey, value)), cliEnvFields: cliEnvFields, onRescan: canRescan ? rescan : undefined, onTest: canTestAgent
-                    ? (agent) => testAgent(agent.id, selectedAgentModel(config.localCli, agent) || undefined)
-                    : undefined, renderAgentIcon: renderAgentIcon, scopeLabel: localCliScopeLabel, ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'local-cli' }) } : {}) })) : (_jsxs("section", { className: "jini-settings-section jini-settings-byok", children: [_jsx(ProviderChipGroup, { label: t('Protocols'), presets: protocols, selectedPresetId: selectedPreset?.id ?? null, configuredPresetIds: configuredPresetIds, onSelect: selectPreset, configuredLabel: t('Configured'), unsetLabel: t('Not configured'), ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'protocol' }) } : {}) }), _jsx(ProviderChipGroup, { label: t('Gateways'), presets: gateways, selectedPresetId: selectedPreset?.id ?? null, configuredPresetIds: configuredPresetIds, onSelect: selectPreset, configuredLabel: t('Configured'), unsetLabel: t('Not configured'), ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'gateway' }) } : {}) }), _jsx(ByokProviderForm, { config: config.byok, onConfigChange: (byok) => onConfigChange({ ...config, byok }), preset: selectedPreset, ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'byok' }) } : {}), 
-                        // The WHOLE catalog, not the `protocols`/`gateways` halves the chip rows take: the card
-                        // only reads it to recognise a pasted key as some other row's, and a key pasted from a
-                        // gateway into a protocol field is exactly the mistake worth naming.
-                        presets: presets, modelDiscovery: modelDiscovery, connectionTest: connectionTest, 
-                        // Also re-runs discovery with the CURRENT byok config, not just the
-                        // connectivity probe — see this file's model-discovery effect above
-                        // for why that matters: a stale "could not load live models" error
-                        // from before this key existed (or from any earlier transient
-                        // failure) would otherwise never clear, even once Test Connection
-                        // itself goes green with the same config.
-                        onTestConnection: () => {
-                            testConnection(config.byok);
-                            if (canDiscoverModels && typeof port.listModels === 'function')
-                                loadModels(config.byok);
-                        }, ...(apiKeyFooter !== undefined ? { apiKeyFooter } : {}), ...(formFooter !== undefined ? { formFooter } : {}), ...(apiKeyStoredExternally !== undefined ? { apiKeyStoredExternally } : {}), ...(apiKeyPlaceholder !== undefined ? { apiKeyPlaceholder } : {}) })] }))] }));
+    return (_jsxs("div", { className: "jini-settings-execution", "aria-label": ariaLabel ?? t('Execution mode'), children: [_jsx(ExecutionModeSwitch, { modes: modes, activeMode: config.mode, localCliUnavailableReason: localCliUnavailableReason, onSelect: setMode, agentHandle: agentHandle }), config.mode === 'local-cli' ? (_jsx(LocalCliPane, { config: config, onConfigChange: onConfigChange, tab: tab, cliEnvFields: cliEnvFields, renderAgentIcon: renderAgentIcon, localCliScopeLabel: localCliScopeLabel, agentHandle: agentHandle })) : (_jsx(ByokPane, { config: config, onConfigChange: onConfigChange, presets: presets, selectedPreset: selectedPreset, tab: tab, canDiscoverModels: canDiscoverModels, canListModels: typeof port.listModels === 'function', formProps: { apiKeyFooter, formFooter, apiKeyStoredExternally, apiKeyPlaceholder }, agentHandle: agentHandle }))] }));
+}
+/** The Local CLI ↔ BYOK segmented control. Local CLI is disabled, with the host's reason as its
+ *  tooltip and caption, while the host says it is unavailable. */
+function ExecutionModeSwitch({ modes, activeMode, localCliUnavailableReason, onSelect, agentHandle }) {
+    const t = useT();
+    const localCliDisabled = Boolean(localCliUnavailableReason);
+    return (_jsx("div", { className: "jini-seg-control", role: "tablist", "aria-label": t('Execution mode'), style: { '--seg-cols': modes.length }, children: modes.map((mode) => {
+            const disabled = mode.id === 'local-cli' && localCliDisabled;
+            return (_jsxs("button", { type: "button", role: "tab", "aria-selected": activeMode === mode.id, disabled: disabled, title: disabled ? localCliUnavailableReason : undefined, className: 'jini-seg-btn' + (activeMode === mode.id ? ' active' : ''), onClick: () => onSelect(mode.id), ...agentHandleProps({}, { base: agentHandle, ...({ action: `mode-${mode.id}`, role: 'button', label: mode.title }) }), children: [_jsx("span", { className: "jini-seg-title", children: mode.title }), _jsx("span", { className: "jini-seg-meta", children: disabled ? localCliUnavailableReason : mode.meta })] }, mode.id));
+        }) }));
+}
+/** The BYOK half of the tab: protocol and gateway chip rows over the credential card. */
+function ByokPane({ config, onConfigChange, presets, selectedPreset, tab, canDiscoverModels, canListModels, formProps, agentHandle, }) {
+    const t = useT();
+    const { protocols, gateways } = groupPresets(presets);
+    const configuredPresetIds = new Set(presets.filter((preset) => isProviderConfigured(config.byok, preset)).map((preset) => preset.id));
+    const selectPreset = (preset) => onConfigChange({ ...config, byok: nextConfigForPresetSelect(config.byok, preset) });
+    const selectedPresetId = selectedPreset?.id ?? null;
+    return (_jsxs("section", { className: "jini-settings-section jini-settings-byok", children: [_jsx(ProviderChipGroup, { label: t('Protocols'), presets: protocols, selectedPresetId: selectedPresetId, configuredPresetIds: configuredPresetIds, onSelect: selectPreset, configuredLabel: t('Configured'), unsetLabel: t('Not configured'), ...subHandleProps(agentHandle, 'protocol') }), _jsx(ProviderChipGroup, { label: t('Gateways'), presets: gateways, selectedPresetId: selectedPresetId, configuredPresetIds: configuredPresetIds, onSelect: selectPreset, configuredLabel: t('Configured'), unsetLabel: t('Not configured'), ...subHandleProps(agentHandle, 'gateway') }), _jsx(ByokProviderForm, { config: config.byok, onConfigChange: (byok) => onConfigChange({ ...config, byok }), preset: selectedPreset, ...subHandleProps(agentHandle, 'byok'), 
+                // The WHOLE catalog, not the `protocols`/`gateways` halves the chip rows take: the card
+                // only reads it to recognise a pasted key as some other row's, and a key pasted from a
+                // gateway into a protocol field is exactly the mistake worth naming.
+                presets: presets, modelDiscovery: tab.modelDiscovery, connectionTest: tab.connectionTest, 
+                // Also re-runs discovery with the CURRENT byok config, not just the
+                // connectivity probe — see this file's model-discovery effect above
+                // for why that matters: a stale "could not load live models" error
+                // from before this key existed (or from any earlier transient
+                // failure) would otherwise never clear, even once Test Connection
+                // itself goes green with the same config.
+                onTestConnection: () => {
+                    tab.testConnection(config.byok);
+                    if (canDiscoverModels && canListModels)
+                        tab.loadModels(config.byok);
+                }, ...(formProps.apiKeyFooter !== undefined ? { apiKeyFooter: formProps.apiKeyFooter } : {}), ...(formProps.formFooter !== undefined ? { formFooter: formProps.formFooter } : {}), ...(formProps.apiKeyStoredExternally !== undefined ? { apiKeyStoredExternally: formProps.apiKeyStoredExternally } : {}), ...(formProps.apiKeyPlaceholder !== undefined ? { apiKeyPlaceholder: formProps.apiKeyPlaceholder } : {}) })] }));
+}
+/** The Local CLI half of the tab: detected agents, wired to the config's next-state rules. */
+function LocalCliPane({ config, onConfigChange, tab, cliEnvFields, renderAgentIcon, localCliScopeLabel, agentHandle }) {
+    return (_jsx(LocalCliAgentList, { agents: tab.agents, config: config.localCli, scan: tab.scan, agentTest: tab.agentTest, onSelect: (agentId) => onConfigChange(nextConfigForAgentSelect(config, agentId)), onModelChange: (agentId, model) => onConfigChange(nextConfigForAgentModel(config, agentId, model)), onReasoningChange: (agentId, reasoning) => onConfigChange(nextConfigForAgentReasoning(config, agentId, reasoning)), onEnvChange: (agentId, envKey, value) => onConfigChange(nextConfigForAgentCliEnvChange(config, agentId, envKey, value)), cliEnvFields: cliEnvFields, onRescan: tab.canRescan ? tab.rescan : undefined, onTest: tab.canTestAgent
+            ? (agent) => tab.testAgent(agent.id, selectedAgentModel(config.localCli, agent) || undefined)
+            : undefined, renderAgentIcon: renderAgentIcon, scopeLabel: localCliScopeLabel, ...subHandleProps(agentHandle, 'local-cli') }));
+}
+/** `{ agentHandle }` for a child's sub-handle under this tab's base, or nothing when no base is set. */
+function subHandleProps(agentHandle, action) {
+    return agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action }) } : {};
 }
 //# sourceMappingURL=ExecutionTab.js.map

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

@@ -27,6 +27,17 @@ import { LocalCliAgentSettings } from './LocalCliAgentSettings.js';
 export function LocalCliAgentCard({ agent, config, selected, onSelect, onModelChange, onReasoningChange, onEnvChange, cliEnvFields, renderIcon, onTest, agentTest, onRescan, agentHandle, }) {
     const t = useT();
     const card = useLocalCliAgentCard({ agent, config, agentTest, cliEnvFields, onModelChange, onReasoningChange, onRescan, onTest, t });
+    return (_jsxs("div", { className: 'jini-agent-card' +
+            (selected ? ' is-selected' : '') +
+            (agent.installed ? ' is-installed' : ' is-missing'), "data-testid": `jini-agent-card-${agent.id}`, children: [_jsxs("div", { className: "jini-agent-card-main", children: [_jsx(LocalCliAgentSelection, { agent: agent, config: config, selected: selected, onSelect: onSelect, renderIcon: renderIcon, agentHandle: agentHandle }), selected && onTest ? (_jsx("button", { type: "button", className: 'jini-btn jini-agent-card-test' + (card.testing ? ' is-loading' : ''), "data-testid": `jini-agent-test-${agent.id}`, disabled: card.testing, onClick: () => onTest(agent), ...agentHandleProps({}, { base: agentHandle, action: 'test', role: 'button', label: t('Test') }), children: card.testing ? t('Testing…') : t('Test') })) : null] }), (agent.diagnostics ?? []).map((diagnostic, index) => (_jsx(AgentDiagnosticRow, { diagnostic: diagnostic, handlers: card.diagnosticHandlers }, `${diagnostic.reason}-${index}`))), selected && card.hasSettings ? (_jsx(LocalCliAgentSettings, { agent: agent, config: config, card: card, cliEnvFields: cliEnvFields, onModelChange: onModelChange, onEnvChange: onEnvChange, agentHandle: agentHandle })) : null] }));
+}
+/** The selectable identity stays independent of the header's Test action. */
+function LocalCliAgentSelection({ agent, config, selected, onSelect, renderIcon, agentHandle }) {
+    return (_jsxs("button", { type: "button", className: "jini-agent-card-select", "data-testid": `jini-agent-select-${agent.id}`, "aria-pressed": selected, disabled: !agent.installed, onClick: () => onSelect(agent.id), ...agentHandleProps({}, { base: agentHandle, action: 'select', role: 'button', label: agent.label }), children: [_jsx("span", { className: "jini-agent-card-icon", "aria-hidden": "true", children: renderIcon ? renderIcon(agent) : agent.label.slice(0, 1).toUpperCase() }), _jsx(LocalCliAgentSummary, { agent: agent, config: config, selected: selected }), selected ? (_jsx("span", { className: "jini-agent-card-check", "aria-hidden": "true", children: "\u2713" })) : null] }));
+}
+/** Detection metadata and the compact model summary for the card's identity. */
+function LocalCliAgentSummary({ agent, config, selected }) {
+    const t = useT();
     const description = agent.description ?? DEFAULT_AGENT_DESCRIPTIONS[agent.id];
     const meta = agentMetaLabel(agent, {
         authRequired: t('Authentication required'),
@@ -35,8 +46,6 @@ export function LocalCliAgentCard({ agent, config, selected, onSelect, onModelCh
         notInstalled: t('Not installed'),
     });
     const summary = agentModelSummary(config, agent);
-    return (_jsxs("div", { className: 'jini-agent-card' +
-            (selected ? ' is-selected' : '') +
-            (agent.installed ? ' is-installed' : ' is-missing'), "data-testid": `jini-agent-card-${agent.id}`, children: [_jsxs("div", { className: "jini-agent-card-main", children: [_jsxs("button", { type: "button", className: "jini-agent-card-select", "data-testid": `jini-agent-select-${agent.id}`, "aria-pressed": selected, disabled: !agent.installed, onClick: () => onSelect(agent.id), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'select', role: 'button', label: agent.label }) }), children: [_jsx("span", { className: "jini-agent-card-icon", "aria-hidden": "true", children: renderIcon ? renderIcon(agent) : agent.label.slice(0, 1).toUpperCase() }), _jsxs("span", { className: "jini-agent-card-body", children: [_jsxs("span", { className: "jini-agent-card-name", children: [_jsx("span", { className: "jini-agent-card-title", children: agent.label }), description ? (_jsx("span", { className: "jini-agent-card-tagline", children: description })) : null] }), agent.badges?.length ? (_jsx("span", { className: "jini-agent-card-badges", children: agent.badges.map((badge) => (_jsx("span", { className: "jini-agent-card-badge", children: badge }, badge))) })) : null, meta.text ? (_jsx("span", { className: "jini-agent-card-meta", children: _jsx("span", { title: meta.title || undefined, children: meta.text }) })) : null, !selected && summary ? (_jsxs("span", { className: "jini-agent-card-model-summary", children: [_jsx("span", { children: t('Model') }), _jsx("strong", { children: summary })] })) : null] }), selected ? (_jsx("span", { className: "jini-agent-card-check", "aria-hidden": "true", children: "\u2713" })) : null] }), selected && onTest ? (_jsx("button", { type: "button", className: 'jini-btn jini-agent-card-test' + (card.testing ? ' is-loading' : ''), "data-testid": `jini-agent-test-${agent.id}`, disabled: card.testing, onClick: () => onTest(agent), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'test', role: 'button', label: t('Test') }) }), children: card.testing ? t('Testing…') : t('Test') })) : null] }), (agent.diagnostics ?? []).map((diagnostic, index) => (_jsx(AgentDiagnosticRow, { diagnostic: diagnostic, handlers: card.diagnosticHandlers }, `${diagnostic.reason}-${index}`))), selected && card.hasSettings ? (_jsx(LocalCliAgentSettings, { agent: agent, config: config, card: card, cliEnvFields: cliEnvFields, onModelChange: onModelChange, onEnvChange: onEnvChange, agentHandle: agentHandle })) : null] }));
+    return (_jsxs("span", { className: "jini-agent-card-body", children: [_jsxs("span", { className: "jini-agent-card-name", children: [_jsx("span", { className: "jini-agent-card-title", children: agent.label }), description ? (_jsx("span", { className: "jini-agent-card-tagline", children: description })) : null] }), agent.badges?.length ? (_jsx("span", { className: "jini-agent-card-badges", children: agent.badges.map((badge) => (_jsx("span", { className: "jini-agent-card-badge", children: badge }, badge))) })) : null, meta.text ? (_jsx("span", { className: "jini-agent-card-meta", children: _jsx("span", { title: meta.title || undefined, children: meta.text }) })) : null, !selected && summary ? (_jsxs("span", { className: "jini-agent-card-model-summary", children: [_jsx("span", { children: t('Model') }), _jsx("strong", { children: summary })] })) : null] }));
 }
 //# sourceMappingURL=LocalCliAgentCard.js.map

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

@@ -22,8 +22,19 @@ export function LocalCliAgentList({ agents, config, scan, onSelect, onModelChang
         const handle = cardHandles.get(agent.id);
         return (_jsx(LocalCliAgentCard, { agent: agent, config: config, selected: config.agentId === agent.id, onSelect: onSelect, onModelChange: onModelChange, onReasoningChange: onReasoningChange, onEnvChange: onEnvChange, cliEnvFields: cliEnvFields, renderIcon: renderAgentIcon, onTest: onTest, agentTest: agentTest, onRescan: onRescan, ...(handle ? { agentHandle: handle } : {}) }, agent.id));
     };
-    return (_jsxs("section", { className: "jini-settings-section jini-local-cli", children: [_jsxs("div", { className: "jini-section-head", children: [_jsxs("div", { className: "jini-section-head-text", children: [_jsxs("h4", { className: "jini-agent-group-head", children: [t('Your CLIs'), " (", installed.length, ")"] }), _jsx("p", { className: "jini-field-hint", children: t('Pick the CLI that runs your prompts.') })] }), onRescan ? (_jsx("button", { type: "button", className: "jini-btn jini-local-cli-rescan", disabled: scan.status === 'scanning', onClick: onRescan, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'rescan', role: 'button', label: t('Rescan') }) }), children: scan.status === 'scanning' ? t('Scanning…') : t('↻ Rescan') })) : null] }), _jsx("p", { className: "jini-field-hint jini-local-cli-scope", children: scope }), scan.status === 'error' ? (_jsx("p", { className: "jini-field-hint is-error", role: "alert", children: scan.message })) : null, scan.status === 'scanning' ? (_jsxs("div", { className: "jini-agent-scan-card", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "jini-agent-scan-ring", "aria-hidden": "true" }), _jsx("strong", { children: t('Scanning for installed agents…') })] })) : agents.length === 0 ? (scan.status === 'error' ? null : (_jsx("div", { className: "jini-empty-card", children: t('No agent CLIs detected.') }))) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "jini-agent-grid", children: list.visible.map(renderCard) }), list.collapsed.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "jini-btn jini-local-cli-more", "aria-expanded": list.showCollapsed, onClick: list.toggleCollapsed, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'toggle-not-installed', role: 'button', label: t('Show not-installed CLIs') }) }), children: list.showCollapsed
-                                    ? t('Hide not installed')
-                                    : t('Show {count} not installed').replace('{count}', String(list.collapsed.length)) }), list.showCollapsed ? _jsx("div", { className: "jini-agent-grid", children: list.collapsed.map(renderCard) }) : null] })) : null] }))] }));
+    return (_jsxs("section", { className: "jini-settings-section jini-local-cli", children: [_jsxs("div", { className: "jini-section-head", children: [_jsxs("div", { className: "jini-section-head-text", children: [_jsxs("h4", { className: "jini-agent-group-head", children: [t('Your CLIs'), " (", installed.length, ")"] }), _jsx("p", { className: "jini-field-hint", children: t('Pick the CLI that runs your prompts.') })] }), onRescan ? (_jsx("button", { type: "button", className: "jini-btn jini-local-cli-rescan", disabled: scan.status === 'scanning', onClick: onRescan, ...agentHandleProps({}, { base: agentHandle, action: 'rescan', role: 'button', label: t('Rescan') }), children: scan.status === 'scanning' ? t('Scanning…') : t('↻ Rescan') })) : null] }), _jsx("p", { className: "jini-field-hint jini-local-cli-scope", children: scope }), scan.status === 'error' ? (_jsx("p", { className: "jini-field-hint is-error", role: "alert", children: scan.message })) : null, _jsx(LocalCliAgentGrid, { agents: agents, scan: scan, list: list, renderCard: renderCard, agentHandle: agentHandle })] }));
+}
+/** Scan-state precedence and the not-installed disclosure belong to one grid. */
+function LocalCliAgentGrid({ agents, scan, list, renderCard, agentHandle }) {
+    const t = useT();
+    if (scan.status === 'scanning') {
+        return (_jsxs("div", { className: "jini-agent-scan-card", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "jini-agent-scan-ring", "aria-hidden": "true" }), _jsx("strong", { children: t('Scanning for installed agents…') })] }));
+    }
+    if (agents.length === 0) {
+        return scan.status === 'error' ? null : _jsx("div", { className: "jini-empty-card", children: t('No agent CLIs detected.') });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "jini-agent-grid", children: list.visible.map(renderCard) }), list.collapsed.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "jini-btn jini-local-cli-more", "aria-expanded": list.showCollapsed, onClick: () => list.toggleCollapsed(), ...agentHandleProps({}, { base: agentHandle, action: 'toggle-not-installed', role: 'button', label: t('Show not-installed CLIs') }), children: list.showCollapsed
+                            ? t('Hide not installed')
+                            : t('Show {count} not installed').replace('{count}', String(list.collapsed.length)) }), list.showCollapsed ? _jsx("div", { className: "jini-agent-grid", children: list.collapsed.map(renderCard) }) : null] })) : null] }));
 }
 //# sourceMappingURL=LocalCliAgentList.js.map

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { agentHandleProps, agentSubHandle } from '@jini-ai/agentic';
 import { useT } from '../../../i18n/index.js';
 import { CUSTOM_MODEL_SENTINEL } from '../../constants.js';
@@ -12,9 +12,20 @@ import { SearchableModelSelect } from './SearchableModelSelect.js';
  * visible provenance sentence inside the card so only that card grows taller.
  */
 export function LocalCliAgentSettings({ agent, config, card, cliEnvFields, onModelChange, onEnvChange, agentHandle, }) {
+    return (_jsxs("div", { className: "jini-agent-settings", role: "group", "aria-label": agent.label, "data-testid": `jini-agent-settings-${agent.id}`, children: [_jsx(LocalCliAgentModelControls, { agent: agent, card: card, onModelChange: onModelChange, agentHandle: agentHandle }), _jsx(LocalCliAgentFeedback, { agent: agent, card: card, onEnvChange: onEnvChange }), _jsx(AgentCliEnvFields, { agentId: agent.id, fields: cliEnvFields, config: config, onChange: onEnvChange })] }));
+}
+/** Model, custom-id and effort controls share the hook's resolved model state. */
+function LocalCliAgentModelControls({ agent, card, onModelChange, agentHandle }) {
     const t = useT();
-    const { reasoning, source, sourceLabel, sourceHint, result, repair, repairField } = card;
+    const { reasoning, source, sourceLabel, sourceHint } = card;
     const { hasModels, hasReasoning, reasoningOptions, reasoningValue, reasoningDisabled, allowCustomModel, customActive, modelChoices, selectValue, customModelInputValue, } = reasoning;
-    return (_jsxs("div", { className: "jini-agent-settings", role: "group", "aria-label": agent.label, "data-testid": `jini-agent-settings-${agent.id}`, children: [_jsxs("div", { className: "jini-agent-settings-row", children: [hasModels ? (_jsxs("div", { className: "jini-agent-settings-field jini-agent-settings-model", children: [_jsxs("div", { className: "jini-agent-settings-label", children: [_jsx("span", { className: "jini-field-label", children: t('Model') }), sourceLabel ? (_jsx("span", { className: `jini-agent-model-source ${source}`, children: sourceLabel })) : null] }), _jsx(SearchableModelSelect, { className: "jini-input jini-agent-model-select", ariaLabel: t('Model'), searchPlaceholder: t('Search models'), testId: `jini-agent-model-${agent.id}`, searchInputTestId: `jini-agent-model-search-${agent.id}`, ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'model' }) } : {}), value: selectValue, models: modelChoices, additionalOptions: allowCustomModel ? [{ value: CUSTOM_MODEL_SENTINEL, label: t('Custom…') }] : undefined, onChange: card.selectModel }), sourceHint ? _jsx("p", { className: "jini-field-hint", children: sourceHint }) : null] })) : null, customActive ? (_jsxs("label", { className: "jini-agent-settings-field", children: [_jsx("span", { className: "jini-field-label", children: t('Custom model id') }), _jsx("input", { className: "jini-input jini-agent-settings-custom", type: "text", "data-testid": `jini-agent-model-custom-${agent.id}`, value: customModelInputValue, placeholder: t('e.g. my-fine-tuned-model'), spellCheck: false, onChange: (event) => onModelChange(agent.id, event.target.value.trim()), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'custom-model', role: 'field', label: t('Custom model id') }) }) })] })) : null, hasReasoning ? (_jsxs("label", { className: "jini-agent-settings-field", children: [_jsx("span", { className: "jini-field-label", children: t('Reasoning effort') }), _jsx("select", { className: "jini-input jini-agent-settings-reasoning", "data-testid": `jini-agent-reasoning-${agent.id}`, value: reasoningValue, disabled: reasoningDisabled, onChange: (event) => card.selectReasoning(event.target.value), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'reasoning', role: 'field', label: t('Reasoning effort') }) }), children: reasoningOptions.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) })] })) : null] }), result ? (_jsx("p", { className: 'jini-agent-card-test-result is-' + result.status, role: result.status === 'error' ? 'alert' : 'status', children: result.message ?? (result.status === 'ok' ? t('Agent is ready.') : t('Agent check failed')) })) : null, repair && repairField ? (_jsxs("div", { className: "jini-agent-card-path-repair", children: [_jsx("span", { className: "jini-field-hint", children: t('A custom path override did not work, so this used the automatically detected binary instead.') }), _jsxs("div", { className: "jini-agent-card-path-repair-actions", children: [repair.canUseDetected ? (_jsx("button", { type: "button", className: "jini-btn", "data-testid": `jini-agent-path-repair-use-${agent.id}`, onClick: () => onEnvChange(agent.id, repairField.envKey, repair.detectedPath), children: t('Use detected path') })) : null, _jsx("button", { type: "button", className: "jini-btn jini-btn-ghost", "data-testid": `jini-agent-path-repair-clear-${agent.id}`, onClick: () => onEnvChange(agent.id, repairField.envKey, ''), children: t('Clear custom path') })] })] })) : null, _jsx(AgentCliEnvFields, { agentId: agent.id, fields: cliEnvFields, config: config, onChange: onEnvChange })] }));
+    const additionalOptions = allowCustomModel ? [{ value: CUSTOM_MODEL_SENTINEL, label: t('Custom…') }] : undefined;
+    return (_jsxs("div", { className: "jini-agent-settings-row", children: [hasModels ? (_jsxs("div", { className: "jini-agent-settings-field jini-agent-settings-model", children: [_jsxs("div", { className: "jini-agent-settings-label", children: [_jsx("span", { className: "jini-field-label", children: t('Model') }), sourceLabel ? (_jsx("span", { className: `jini-agent-model-source ${source}`, children: sourceLabel })) : null] }), _jsx(SearchableModelSelect, { className: "jini-input jini-agent-model-select", ariaLabel: t('Model'), searchPlaceholder: t('Search models'), testId: `jini-agent-model-${agent.id}`, searchInputTestId: `jini-agent-model-search-${agent.id}`, ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'model' }) } : {}), value: selectValue, models: modelChoices, additionalOptions: additionalOptions, onChange: card.selectModel }), sourceHint ? _jsx("p", { className: "jini-field-hint", children: sourceHint }) : null] })) : null, customActive ? (_jsxs("label", { className: "jini-agent-settings-field", children: [_jsx("span", { className: "jini-field-label", children: t('Custom model id') }), _jsx("input", { className: "jini-input jini-agent-settings-custom", type: "text", "data-testid": `jini-agent-model-custom-${agent.id}`, value: customModelInputValue, placeholder: t('e.g. my-fine-tuned-model'), spellCheck: false, onChange: (event) => onModelChange(agent.id, event.target.value.trim()), ...agentHandleProps({}, { base: agentHandle, action: 'custom-model', role: 'field', label: t('Custom model id') }) })] })) : null, hasReasoning ? (_jsxs("label", { className: "jini-agent-settings-field", children: [_jsx("span", { className: "jini-field-label", children: t('Reasoning effort') }), _jsx("select", { className: "jini-input jini-agent-settings-reasoning", "data-testid": `jini-agent-reasoning-${agent.id}`, value: reasoningValue, disabled: reasoningDisabled, onChange: (event) => card.selectReasoning(event.target.value), ...agentHandleProps({}, { base: agentHandle, action: 'reasoning', role: 'field', label: t('Reasoning effort') }), children: reasoningOptions.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) })] })) : null] }));
+}
+/** Probe evidence and repair actions stay together beneath the model controls. */
+function LocalCliAgentFeedback({ agent, card, onEnvChange }) {
+    const t = useT();
+    const { result, repair, repairField } = card;
+    return (_jsxs(_Fragment, { children: [result ? (_jsx("p", { className: 'jini-agent-card-test-result is-' + result.status, role: result.status === 'error' ? 'alert' : 'status', children: result.status === 'ok' ? (result.message ?? t('Agent is ready.')) : result.message })) : null, repair && repairField ? (_jsxs("div", { className: "jini-agent-card-path-repair", children: [_jsx("span", { className: "jini-field-hint", children: t('A custom path override did not work, so this used the automatically detected binary instead.') }), _jsxs("div", { className: "jini-agent-card-path-repair-actions", children: [repair.canUseDetected ? (_jsx("button", { type: "button", className: "jini-btn", "data-testid": `jini-agent-path-repair-use-${agent.id}`, onClick: () => onEnvChange(agent.id, repairField.envKey, repair.detectedPath), children: t('Use detected path') })) : null, _jsx("button", { type: "button", className: "jini-btn jini-btn-ghost", "data-testid": `jini-agent-path-repair-clear-${agent.id}`, onClick: () => onEnvChange(agent.id, repairField.envKey, ''), children: t('Clear custom path') })] })] })) : null] }));
 }
 //# sourceMappingURL=LocalCliAgentSettings.js.map