@jini-ai/ui 0.4.7 → 0.4.9

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

@@ -6,6 +6,9 @@ export { InfoTip } from './components/InfoTip.js';
 export type { InfoTipProps } from './components/InfoTip.js';
 export { useInfoTip } from './components/InfoTip.hooks.js';
 export type { InfoTipController } from './components/InfoTip.hooks.js';
+export { TIP_BOUNDS_ATTRIBUTE } from './components/InfoTip.hooks.js';
+export { placeInfoTipBubble, infoTipBubbleStyle } from './components/InfoTip.rules.js';
+export type { InfoTipPlacement } from './components/InfoTip.rules.js';
 export { SeeMore, resolveSeeMoreView } from './components/SeeMore/SeeMore.js';
 export type { SeeMoreProps, SeeMoreView } from './components/SeeMore/SeeMore.js';
 export { useSeeMoreClamp } from './components/SeeMore/SeeMore.hooks.js';
@@ -17,4 +20,10 @@ export { ComingSoonPanel } from './components/ComingSoonPanel.js';
 export type { ComingSoonPanelProps } from './components/ComingSoonPanel.js';
 export { ComingSoonNotice } from './components/ComingSoonNotice.js';
 export type { ComingSoonNoticeProps } from './components/ComingSoonNotice.js';
+export { SuggestInput } from './components/SuggestInput/SuggestInput.js';
+export type { SuggestInputProps } from './components/SuggestInput/SuggestInput.js';
+export { useSuggestInput, matchSuggestions } from './components/SuggestInput/SuggestInput.hooks.js';
+export type { SuggestInputController } from './components/SuggestInput/SuggestInput.hooks.js';
+export { useDebouncedHtmlPreview } from './components/useDebouncedHtmlPreview.hooks.js';
+export type { HtmlPreviewPort, HtmlPreviewState } from './components/useDebouncedHtmlPreview.hooks.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -2,10 +2,15 @@ export { Select, resolveSelectTriggerLabel } from './components/Select/Select.js
 export { useSelectDropdown, usePanelPosition } from './components/Select/Select.hooks.js';
 export { InfoTip } from './components/InfoTip.js';
 export { useInfoTip } from './components/InfoTip.hooks.js';
+export { TIP_BOUNDS_ATTRIBUTE } from './components/InfoTip.hooks.js';
+export { placeInfoTipBubble, infoTipBubbleStyle } from './components/InfoTip.rules.js';
 export { SeeMore, resolveSeeMoreView } from './components/SeeMore/SeeMore.js';
 export { useSeeMoreClamp } from './components/SeeMore/SeeMore.hooks.js';
 export { ImagePreviewModal } from './components/ImagePreviewModal.js';
 export { useImagePreviewModal } from './components/ImagePreviewModal.hooks.js';
 export { ComingSoonPanel } from './components/ComingSoonPanel.js';
 export { ComingSoonNotice } from './components/ComingSoonNotice.js';
+export { SuggestInput } from './components/SuggestInput/SuggestInput.js';
+export { useSuggestInput, matchSuggestions } from './components/SuggestInput/SuggestInput.hooks.js';
+export { useDebouncedHtmlPreview } from './components/useDebouncedHtmlPreview.hooks.js';
 //# sourceMappingURL=index.js.map

package/dist/features/execution/constants.js

