@jini-ai/ui 0.5.5 → 0.6.10

package/dist/features/connectors/types.d.ts

@@ -78,4 +78,15 @@ export interface ConnectorAuthResultEvent {
     result: 'success' | 'failed' | 'cancelled';
     errorCode?: string;
 }
+/** Derived connect/disconnect state shared by the connector card and detail drawer. */
+export interface ConnectorActionFlags {
+    isConnecting: boolean;
+    isDisconnecting: boolean;
+    isConnected: boolean;
+    isAuthorizationPending: boolean;
+    canConnect: boolean;
+    canDisconnect: boolean;
+    /** The pending authorization's redirect URL — only set while authorization is pending. */
+    redirectUrl: string | undefined;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/features/execution/constants.d.ts

@@ -1,6 +1,5 @@
 import type { AgentCliEnvFieldSpec, ApiProtocol, ProviderPreset } from './types.js';
-/** Fallback endpoint per protocol, used when a host supplies no preset and
- *  the operator has not typed a base URL. Origin: `DEFAULT_BASE_URL_BY_PROTOCOL`. */
+/** @deprecated Endpoints come from host presets. Blank means the operator must supply an endpoint. */
 export declare const DEFAULT_BASE_URL_BY_PROTOCOL: Readonly<Record<ApiProtocol, string>>;
 /** Display order and English labels for the protocol row. Values are i18n
  *  keys (this package's convention is "the English string is the key"). */
@@ -18,8 +17,8 @@ export declare const CUSTOM_MODEL_SENTINEL = "__custom__";
 /**
  * The shortest string `apiKeyFormatWarning` will let pass without remark.
  *
- * Chosen from evidence rather than taste. The shortest real key shape any preset in
- * {@link DEFAULT_PROVIDER_PRESETS} describes is Azure OpenAI's bare 32-character hex string;
+ * Chosen from evidence rather than taste. The shortest real key shape in the integrations
+ * starter presets is Azure OpenAI's bare 32-character hex string;
  * Google's is `AIza` + 35 = 39, OpenAI's `sk-` + 48 = 51, OpenRouter's `sk-or-v1-` + 64 = 73, and
  * Anthropic's longer again. 20 therefore sits 12 characters below that floor, so no credential this
  * catalog knows about can trip it, while it still catches the failure the check exists for: the
@@ -45,12 +44,7 @@ export declare const API_KEY_CROSS_VENDOR_WARNING = "This looks like an API key
 /** Shown when a key is shorter than {@link MIN_PLAUSIBLE_API_KEY_LENGTH}. Carries no placeholders:
  *  the length floor is global, so there is no vendor to name. */
 export declare const API_KEY_TOO_SHORT_WARNING = "This is shorter than any provider API key \u2014 check that the whole key was pasted. You can still save and test it.";
-/**
- * A small, vendor-shaped starting catalog. Deliberately NOT the origin's full
- * ~30-entry list: that list is hand-curated product content that goes stale,
- * and this package's rule for tables like this (see `LanguageTab`) is that the
- * host owns them. Pass your own `presets` to replace this wholesale.
- */
+/** @deprecated Supply host presets. The former starter set is exported by integrations/media-providers/catalog. */
 export declare const DEFAULT_PROVIDER_PRESETS: readonly ProviderPreset[];
 /**
  * One-line descriptions for the code-agent CLIs this package knows about,

package/dist/features/execution/constants.js

@@ -1,11 +1,9 @@
-import { VENDOR_API_BASE_URLS } from '@jini-ai/integrations/media-providers/catalog';
-/** Fallback endpoint per protocol, used when a host supplies no preset and
- *  the operator has not typed a base URL. Origin: `DEFAULT_BASE_URL_BY_PROTOCOL`. */
+/** @deprecated Endpoints come from host presets. Blank means the operator must supply an endpoint. */
 export const DEFAULT_BASE_URL_BY_PROTOCOL = {
-    anthropic: VENDOR_API_BASE_URLS.anthropic,
-    openai: VENDOR_API_BASE_URLS.openai,
-    azure: VENDOR_API_BASE_URLS.azure,
-    google: VENDOR_API_BASE_URLS.google,
+    anthropic: '',
+    openai: '',
+    azure: '',
+    google: '',
 };
 /** Display order and English labels for the protocol row. Values are i18n
  *  keys (this package's convention is "the English string is the key"). */
@@ -25,8 +23,8 @@ export const CUSTOM_MODEL_SENTINEL = '__custom__';
 /**
  * The shortest string `apiKeyFormatWarning` will let pass without remark.
  *
- * Chosen from evidence rather than taste. The shortest real key shape any preset in
- * {@link DEFAULT_PROVIDER_PRESETS} describes is Azure OpenAI's bare 32-character hex string;
+ * Chosen from evidence rather than taste. The shortest real key shape in the integrations
+ * starter presets is Azure OpenAI's bare 32-character hex string;
  * Google's is `AIza` + 35 = 39, OpenAI's `sk-` + 48 = 51, OpenRouter's `sk-or-v1-` + 64 = 73, and
  * Anthropic's longer again. 20 therefore sits 12 characters below that floor, so no credential this
  * catalog knows about can trip it, while it still catches the failure the check exists for: the
@@ -52,91 +50,8 @@ export const API_KEY_CROSS_VENDOR_WARNING = 'This looks like an API key for {ven
 /** Shown when a key is shorter than {@link MIN_PLAUSIBLE_API_KEY_LENGTH}. Carries no placeholders:
  *  the length floor is global, so there is no vendor to name. */
 export const API_KEY_TOO_SHORT_WARNING = 'This is shorter than any provider API key — check that the whole key was pasted. You can still save and test it.';
-/**
- * A small, vendor-shaped starting catalog. Deliberately NOT the origin's full
- * ~30-entry list: that list is hand-curated product content that goes stale,
- * and this package's rule for tables like this (see `LanguageTab`) is that the
- * host owns them. Pass your own `presets` to replace this wholesale.
- */
-export const DEFAULT_PROVIDER_PRESETS = [
-    {
-        id: 'anthropic',
-        title: 'Anthropic',
-        protocol: 'anthropic',
-        baseUrl: VENDOR_API_BASE_URLS.anthropic,
-        preferredModels: ['claude-sonnet-5', 'claude-opus-5', 'claude-haiku-4-5'],
-        kind: 'protocol',
-        apiKeyPrefix: 'sk-ant-',
-    },
-    {
-        id: 'openai',
-        title: 'OpenAI',
-        protocol: 'openai',
-        baseUrl: VENDOR_API_BASE_URLS.openai,
-        // `gpt-4o`/`gpt-4o-mini`/`o3`/`o4-mini` are stale: OpenAI's GPT-5.6 family
-        // (released 2026-07-09, per the API changelog) replaced the old
-        // flagship/mini/nano naming with named tiers — sol/terra/luna. `sol` is
-        // the one the changelog and pricing docs call out as "recommended for
-        // production API usage", so it leads (see `preferredModels[0]` default
-        // in `rules.ts`) rather than the newer, pricier `gpt-6-astra` flagship
-        // (released 2026-09-03) — picking that as the silent default would jump
-        // an existing user's cost without them choosing it.
-        preferredModels: ['gpt-5.6-sol', 'gpt-5.6-terra', 'gpt-5.6-luna'],
-        kind: 'protocol',
-        apiKeyPrefix: 'sk-',
-    },
-    {
-        id: 'azure-openai',
-        title: 'Azure OpenAI',
-        protocol: 'azure',
-        baseUrl: VENDOR_API_BASE_URLS.azure,
-        preferredModels: [],
-        kind: 'protocol',
-        // No `apiKeyPrefix` deliberately: an Azure OpenAI key is a bare hex string with no vendor
-        // prefix, so any value here would be a guess — and a wrong prefix claim does not merely stay
-        // silent, it lets some OTHER vendor's valid key be announced as Azure's. Its 32 hex characters
-        // are also the shortest real key shape in this catalog, which is what sets
-        // `MIN_PLAUSIBLE_API_KEY_LENGTH`.
-    },
-    {
-        id: 'google-gemini',
-        title: 'Google Gemini',
-        protocol: 'google',
-        baseUrl: VENDOR_API_BASE_URLS.google,
-        // Ordered newest-first: `rules.ts`'s `saved?.model ?? preset.preferredModels[0]` makes entry [0]
-        // the default for anyone who has never picked a model, so a stale head silently pins new users
-        // to an old generation. Reported live: the field defaulted to `gemini-2.5-flash` while the
-        // operator was actually running `gemini-3.6-flash`. This list is only a FALLBACK — the form
-        // prefers live `listModels` discovery and drops back here when that call fails.
-        preferredModels: ['gemini-3.6-flash', 'gemini-2.5-flash', 'gemini-2.5-pro'],
-        kind: 'protocol',
-        // `AIza` + 35 characters is the classic Google key shape, and it is recorded here so a key of
-        // this shape is recognised as GOOGLE'S when it turns up in some other provider's field.
-        // Emphatically not a test that a Google key must look like this: an operator pasted a real,
-        // working Gemini key in a newer shape and the old allowlist told them it was not a Google key.
-        apiKeyPrefix: 'AIza',
-    },
-    {
-        id: 'openrouter',
-        title: 'OpenRouter',
-        protocol: 'openai',
-        baseUrl: VENDOR_API_BASE_URLS.openrouter,
-        preferredModels: ['anthropic/claude-sonnet-5', 'google/gemini-2.5-pro', 'openai/gpt-5.6-sol'],
-        kind: 'gateway',
-        // Longer than OpenAI's `sk-`, and deliberately so: `apiKeyFormatWarning` resolves a key to the
-        // MOST specific prefix that claims it, so `sk-or-v1-…` is attributed here rather than to OpenAI.
-        apiKeyPrefix: 'sk-or-',
-    },
-    {
-        id: 'ollama',
-        title: 'Ollama',
-        protocol: 'openai',
-        baseUrl: VENDOR_API_BASE_URLS.ollama,
-        preferredModels: [],
-        kind: 'gateway',
-        requiresApiKey: false,
-    },
-];
+/** @deprecated Supply host presets. The former starter set is exported by integrations/media-providers/catalog. */
+export const DEFAULT_PROVIDER_PRESETS = [];
 /**
  * One-line descriptions for the code-agent CLIs this package knows about,
  * keyed by the agent id `ExecutionPort` reports. Origin:

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

@@ -10,10 +10,8 @@ export interface ByokProviderFormProps {
      * as ANOTHER row's, so `apiKeyFormatWarning` can say whose it looks like. Never used to validate
      * the selected preset's own key — see that function for why that direction is forbidden.
      *
-     * Defaults to `DEFAULT_PROVIDER_PRESETS`, matching `ExecutionTab`'s own default for the same
-     * prop, so a host rendering this card standalone still gets the shipped vendor prefixes rather
-     * than losing the check silently. A host with its own catalog should pass it, exactly as
-     * `ExecutionTab` does.
+     * Defaults to no presets. Hosts rendering this card standalone must pass their catalog
+     * to enable cross-provider prefix hints, exactly as `ExecutionTab` does.
      */
     presets?: readonly ProviderPreset[];
     /** Live model-discovery result. `'ok'` suggestions win over the preset's

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