@@ -1,10 +1,11 @@
+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`. */
 export const DEFAULT_BASE_URL_BY_PROTOCOL = {
-    anthropic: 'https://api.anthropic.com',
-    openai: 'https://api.openai.com/v1',
-    azure: '',
-    google: 'https://generativelanguage.googleapis.com',
+    anthropic: VENDOR_API_BASE_URLS.anthropic,
+    openai: VENDOR_API_BASE_URLS.openai,
+    azure: VENDOR_API_BASE_URLS.azure,
+    google: VENDOR_API_BASE_URLS.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"). */
@@ -62,7 +63,7 @@ export const DEFAULT_PROVIDER_PRESETS = [
         id: 'anthropic',
         title: 'Anthropic',
         protocol: 'anthropic',
-        baseUrl: 'https://api.anthropic.com',
+        baseUrl: VENDOR_API_BASE_URLS.anthropic,
         preferredModels: ['claude-sonnet-5', 'claude-opus-5', 'claude-haiku-4-5'],
         kind: 'protocol',
         apiKeyPrefix: 'sk-ant-',
@@ -71,7 +72,7 @@ export const DEFAULT_PROVIDER_PRESETS = [
         id: 'openai',
         title: 'OpenAI',
         protocol: 'openai',
-        baseUrl: 'https://api.openai.com/v1',
+        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
@@ -88,7 +89,7 @@ export const DEFAULT_PROVIDER_PRESETS = [
         id: 'azure-openai',
         title: 'Azure OpenAI',
         protocol: 'azure',
-        baseUrl: '',
+        baseUrl: VENDOR_API_BASE_URLS.azure,
         preferredModels: [],
         kind: 'protocol',
         // No `apiKeyPrefix` deliberately: an Azure OpenAI key is a bare hex string with no vendor
@@ -101,7 +102,7 @@ export const DEFAULT_PROVIDER_PRESETS = [
         id: 'google-gemini',
         title: 'Google Gemini',
         protocol: 'google',
-        baseUrl: 'https://generativelanguage.googleapis.com',
+        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
@@ -119,7 +120,7 @@ export const DEFAULT_PROVIDER_PRESETS = [
         id: 'openrouter',
         title: 'OpenRouter',
         protocol: 'openai',
-        baseUrl: 'https://openrouter.ai/api/v1',
+        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
@@ -130,7 +131,7 @@ export const DEFAULT_PROVIDER_PRESETS = [
         id: 'ollama',
         title: 'Ollama',
         protocol: 'openai',
-        baseUrl: 'http://localhost:11434/v1',
+        baseUrl: VENDOR_API_BASE_URLS.ollama,
         preferredModels: [],
         kind: 'gateway',
         requiresApiKey: false,

package/dist/features/execution/http-adapter.d.ts

@@ -2,7 +2,9 @@ import type { ByokConfig, DetectedAgent } from './types.js';
 import type { ExecutionPort } from './ports.js';
 /** Decoded HTTP operations; hosts retain auth, URLs and transport validation. */
 export interface ExecutionProbeTransport {
-    detectExecutionAgents(required: Record<string, never>, optional?: Record<string, never>): Promise<{
+    detectExecutionAgents(required: Record<string, never>, optional?: {
+        force?: boolean;
+    }): Promise<{
         data: readonly DetectedAgent[];
     }>;
     testExecutionConnection(required: Pick<ByokConfig, "protocol" | "baseUrl" | "apiKey" | "model"> & ExecutionProbeFlags, optional?: Record<string, never>): Promise<{

package/dist/features/execution/http-adapter.js

@@ -58,8 +58,8 @@ export function createExecutionHttpAdapter({ transport }, _options = {}) {
      *   route call itself fails (session expired, network down, this admin's own
      *   route 500ing) — a case with no provider-side answer to report as a value.
      */
-    async function requestAgentDetection() {
-        return requireExecutionResponseData({ response: await transport.detectExecutionAgents({}, {}), callSite: "detectExecutionAgents" }, {});
+    async function requestAgentDetection({ force = false } = {}) {
+        return requireExecutionResponseData({ response: await transport.detectExecutionAgents({}, force ? { force: true } : {}), callSite: "detectExecutionAgents" }, {});
     }
     /**
      * Last detection, shared across every `ExecutionTab` mount in this tab's
@@ -96,7 +96,12 @@ export function createExecutionHttpAdapter({ transport }, _options = {}) {
         // error in place for the rest of the session, and the port's contract is
         // that a failure REJECTS (see this function's doc) — so a retry has to be
         // able to actually retry.
-        inFlight.catch(() => {
+        inFlight.then((agents) => {
+            // A background snapshot is usable but provisional. Subsequent reads must reach the host
+            // cache so completed discovery replaces it; they never request another CLI probe.
+            if (agents.some(agent => agent.discoveryPending) && cachedDetection === inFlight)
+                cachedDetection = null;
+        }, () => {
             if (cachedDetection === inFlight)
                 cachedDetection = null;
         });
@@ -116,7 +121,7 @@ export function createExecutionHttpAdapter({ transport }, _options = {}) {
             async rescanLocalAgents() {
                 // Explicit operator action: always re-probe, and make the fresh result
                 // the new baseline for subsequent mounts.
-                return cacheDetection(requestAgentDetection());
+                return cacheDetection(requestAgentDetection({ force: true }));
             },
             async testConnection(config) {
                 return transport.testExecutionConnection({

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

@@ -1,7 +1,7 @@
 export { API_KEY_CROSS_VENDOR_WARNING, API_KEY_TOO_SHORT_WARNING, CUSTOM_MODEL_SENTINEL, CUSTOM_PRESET_ID, DEFAULT_AGENT_CLI_ENV_FIELDS, DEFAULT_AGENT_DESCRIPTIONS, DEFAULT_BASE_URL_BY_PROTOCOL, DEFAULT_PROVIDER_PRESETS, MIN_PLAUSIBLE_API_KEY_LENGTH, PROTOCOL_OPTIONS, } from './constants.js';
 export { createFakeExecutionPort, type FakeExecutionPortOptions } from './dependencies.js';
 export type { ExecutionPort } from './ports.js';
-export { agentCliEnvValue, agentDiagnosticTooltip, agentExecutableRepairState, agentMetaLabel, type AgentMetaLabels, agentModelSummary, apiKeyFormatWarning, binPathEnvField, cleanAgentVersionLabel, cliEnvFieldsForAgent, credentialsForPreset, customPreset, filterAgentModelOptions, groupPresets, isBaseUrlInvalid, isProviderConfigured, isValidApiBaseUrl, missingRequiredFields, modelIdForReasoningLevel, nextConfigForAgentCliEnvChange, nextConfigForAgentModel, nextConfigForAgentReasoning, nextConfigForAgentSelect, nextConfigForModeChange, nextConfigForPresetSelect, nextConfigForProtocolSelect, parseMaxTokens, presetRequiresApiKey, presetsForProtocol, reasoningModelGroupFor, reasoningModelGroups, resolveSelectedPreset, selectedAgentModel, selectedAgentReasoning, shouldShowCustomModelInput, showsBaseUrlField, sortDetectedAgents, splitReasoningModelId, } from './rules.js';
+export { agentCliEnvValue, agentDiagnosticTooltip, agentExecutableRepairState, agentMetaLabel, type AgentMetaLabels, agentModelSummary, apiKeyFormatWarning, binPathEnvField, cleanAgentVersionLabel, cliEnvFieldsForAgent, credentialsForPreset, customPreset, filterAgentModelOptions, groupPresets, isBaseUrlInvalid, isProviderConfigured, isValidApiBaseUrl, missingRequiredFields, modelIdForReasoningLevel, nextConfigForAgentCliEnvChange, nextConfigForAgentModel, nextConfigForAgentReasoning, nextConfigForAgentSelect, nextConfigForModeChange, nextConfigForPresetSelect, nextConfigForProtocolSelect, parseMaxTokens, presetRequiresApiKey, presetsForProtocol, reasoningModelGroupFor, reasoningModelGroups, resolveSelectedPreset, selectedAgentModel, selectedAgentReasoning, shouldShowCustomModelInput, showsBaseUrlField, sortDetectedAgents, partitionAgentsByInstalled, splitReasoningModelId, } from './rules.js';
 export type { AgentAuthStatus, AgentCliEnvFieldSpec, AgentDiagnostic, AgentDiagnosticReason, AgentDiagnosticSeverity, AgentExecutableRepair, AgentExecutableSource, AgentFixIntent, AgentModelOption, AgentModelSource, AgentScanState, ApiKeyWarning, AgentSupportsCustomModel, AgentTestState, ApiProtocol, ByokConfig, ByokProviderCredentials, ByokRequiredField, ConnectionTestState, DetectedAgent, ExecutionConfig, ExecutionMode, LocalCliConfig, ModelDiscoveryState, ProviderPreset, ProviderPresetKind, ReasoningModelGroup, } from './types.js';
 export { ExecutionTab } from './react/components/ExecutionTab.js';
 export type { ExecutionTabProps } from './react/components/ExecutionTab.js';

package/dist/features/execution/index.js

@@ -1,6 +1,6 @@
 export { API_KEY_CROSS_VENDOR_WARNING, API_KEY_TOO_SHORT_WARNING, CUSTOM_MODEL_SENTINEL, CUSTOM_PRESET_ID, DEFAULT_AGENT_CLI_ENV_FIELDS, DEFAULT_AGENT_DESCRIPTIONS, DEFAULT_BASE_URL_BY_PROTOCOL, DEFAULT_PROVIDER_PRESETS, MIN_PLAUSIBLE_API_KEY_LENGTH, PROTOCOL_OPTIONS, } from './constants.js';
 export { createFakeExecutionPort } from './dependencies.js';
-export { agentCliEnvValue, agentDiagnosticTooltip, agentExecutableRepairState, agentMetaLabel, agentModelSummary, apiKeyFormatWarning, binPathEnvField, cleanAgentVersionLabel, cliEnvFieldsForAgent, credentialsForPreset, customPreset, filterAgentModelOptions, groupPresets, isBaseUrlInvalid, isProviderConfigured, isValidApiBaseUrl, missingRequiredFields, modelIdForReasoningLevel, nextConfigForAgentCliEnvChange, nextConfigForAgentModel, nextConfigForAgentReasoning, nextConfigForAgentSelect, nextConfigForModeChange, nextConfigForPresetSelect, nextConfigForProtocolSelect, parseMaxTokens, presetRequiresApiKey, presetsForProtocol, reasoningModelGroupFor, reasoningModelGroups, resolveSelectedPreset, selectedAgentModel, selectedAgentReasoning, shouldShowCustomModelInput, showsBaseUrlField, sortDetectedAgents, splitReasoningModelId, } from './rules.js';
+export { agentCliEnvValue, agentDiagnosticTooltip, agentExecutableRepairState, agentMetaLabel, agentModelSummary, apiKeyFormatWarning, binPathEnvField, cleanAgentVersionLabel, cliEnvFieldsForAgent, credentialsForPreset, customPreset, filterAgentModelOptions, groupPresets, isBaseUrlInvalid, isProviderConfigured, isValidApiBaseUrl, missingRequiredFields, modelIdForReasoningLevel, nextConfigForAgentCliEnvChange, nextConfigForAgentModel, nextConfigForAgentReasoning, nextConfigForAgentSelect, nextConfigForModeChange, nextConfigForPresetSelect, nextConfigForProtocolSelect, parseMaxTokens, presetRequiresApiKey, presetsForProtocol, reasoningModelGroupFor, reasoningModelGroups, resolveSelectedPreset, selectedAgentModel, selectedAgentReasoning, shouldShowCustomModelInput, showsBaseUrlField, sortDetectedAgents, partitionAgentsByInstalled, splitReasoningModelId, } from './rules.js';
 export { ExecutionTab } from './react/components/ExecutionTab.js';
 export { ByokProviderForm } from './react/components/ByokProviderForm.js';
 export { LocalCliAgentList } from './react/components/LocalCliAgentList.js';

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

@@ -58,6 +58,8 @@ export interface ByokProviderFormProps {
      * Omitted by every existing caller, so the rendered output is byte-identical without it.
      */
     formFooter?: ReactNode;
+    /** Host actions directly below Model and its results, before any Advanced disclosure. */
+    modelFooter?: ReactNode;
     /**
      * `true` when a key is already held somewhere the browser cannot read — so the API-key input is
      * legitimately empty and must NOT be treated as a missing required field.
@@ -91,6 +93,21 @@ export interface ByokProviderFormProps {
     apiKeyPlaceholder?: string;
     /** This card's own agent handle — see `ExecutionTab`'s `agentHandle` doc for the split. */
     agentHandle?: string;
+    /**
+     * A host's button row for the key (Test key / Save key), directly UNDER the input; Show stays on
+     * the input's own line (owner, 2026-10-09: the input with Show beside it, actions beneath). Given,
+     * the key field renders as a `<div>` whose `<label>` wraps only the field name, so these buttons are
+     * never nested inside a label (which would fold their text into the input's accessible name).
+     */
+    apiKeyActions?: ReactNode;
+    /**
+     * Moves Base URL and Max tokens into a collapsed "Advanced" disclosure after the Model row. For
+     * hosts where those two are rarely touched; it opens on its own while Base URL is invalid or
+     * missing, so a required-field problem is never hidden. Default `false` keeps the original order.
+     */
+    collapseAdvanced?: boolean;
+    /** Paint required-field errors after that field loses focus; validation gates stay immediate. */
+    deferMissingFeedback?: boolean;
 }
 /**
  * The BYOK credential card: API key, base URL, optional token cap, and model.
@@ -98,5 +115,5 @@ export interface ByokProviderFormProps {
  * `ByokModelField`, `ByokConnectionTestControl`) — already factored out
  * upstream, so this is assembly plus the origin's required-field marking.
  */
-export declare function ByokProviderForm({ config, onConfigChange, preset, presets, modelDiscovery, connectionTest, onTestConnection, canTestConnection, apiKeyFooter, formFooter, apiKeyStoredExternally, apiKeyPlaceholder, agentHandle, }: ByokProviderFormProps): import("react").JSX.Element;
+export declare function ByokProviderForm({ config, onConfigChange, preset, presets, modelDiscovery, connectionTest, onTestConnection, canTestConnection, apiKeyFooter, formFooter, modelFooter, apiKeyStoredExternally, apiKeyPlaceholder, agentHandle, apiKeyActions, collapseAdvanced, deferMissingFeedback, }: ByokProviderFormProps): import("react").JSX.Element;
 //# sourceMappingURL=ByokProviderForm.d.ts.map

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

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+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 { apiKeyFormatWarning, isBaseUrlInvalid, missingRequiredFields, parseMaxTokens, presetRequiresApiKey, shouldShowCustomModelInput, showsBaseUrlField, } from '../../rules.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';
 /**
  * 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, apiKeyStoredExternally = false, apiKeyPlaceholder, agentHandle, }) {
+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, }) {
     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
@@ -33,13 +36,7 @@ export function ByokProviderForm({ config, onConfigChange, preset, presets = DEF
     useEffect(() => {
         setRevealKey(false);
     }, [config.providerId]);
-    const missing = new Set(missingRequiredFields(config, preset));
-    // A stored-but-unreadable key satisfies the requirement. Subtracted here rather than threaded into
-    // `missingRequiredFields` because that function is a pure rule over `ByokConfig` and this is a fact
-    // about the HOST's storage, which does not belong in the config shape.
-    if (apiKeyStoredExternally)
-        missing.delete('apiKey');
-    const baseUrlInvalid = isBaseUrlInvalid(config);
+    const { missing, baseUrlInvalid, isMissing, markTouched } = useByokFieldValidation({ config, preset, apiKeyStoredExternally }, { deferMissingFeedback });
     /** 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);
@@ -70,7 +67,10 @@ export function ByokProviderForm({ config, onConfigChange, preset, presets = DEF
     // 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 });
-    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("label", { className: "jini-field", children: [_jsxs("span", { className: "jini-field-label", 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", { className: 'jini-input' + (missing.has('apiKey') ? ' is-missing' : ''), type: revealKey ? 'text' : 'password', 
+    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
@@ -81,9 +81,7 @@ export function ByokProviderForm({ config, onConfigChange, preset, presets = DEF
                           
                                            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') })] }), _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, _jsxs("div", { className: "jini-byok-field-row", children: [showsBaseUrlField(preset) ? (_jsxs("label", { className: "jini-field", children: [_jsxs("span", { className: "jini-field-label", children: [t('Base URL'), _jsx("span", { className: "jini-field-required", "aria-hidden": "true", children: "*" })] }), _jsx("input", { className: 'jini-input' + (baseUrlInvalid || missing.has('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.') })] })] }), _jsxs("div", { className: "jini-byok-model-row", children: [_jsxs("label", { className: "jini-field", 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' + (missing.has('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) => {
+                                        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.
@@ -92,7 +90,7 @@ export function ByokProviderForm({ config, onConfigChange, preset, presets = DEF
                                     }
                                     setExplicitCustomModel(false);
                                     patch({ model: next });
-                                } })) : null, !showModelPicker || customModelActive ? (_jsx("input", { className: 'jini-input' + (missing.has('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' ? (
+                                } })) : 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".
@@ -103,6 +101,6 @@ export function ByokProviderForm({ config, onConfigChange, preset, presets = DEF
             // 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, formFooter ? _jsx("div", { className: "jini-byok-form-footer", children: formFooter }) : null] }));
+                        : 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] }));
 }
 //# sourceMappingURL=ByokProviderForm.js.map

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { AgentCliEnvFieldSpec, AgentTestState, DetectedAgent, LocalCliConfig } from '../../types.js';
 export interface LocalCliAgentCardProps {
     agent: DetectedAgent;
@@ -38,6 +38,10 @@ export interface LocalCliAgentCardProps {
  * the origin's managed-runtime card — its wallet balance, plan badges,
  * sign-in pill, and upgrade coachmarks are bound to that product's hosted
  * service, not to the idea of "a CLI on a machine".
+ *
+ * Owner, 2026-10-09: selection grows this card inside its own grid column.
+ * `LocalCliAgentSettings` stays inside it, so the neighbour keeps its normal
+ * height rather than sharing a full-row settings strip.
  */
 export declare function LocalCliAgentCard({ agent, config, selected, onSelect, onModelChange, onReasoningChange, onEnvChange, cliEnvFields, renderIcon, onTest, agentTest, onRescan, agentHandle, }: LocalCliAgentCardProps): import("react").JSX.Element;
 //# sourceMappingURL=LocalCliAgentCard.d.ts.map

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

@@ -1,13 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { agentHandleProps, agentSubHandle } from '@jini-ai/agentic';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { agentHandleProps } from '@jini-ai/agentic';
 import { useT } from '../../../i18n/index.js';
-import { CUSTOM_MODEL_SENTINEL, DEFAULT_AGENT_DESCRIPTIONS } from '../../constants.js';
-import { agentExecutableRepairState, agentMetaLabel, agentModelSummary, binPathEnvField, } from '../../rules.js';
-import { useReasoningControl } from '../hooks/useReasoningControl.js';
-import { AgentCliEnvFields } from './AgentCliEnvFields.js';
+import { DEFAULT_AGENT_DESCRIPTIONS } from '../../constants.js';
+import { agentMetaLabel, agentModelSummary } from '../../rules.js';
+import { useLocalCliAgentCard } from '../hooks/useLocalCliAgentCard.js';
 import { AgentDiagnosticRow } from './AgentDiagnosticRow.js';
-import { SearchableModelSelect } from './SearchableModelSelect.js';
+import { LocalCliAgentSettings } from './LocalCliAgentSettings.js';
 /**
  * One detected code-agent CLI, as a selectable card.
  *
@@ -21,18 +19,14 @@ import { SearchableModelSelect } from './SearchableModelSelect.js';
  * the origin's managed-runtime card — its wallet balance, plan badges,
  * sign-in pill, and upgrade coachmarks are bound to that product's hosted
  * service, not to the idea of "a CLI on a machine".
+ *
+ * Owner, 2026-10-09: selection grows this card inside its own grid column.
+ * `LocalCliAgentSettings` stays inside it, so the neighbour keeps its normal
+ * height rather than sharing a full-row settings strip.
  */
 export function LocalCliAgentCard({ agent, config, selected, onSelect, onModelChange, onReasoningChange, onEnvChange, cliEnvFields, renderIcon, onTest, agentTest, onRescan, agentHandle, }) {
     const t = useT();
-    // Whether the operator explicitly opened the free-text "Custom" entry via
-    // the model picker's own "Custom…" option — distinct from "the saved model
-    // simply isn't in the known list" (`shouldShowCustomModelInput` covers
-    // both, but only THIS one needs to be remembered as a UI-local toggle,
-    // since it is not itself persisted config: see `LocalCliConfig`, which has
-    // nowhere for "the operator is mid-typing a custom id" to live). Scoped to
-    // this card instance, so switching to a different agent and back does not
-    // leak one agent's custom-mode toggle onto another.
-    const [explicitCustomMode, setExplicitCustomMode] = useState(false);
+    const card = useLocalCliAgentCard({ agent, config, agentTest, cliEnvFields, onModelChange, onReasoningChange, onRescan, onTest, t });
     const description = agent.description ?? DEFAULT_AGENT_DESCRIPTIONS[agent.id];
     const meta = agentMetaLabel(agent, {
         authRequired: t('Authentication required'),
@@ -41,77 +35,8 @@ export function LocalCliAgentCard({ agent, config, selected, onSelect, onModelCh
         notInstalled: t('Not installed'),
     });
     const summary = agentModelSummary(config, agent);
-    const { hasModels, reasoningOptions, hasReasoning, reasoningValue, reasoningDisabled, allowCustomModel, customActive, modelChoices, selectValue, customModelInputValue, resolveNextModelId, resolveReasoningModelId, } = useReasoningControl({
-        agent,
-        config,
-        explicitCustomMode,
-        onReasoningChange: (next) => onReasoningChange(agent.id, next),
-    });
-    // `modelsSource` is optional in the contract, so an absent value means the
-    // host did not say where the list came from — NOT that it came from a
-    // built-in fallback. Defaulting to 'fallback' rendered "Built-in list" over
-    // a list that may well be live, and told the operator to Rescan to fix a
-    // problem they do not have. Unknown provenance shows no badge and no claim.
-    const source = agent.modelsSource;
-    const sourceLabel = source === 'live' ? t('Live from CLI') : source === 'fallback' ? t('Built-in list') : '';
-    const sourceHint = source === 'live'
-        ? t("Model list comes from this CLI. Default uses the CLI's own config.")
-        : source === 'fallback'
-            ? t('Showing built-in defaults. Click Rescan to pull live models from the CLI.')
-            : '';
-    // The test result belongs to whichever agent was probed, so a stale verdict
-    // from a previously-tested CLI never renders under this one.
-    const testing = agentTest.status === 'testing' && agentTest.agentId === agent.id;
-    const result = (agentTest.status === 'ok' || agentTest.status === 'error') && agentTest.agentId === agent.id
-        ? agentTest
-        : null;
-    // The "use the binary that actually ran" / "clear the override" repair
-    // affordance — only meaningful when a successful test silently fell back
-    // off a configured override, AND this agent's catalog names which field
-    // that override lives in. See `agentExecutableRepairState`'s doc.
-    //
-    // `AgentTestState`'s 'ok' variant spells success as `status: 'ok'`, not an
-    // `ok: true` field — `agentExecutableRepairState` takes the latter (it
-    // mirrors `ExecutionPort.testAgent`'s raw resolved shape, one layer below
-    // this state union), so the two must be translated explicitly here rather
-    // than passing `result` straight through.
-    const repair = result?.status === 'ok'
-        ? agentExecutableRepairState({
-            ok: true,
-            usedExecutableSource: result.usedExecutableSource,
-            detectedExecutablePath: result.detectedExecutablePath,
-        })
-        : null;
-    const repairField = repair ? binPathEnvField(cliEnvFields, agent.id) : null;
-    const openUrl = (url) => {
-        if (!url)
-            return;
-        window.open(url, '_blank', 'noopener,noreferrer');
-    };
-    const diagnosticHandlers = {
-        onRescan,
-        onOpenInstall: agent.installUrl ? () => openUrl(agent.installUrl) : undefined,
-        onOpenDocs: agent.docsUrl ? () => openUrl(agent.docsUrl) : undefined,
-    };
     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 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "jini-agent-card-name-divider", "aria-hidden": "true", children: "\u00B7" }), _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 && onTest ? (_jsx("button", { type: "button", className: 'jini-btn jini-agent-card-test' + (testing ? ' is-loading' : ''), "data-testid": `jini-agent-test-${agent.id}`, disabled: testing, onClick: () => onTest(agent), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'test', role: 'button', label: t('Test') }) }), children: testing ? t('Testing…') : t('Test') })) : null] }), (agent.diagnostics ?? []).map((diagnostic, index) => (_jsx(AgentDiagnosticRow, { diagnostic: diagnostic, handlers: diagnosticHandlers }, `${diagnostic.reason}-${index}`))), selected && (hasModels || hasReasoning) ? (_jsxs("div", { className: "jini-agent-card-config", children: [hasModels ? (_jsxs(_Fragment, { children: [_jsxs("label", { className: "jini-field", children: [_jsxs("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: (nextValue) => {
-                                            if (nextValue === CUSTOM_MODEL_SENTINEL) {
-                                                setExplicitCustomMode(true);
-                                                onModelChange(agent.id, '');
-                                                return;
-                                            }
-                                            setExplicitCustomMode(false);
-                                            onModelChange(agent.id, resolveNextModelId(nextValue));
-                                        } })] }), sourceHint ? _jsx("p", { className: "jini-field-hint", children: sourceHint }) : null] })) : null, customActive ? (_jsxs("label", { className: "jini-field", children: [_jsx("span", { className: "jini-field-label", children: t('Custom model id') }), _jsx("input", { className: "jini-input", 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-field", children: [_jsx("span", { className: "jini-field-label", children: t('Reasoning effort') }), _jsx("select", { className: "jini-input", "data-testid": `jini-agent-reasoning-${agent.id}`, value: reasoningValue, disabled: reasoningDisabled, onChange: (event) => {
-                                    // A model-suffix agent has no reasoning value of its own to record: the choice
-                                    // is which model id runs, so it goes back out through `onModelChange`.
-                                    const suffixModelId = resolveReasoningModelId(event.target.value);
-                                    if (suffixModelId !== null) {
-                                        onModelChange(agent.id, suffixModelId);
-                                        return;
-                                    }
-                                    onReasoningChange(agent.id, 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] })) : null, selected ? (_jsx(AgentCliEnvFields, { agentId: agent.id, fields: cliEnvFields, config: config, onChange: onEnvChange })) : 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] }));
+            (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] }));
 }
 //# sourceMappingURL=LocalCliAgentCard.js.map

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import type { AgentCliEnvFieldSpec, AgentScanState, AgentTestState, DetectedAgent, LocalCliConfig } from '../../types.js';
+import { useLocalCliAgentList } from '../hooks/useLocalCliAgentList.js';
 export interface LocalCliAgentListProps {
     agents: readonly DetectedAgent[];
     config: LocalCliConfig;
@@ -27,6 +28,8 @@ export interface LocalCliAgentListProps {
     /** This list's own agent handle — see `ExecutionTab`'s `agentHandle` doc. Each card gets its own
      *  distinct sub-handle, derived from the agent's own stable id via `buildAgentListHandles`. */
     agentHandle?: string;
+    /** Injection seam for the not-installed disclosure state. */
+    useAgentList?: typeof useLocalCliAgentList | undefined;
 }
 /**
  * The detected code-agent CLIs, as a selectable card grid.
@@ -36,5 +39,5 @@ export interface LocalCliAgentListProps {
  * managed-runtime entry (wallet, sign-in, plan upgrades) is left behind; see
  * `LocalCliAgentCard` for what that split does and does not cover.
  */
-export declare function LocalCliAgentList({ agents, config, scan, onSelect, onModelChange, onReasoningChange, onEnvChange, cliEnvFields, onRescan, onTest, agentTest, renderAgentIcon, scopeLabel, agentHandle, }: LocalCliAgentListProps): import("react").JSX.Element;
+export declare function LocalCliAgentList({ agents, config, scan, onSelect, onModelChange, onReasoningChange, onEnvChange, cliEnvFields, onRescan, onTest, agentTest, renderAgentIcon, scopeLabel, agentHandle, useAgentList, }: LocalCliAgentListProps): import("react").JSX.Element;
 //# sourceMappingURL=LocalCliAgentList.d.ts.map

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

@@ -1,7 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { agentHandleProps, buildAgentListHandles } from '@jini-ai/agentic';
 import { useT } from '../../../i18n/index.js';
 import { LocalCliAgentCard } from './LocalCliAgentCard.js';
+import { useLocalCliAgentList } from '../hooks/useLocalCliAgentList.js';
 /**
  * The detected code-agent CLIs, as a selectable card grid.
  *
@@ -10,11 +11,19 @@ import { LocalCliAgentCard } from './LocalCliAgentCard.js';
  * managed-runtime entry (wallet, sign-in, plan upgrades) is left behind; see
  * `LocalCliAgentCard` for what that split does and does not cover.
  */
-export function LocalCliAgentList({ agents, config, scan, onSelect, onModelChange, onReasoningChange, onEnvChange, cliEnvFields, onRescan, onTest, agentTest, renderAgentIcon, scopeLabel, agentHandle, }) {
+export function LocalCliAgentList({ agents, config, scan, onSelect, onModelChange, onReasoningChange, onEnvChange, cliEnvFields, onRescan, onTest, agentTest, renderAgentIcon, scopeLabel, agentHandle, useAgentList = useLocalCliAgentList, }) {
     const t = useT();
     const installed = agents.filter((agent) => agent.installed);
     const scope = scopeLabel ?? t('Runs a code-agent CLI detected by the host.');
-    const cardHandles = agentHandle ? buildAgentListHandles({ prefix: agentHandle, ids: agents.map((agent) => agent.id) }) : undefined;
-    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.') }))) : (_jsx("div", { className: "jini-agent-grid", children: agents.map((agent, index) => (_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, ...(cardHandles?.[index] ? { agentHandle: cardHandles[index] } : {}) }, agent.id))) }))] }));
+    const handleList = agentHandle ? buildAgentListHandles({ prefix: agentHandle, ids: agents.map((agent) => agent.id) }) : undefined;
+    const cardHandles = new Map(agents.map((agent, index) => [agent.id, handleList?.[index]]));
+    const list = useAgentList({ agents, selectedAgentId: config.agentId });
+    const renderCard = (agent) => {
+        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] }))] }));
 }
 //# sourceMappingURL=LocalCliAgentList.js.map

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

@@ -0,0 +1,20 @@
+import type { AgentCliEnvFieldSpec, DetectedAgent, LocalCliConfig } from '../../types.js';
+import type { UseLocalCliAgentCardResult } from '../hooks/useLocalCliAgentCard.js';
+export interface LocalCliAgentSettingsProps {
+    agent: DetectedAgent;
+    config: LocalCliConfig;
+    card: UseLocalCliAgentCardResult;
+    cliEnvFields: readonly AgentCliEnvFieldSpec[];
+    onModelChange: (agentId: string, model: string) => void;
+    onEnvChange: (agentId: string, envKey: string, value: string) => void;
+    agentHandle?: string | undefined;
+}
+/**
+ * The selected CLI's settings, stacked inside its own card.
+ *
+ * Owner, 2026-10-09: both the full-row card and the separate settings strip
+ * spread selection beyond its own column. Keep full-width controls and a
+ * visible provenance sentence inside the card so only that card grows taller.
+ */
+export declare function LocalCliAgentSettings({ agent, config, card, cliEnvFields, onModelChange, onEnvChange, agentHandle, }: LocalCliAgentSettingsProps): import("react").JSX.Element;
+//# sourceMappingURL=LocalCliAgentSettings.d.ts.map