@xenosystem/agent-interface-ui 0.1.21 → 0.1.23

package/dist/components/agent/AgentView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getAgentPlatformBridge } from '../../platformBridge.js';
+import { getAgentPlatformBridge, getOptionalAgentPlatformBridge } from '../../platformBridge.js';
 /*
  * AgentView.tsx - Active Agent Chat Interface
  *
@@ -23,7 +23,10 @@ import { AIStatusIndicator } from './AIStatusIndicator.js';
 import { CommandToolCard } from './CommandToolCard.js';
 import { AssistantTurnErrorNotice, AssistantTurnStatusNotice } from './AssistantTurnStatusNotice.js';
 import { commandPreviewText, compactCommandPreview, deriveToolInteractionState, hideDuplicateToolTitle, isCommandToolCall } from './toolCardDisplay.js';
+import { deriveWebJobProgressView, webJobStopAvailability, WEB_JOB_STOP_LABEL, WEB_JOB_STOP_TITLE } from './webJobProgressView.js';
 import { cloudModelName, cloudModelSortScore } from '../../utils/cloudModels.js';
+import { isSelectableLiveModel } from '../../utils/modelAvailability.js';
+import { availableAcpConfigIds } from '../../utils/providerAvailability.js';
 import { extractWindowsFilePathsFromToolResult, prepareAgentMarkdown, resolveMarkdownLocalFilePath, } from '../../utils/markdownWindowsPaths.js';
 import { agentReasoningEffortLabel, buildExplicitAgentReasoningEffortFamilies, indexAgentReasoningEffortFamilies, preferredAgentReasoningModelId, resolveAgentReasoningEffortFamily, } from '../../utils/agentReasoningEffort.js';
 import { acpAgentDisplayName, resolveHubAgentRuntimeProvider } from '../../utils/agentRuntimeProvider.js';
@@ -31,6 +34,7 @@ import { createConversationRuntimeBinding, reconcileCloudConversationModel, runt
 import { extractUserFileCreateRequest, extractUserFileEditRequest, isAbsoluteOrRootedPath } from '../../utils/fileCreateIntent.js';
 import { buildRuntimeAttachedContextPrompt } from '../../utils/agentAttachedContextPrompt.js';
 import { buildWorkspaceSelectionContinuationPrompt } from '../../utils/workspaceSelectionContinuation.js';
+import { isAgentComposerInputLocked } from './nativeTuiComposerInput.js';
 import { AgentProviderSelectorController } from '../../providerSelector.js';
 import { loadHubAgentProviderCatalog, refreshHubAgentProviderCatalog, subscribeHubAgentProviderCatalog, } from '../../adapters/xenoAgentHostCatalog.js';
 const AGENT_GPT55_DEFAULT_MODEL = 'gpt-5.5-high';
@@ -2454,6 +2458,40 @@ function WebContextEvidenceCard({ toolCall, expanded }) {
     }
     return (_jsxs("div", { "data-web-context-evidence": evidence.evidenceId, className: "ml-3 mt-0.5 max-w-[calc(100%-12px)] overflow-hidden rounded-[3px] border border-sky-300/[0.08] bg-sky-300/[0.025]", children: [_jsxs("div", { className: "flex min-h-[24px] items-center gap-2 px-2 text-[10px]", children: [_jsx("span", { className: "uppercase tracking-[0.14em] text-sky-200/38", children: "Evidence" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-white/42", title: evidence.finalUrl || evidence.sourceUrl, children: sourceLabel }), _jsxs("span", { className: "flex-shrink-0 text-white/24", children: [evidence.citations.length, " ", evidence.citations.length === 1 ? 'source' : 'sources'] }), projection.job && (_jsx("span", { className: "flex-shrink-0 uppercase tracking-[0.12em] text-white/20", children: projection.job.state }))] }), expanded && (_jsxs("div", { className: "border-t border-white/[0.04] px-2 py-1.5", children: [_jsx("div", { className: "truncate font-mono text-[9px] text-white/20", title: evidence.evidenceId, children: evidence.evidenceId }), visibleCitations.length > 0 && (_jsxs("div", { className: "mt-1 space-y-1", children: [visibleCitations.map((citation, index) => (_jsx("a", { href: citation.url, target: "_blank", rel: "noreferrer", className: "block min-w-0 truncate text-[10px] text-sky-200/45 hover:text-sky-100/70", title: citation.url, children: citation.title || citation.url }, `${citation.url}:${index}`))), evidence.citations.length > visibleCitations.length && (_jsxs("div", { className: "text-[9px] text-white/20", children: ["+", evidence.citations.length - visibleCitations.length, " more sources"] }))] }))] }))] }));
 }
+/**
+ * Live progress for a durable XENO Web Context job, rendered inside the tool card
+ * that owns it rather than in a surface of its own.
+ *
+ * It sits beside `WebContextEvidenceCard`, not inside it: progress is a live
+ * projection that arrives many times while a tool runs, evidence is the terminal
+ * artefact that arrives once. A tool call may carry either, both, or neither, and
+ * a tool that reports no progress renders exactly what it rendered before this
+ * existed.
+ */
+function WebContextJobProgressRow({ toolCall, onStop, }) {
+    const progress = toolCall.webJobProgress;
+    if (!progress)
+        return null;
+    const view = deriveWebJobProgressView(progress, toolCall.status);
+    // A stale row is a record, not a live one: nothing is still moving, so nothing pulses.
+    const indeterminate = view.percent === null && !view.stale;
+    return (_jsx("div", { "data-web-job-progress": view.jobId, "data-web-job-state": progress.state, "data-web-job-stale": view.stale ? 'true' : 'false', className: "ml-3 mt-0.5 max-w-[calc(100%-12px)] overflow-hidden rounded-[3px] border border-white/[0.06] bg-white/[0.02]", children: _jsxs("div", { className: "flex min-h-[24px] items-center gap-2 px-2 text-[10px]", children: [_jsx("span", { className: "flex-shrink-0 uppercase tracking-[0.14em] text-white/32", children: view.operationLabel }), _jsx("span", { className: `flex-shrink-0 uppercase tracking-[0.12em] ${view.tone === 'failed'
+                        ? 'text-[#ff8d86]/70'
+                        : view.tone === 'cancelled' || view.tone === 'partial'
+                            ? 'text-white/30'
+                            : 'text-white/45'}`, children: view.stateLabel }), _jsx("div", { role: "progressbar", "aria-label": view.ariaLabel, "aria-valuetext": view.valueText, ...(view.percent === null
+                        ? {}
+                        : { 'aria-valuemin': 0, 'aria-valuemax': 100, 'aria-valuenow': view.percent }), className: "h-[3px] w-[56px] flex-shrink-0 overflow-hidden rounded-[1px] bg-white/[0.07]", children: _jsx("div", { className: indeterminate
+                            ? // No percentage is known, so nothing may claim one. The pulse says
+                                // "moving"; under a reduced-motion preference it stops moving and
+                                // still reads as a partially filled track, and the counters text
+                                // carries the same fact for anyone who cannot see either.
+                                'h-full w-1/3 bg-white/25 animate-pulse motion-reduce:animate-none'
+                            : 'h-full bg-white/30', ...(indeterminate ? {} : { style: { width: `${view.percent}%` } }) }) }), _jsxs("span", { className: "min-w-0 flex-1 truncate tabular-nums text-white/38", title: view.valueText, children: [view.countersText, view.terminalReason ? ` · ${view.terminalReason}` : ''] }), onStop && (_jsx("button", { type: "button", onClick: (event) => {
+                        event.stopPropagation();
+                        onStop();
+                    }, title: WEB_JOB_STOP_TITLE, "aria-label": WEB_JOB_STOP_TITLE, className: "h-[18px] flex-shrink-0 rounded-[2px] border border-white/[0.08] bg-white/[0.04] px-1.5 text-[9px] uppercase tracking-[0.14em] text-white/45 transition-colors hover:border-white/[0.16] hover:bg-white/[0.07] hover:text-white/75", children: WEB_JOB_STOP_LABEL }))] }) }));
+}
 function readToolStringParam(params, keys) {
     if (!params)
         return '';
@@ -2759,6 +2797,18 @@ export function ToolCallsBlock({ calls, requestId, onAddApprovalRule, onOpenEdit
     const [expandedFilePreviewId, setExpandedFilePreviewId] = useState(null);
     const resolvePermission = useAgentChatStore(s => s.resolvePermission);
     const grantConversationDirectory = useAgentChatStore(s => s.grantConversationDirectory);
+    const abortActiveTurn = useAgentChatStore(s => s.abort);
+    const activeRequestId = useAgentChatStore(s => s.activeRequestId);
+    /**
+     * Whether a cancellation path actually exists in THIS composition. The bridge is
+     * injected by the consumer shell, so an embed that wires no runtime has none —
+     * and offering a Stop button that resolves to nothing is the fabricated-success
+     * failure mode, not a harmless no-op.
+     */
+    const optionalBridge = getOptionalAgentPlatformBridge();
+    const hostExposesCancellation = !!(optionalBridge?.acp?.cancelAgentPrompt
+        || optionalBridge?.agent?.cancel
+        || optionalBridge?.llm?.abort);
     if (calls.length === 0)
         return null;
     const handleGrantAccess = (pr) => {
@@ -3016,7 +3066,13 @@ export function ToolCallsBlock({ calls, requestId, onAddApprovalRule, onOpenEdit
                                                         setExpandedFilePreviewId(tc.id);
                                                     }
                                                 }
-                                            }, className: "flex-shrink-0", "aria-label": isExpanded ? 'Collapse tool details' : 'Expand tool details', children: _jsx(ChevronRight, { className: `w-3 h-3 text-white/15 transition-transform ${isExpanded ? 'rotate-90' : ''}` }) }))] })] }) })), tc.webContext && !isRunning && (_jsx(WebContextEvidenceCard, { toolCall: tc, expanded: isExpanded })), pr?.status === 'pending' && (_jsx(ToolApprovalCard, { toolCall: tc, permission: pr, canPersistAllowlist: 
+                                            }, className: "flex-shrink-0", "aria-label": isExpanded ? 'Collapse tool details' : 'Expand tool details', children: _jsx(ChevronRight, { className: `w-3 h-3 text-white/15 transition-transform ${isExpanded ? 'rotate-90' : ''}` }) }))] })] }) })), tc.webJobProgress && (_jsx(WebContextJobProgressRow, { toolCall: tc, onStop: webJobStopAvailability({
+                            progress: tc.webJobProgress,
+                            toolCallStatus: tc.status,
+                            requestId,
+                            activeRequestId,
+                            hostExposesCancellation,
+                        }).available ? abortActiveTurn : undefined })), tc.webContext && !isRunning && (_jsx(WebContextEvidenceCard, { toolCall: tc, expanded: isExpanded })), pr?.status === 'pending' && (_jsx(ToolApprovalCard, { toolCall: tc, permission: pr, canPersistAllowlist: 
                         // An ACP `execute` names no directory, and gating this on
                         // `directory` alone hid the persist choice for every such
                         // permission — which is why a user could not create a policy
@@ -3311,7 +3367,10 @@ export function AgentView(props) {
         acpAgents: acpAgentsForRuntime,
     }), [acpAgentsForRuntime, effectiveRuntimeSelection, props.permissionProfile]);
     const runtimeMode = acpModePending || runtimeProvider.kind === 'acp-provider' ? 'acp' : inferenceMode;
-    const selectableAcpAgents = useMemo(() => acpAgentsForRuntime.filter((agent) => agent.enabled), [acpAgentsForRuntime]);
+    const selectableAcpAgents = useMemo(() => {
+        const availableConfigIds = availableAcpConfigIds(sharedRuntimeProviders);
+        return acpAgentsForRuntime.filter((agent) => agent.enabled && availableConfigIds.has(agent.id));
+    }, [acpAgentsForRuntime, sharedRuntimeProviders]);
     const rawAcpProviderModel = effectiveRuntimeSelection?.providerKind === 'acp-provider'
         ? effectiveRuntimeSelection.providerModel
         : undefined;
@@ -3321,6 +3380,7 @@ export function AgentView(props) {
         : EMPTY_ACP_MODEL_CHOICES;
     const acpModelOptions = useMemo(() => acpProviderModelOptions
         .filter((option) => !option.familyBaseModelId)
+        .filter((option) => option.available !== false)
         .map((option) => option.id), [acpProviderModelOptions]);
     const acpProviderModelOptionById = useMemo(() => new Map(acpProviderModelOptions.map((option) => [option.id, option])), [acpProviderModelOptions]);
     const acpModelMessage = selectedAcpAgentConfigId ? acpModelMessagesByAgentId[selectedAcpAgentConfigId] : undefined;
@@ -3399,6 +3459,38 @@ export function AgentView(props) {
             cancelled = true;
         };
     }, [acpModelListOpen, selectedAcpAgentConfigId]);
+    useEffect(() => {
+        if (!modelListOpen || runtimeMode !== 'cloud')
+            return;
+        let cancelled = false;
+        setSharedProviderCatalogRefreshing(true);
+        refreshHubAgentProviderCatalog({ force: true })
+            .then((catalog) => {
+            if (cancelled)
+                return;
+            setSharedRuntimeProviders(catalog.providers);
+            setSharedProviderCatalogLoaded(true);
+        })
+            .catch(() => {
+            if (cancelled)
+                return;
+            setSharedRuntimeProviders((current) => current.map((provider) => (provider.id === 'xeno-cloud'
+                ? {
+                    ...provider,
+                    availability: 'unavailable',
+                    safeUnavailableReason: 'The live XENO model catalog could not be refreshed.',
+                    models: [],
+                }
+                : provider)));
+        })
+            .finally(() => {
+            if (!cancelled)
+                setSharedProviderCatalogRefreshing(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [modelListOpen, runtimeMode]);
     useEffect(() => {
         if (effectiveRuntimeSelection?.providerKind !== 'acp-provider' && !modelListOpen && !acpCliListOpen && !acpModelListOpen)
             return;
@@ -3460,9 +3552,10 @@ export function AgentView(props) {
     const acpCliBtnRef = useRef(null);
     const acpModelBtnRef = useRef(null);
     const authDisplayName = useAuthStore(s => s.user?.display_name ?? null);
+    const cloudRuntimeProvider = useMemo(() => sharedRuntimeProviders.find((entry) => entry.id === 'xeno-cloud'), [sharedRuntimeProviders]);
     const cloudModels = useMemo(() => {
-        const provider = sharedRuntimeProviders.find((entry) => entry.id === 'xeno-cloud');
-        return (provider?.models || [])
+        return (cloudRuntimeProvider?.models || [])
+            .filter(isSelectableLiveModel)
             .map((modelEntry) => ({
             id: modelEntry.id,
             name: modelEntry.displayName || cloudModelName(modelEntry.id),
@@ -3479,7 +3572,9 @@ export function AgentView(props) {
             const score = cloudModelSortScore(a.id) - cloudModelSortScore(b.id);
             return score || a.name.localeCompare(b.name);
         });
-    }, [sharedRuntimeProviders]);
+    }, [cloudRuntimeProvider]);
+    const cloudCatalogUnavailableReason = cloudRuntimeProvider?.safeUnavailableReason
+        || 'The live XENO model catalog is unavailable.';
     const availableModels = useXenoChatStore(s => s.availableModels);
     const fetchModels = useXenoChatStore(s => s.fetchModels);
     const localModels = useMemo(() => availableModels.filter(m => m.provider === 'local'), [availableModels]);
@@ -3641,10 +3736,9 @@ export function AgentView(props) {
         }).filter((entry) => !normalizedModelSearch || `${entry.name} ${entry.searchText}`.toLowerCase().includes(normalizedModelSearch));
     }, [acpEffortFamilies, acpEffortFamilyByModelId, acpModelOptions, acpProviderModel, acpProviderModelOptionById, normalizedModelSearch, selectedAcpEffortFamily?.baseId]);
     const preferredGpt55Model = useMemo(() => {
-        const selectableCloudModels = cloudModels.filter((modelEntry) => modelEntry.availability !== 'unavailable');
-        return selectableCloudModels.find(m => m.id === AGENT_GPT55_DEFAULT_MODEL)?.id
-            || selectableCloudModels.find(m => m.id === 'gpt-5.5')?.id
-            || selectableCloudModels[0]?.id
+        return cloudModels.find(m => m.id === AGENT_GPT55_DEFAULT_MODEL)?.id
+            || cloudModels.find(m => m.id === 'gpt-5.5')?.id
+            || cloudModels[0]?.id
             || AGENT_GPT55_DEFAULT_MODEL;
     }, [cloudModels]);
     useEffect(() => {
@@ -3663,9 +3757,12 @@ export function AgentView(props) {
                 return cloudModelName(selectedCloudEffortFamily.baseId);
             return isThinkingVariant ? `${cloud.name} (Thinking)` : cloud.name;
         }
+        if (inferenceMode === 'cloud' && sharedProviderCatalogLoaded) {
+            return cloudCatalogUnavailableReason.startsWith('Sign in') ? 'Sign in for Cloud' : 'Cloud unavailable';
+        }
         const local = availableModels.find(m => m.id === actualModelId);
         return local?.name || actualModelId;
-    }, [cloudModels, availableModels, selectedModel, actualModelId, selectedCloudEffortFamily, isThinkingVariant, runtimeProvider.kind, runtimeProvider.displayName, acpProviderModelDisplayName]);
+    }, [cloudModels, availableModels, selectedModel, actualModelId, selectedCloudEffortFamily, isThinkingVariant, runtimeProvider.kind, runtimeProvider.displayName, acpProviderModelDisplayName, inferenceMode, sharedProviderCatalogLoaded, cloudCatalogUnavailableReason]);
     const currentCloudModel = useMemo(() => cloudModels.find(m => m.id === actualModelId), [cloudModels, actualModelId]);
     const cloudModelSelectionMissing = runtimeProvider.kind !== 'acp-provider'
         && inferenceMode === 'cloud'
@@ -3678,11 +3775,13 @@ export function AgentView(props) {
     }, [actualModelId, currentCloudModel, preferredGpt55Model]);
     const cloudModelUnavailable = runtimeProvider.kind !== 'acp-provider'
         && inferenceMode === 'cloud'
-        && (cloudModelSelectionMissing || currentCloudModel?.availability === 'unavailable');
+        && ((sharedProviderCatalogLoaded && cloudModels.length === 0) || cloudModelSelectionMissing);
     const cloudModelDegraded = runtimeProvider.kind !== 'acp-provider' && inferenceMode === 'cloud' && currentCloudModel?.availability === 'degraded';
     const cloudModelStatusReason = cloudModelSelectionMissing
         ? 'The selected model is not present in the live model catalog. Choose an available model.'
-        : (currentCloudModel?.availabilityReason || null);
+        : (cloudModels.length === 0 && sharedProviderCatalogLoaded
+            ? cloudCatalogUnavailableReason
+            : (currentCloudModel?.availabilityReason || null));
     const renderModelSearch = () => (_jsx("div", { className: "shrink-0 border-b border-white/[0.06] bg-[#111111]", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-3 w-3 -translate-y-1/2 text-white/25" }), _jsx("input", { autoFocus: true, type: "text", value: modelSearchQuery, onChange: (event) => setModelSearchQuery(event.target.value), onKeyDown: (event) => {
                         if (event.key === 'Escape') {
                             setModelListOpen(false);
@@ -3698,6 +3797,64 @@ export function AgentView(props) {
         if (availableModels.length === 0)
             void fetchModels();
     }, [availableModels.length, fetchModels]);
+    const providerLaneSelectionRevisionRef = useRef(0);
+    const bindRuntimeProviderLane = useCallback((selection, modelId) => {
+        const providerLaneSelect = getAgentPlatformBridge().workspace.providerLaneSelect;
+        if (!conversationId || !conversation || !providerLaneSelect)
+            return;
+        const binding = resolveConversationWorkspaceBinding({
+            workspaceMode: conversation.workspaceMode,
+            rootDirectory: conversation.rootDirectory,
+            grantedDirectories: conversation.grantedDirectories || EMPTY_STRINGS,
+            inheritedDirectories: allowedDirectories,
+            hasMessages: conversation.messages.length > 0,
+        });
+        if (binding.mode === 'unselected') {
+            setToolStatus('Choose Chat or Agent mode before selecting a provider.');
+            return;
+        }
+        const bindRevision = ++providerLaneSelectionRevisionRef.current;
+        const selectedAt = selection.selectedAt;
+        const providerId = selection.providerId;
+        const acpAgentConfigId = selection.acpAgentConfigId;
+        void providerLaneSelect({
+            conversationId,
+            workspaceMode: binding.mode,
+            ...(binding.mode === 'workspace' && binding.rootDirectory
+                ? { workingDirectory: binding.rootDirectory }
+                : {}),
+            ...(props.workspaceId ? { workspaceId: props.workspaceId } : {}),
+            providerKind: selection.providerKind === 'acp-provider'
+                ? 'acp-provider'
+                : 'sdk-native',
+            ...(providerId ? { providerId } : {}),
+            ...(acpAgentConfigId ? { acpAgentConfigId } : {}),
+            model: modelId.replace(/:thinking$/, ''),
+        }).then((result) => {
+            if (bindRevision !== providerLaneSelectionRevisionRef.current)
+                return;
+            const latest = useAgentChatStore.getState().getConversation(conversationId);
+            if (!latest || latest.runtime?.selection.selectedAt !== selectedAt)
+                return;
+            if (!result?.success || !result.activeLane || !result.hostBinding) {
+                setToolStatus(result?.error || 'The selected provider could not be bound to this conversation.');
+                return;
+            }
+            setToolStatus(null);
+            updateConversation(conversationId, {
+                sessionUi: {
+                    ...(latest.sessionUi || {}),
+                    hostBinding: result.hostBinding,
+                    activeLane: result.activeLane,
+                    lanes: result.lanes || [result.activeLane],
+                },
+            });
+        }).catch((error) => {
+            if (bindRevision !== providerLaneSelectionRevisionRef.current)
+                return;
+            setToolStatus(error instanceof Error ? error.message : 'The selected provider could not be bound to this conversation.');
+        });
+    }, [allowedDirectories, conversation, conversationId, props.workspaceId, setToolStatus, updateConversation]);
     const persistRuntimeBinding = useCallback((selection, uiModel, mode) => {
         const previousSelection = conversation?.runtime?.selection;
         const runtime = createConversationRuntimeBinding({
@@ -3712,7 +3869,12 @@ export function AgentView(props) {
                 schemaVersion: 2,
                 model: uiModel,
                 runtime,
+                sessionUi: {
+                    ...(conversation?.sessionUi || {}),
+                    activeLane: undefined,
+                },
             });
+            bindRuntimeProviderLane(selection, uiModel);
         }
         if (conversationId
             && previousSelection?.providerKind === 'acp-provider'
@@ -3732,6 +3894,8 @@ export function AgentView(props) {
         return runtime;
     }, [
         agentId,
+        bindRuntimeProviderLane,
+        conversation?.sessionUi,
         conversation?.runtime?.selection,
         conversationId,
         props.teamId,
@@ -3775,11 +3939,14 @@ export function AgentView(props) {
         setEffortListOpen(false);
         setAcpCliListOpen(false);
         setAcpModelListOpen(false);
-        const rememberedCloudModel = cloudModels.find((modelEntry) => (modelEntry.id === lastCloudModel.replace(/:thinking$/, '')
-            && modelEntry.availability !== 'unavailable'));
-        const fallbackCloudModel = cloudModels.length === 0 && isAgentCloudModel(lastCloudModel)
-            ? lastCloudModel
-            : (rememberedCloudModel ? lastCloudModel : preferredGpt55Model);
+        if (cloudModels.length === 0) {
+            setToolStatus('No cloud models are currently available from the live XENO catalog.');
+            setModeExpanded(false);
+            setModelListOpen(false);
+            return;
+        }
+        const rememberedCloudModel = cloudModels.find((modelEntry) => (modelEntry.id === lastCloudModel.replace(/:thinking$/, '')));
+        const fallbackCloudModel = rememberedCloudModel ? lastCloudModel : preferredGpt55Model;
         setToolStatus(null);
         setInferenceMode('cloud');
         setModeExpanded(false);
@@ -3810,27 +3977,40 @@ export function AgentView(props) {
         setShowLocalRuntimePrompt(false);
         setToolStatus(null);
         setAcpModePending(true);
-        if (selectableAcpAgents.length === 0) {
-            await loadAcpAgentsForRuntime();
-        }
-        if (selectableAcpAgents.length === 0 && useAcpAgentStore.getState().agents.every((agent) => !agent.enabled)) {
-            setToolStatus('No enabled ACP configs. Open Settings to enable one.');
-        }
+        // Close the previous mode's menus as part of the synchronous transition.
+        // Doing this after the awaited Host/registry loads lets a user open the
+        // ACP provider picker and then has the stale transition completion close
+        // it underneath them — exactly the "empty picker" race seen in the live
+        // Electron scenario.
         setModelListOpen(false);
         setEffortListOpen(false);
         setAcpCliListOpen(false);
         setAcpModelListOpen(false);
-    }, [loadAcpAgentsForRuntime, selectableAcpAgents.length, setToolStatus]);
+        let providers = sharedRuntimeProviders;
+        if (!sharedProviderCatalogLoaded) {
+            const catalog = await loadHubAgentProviderCatalog();
+            providers = catalog.providers;
+            setSharedRuntimeProviders(catalog.providers);
+            setSharedProviderCatalogLoaded(true);
+        }
+        await loadAcpAgentsForRuntime();
+        const availableConfigIds = availableAcpConfigIds(providers);
+        const hasAvailableProvider = useAcpAgentStore.getState().agents.some((agent) => (agent.enabled && availableConfigIds.has(agent.id)));
+        if (!hasAvailableProvider) {
+            setToolStatus('No available ACP providers. Enable or repair one in Settings.');
+        }
+    }, [loadAcpAgentsForRuntime, setToolStatus, sharedProviderCatalogLoaded, sharedRuntimeProviders]);
     const selectAcpRuntime = useCallback((acpAgentConfigId, providerModel) => {
         const nextAcpAgentConfigId = acpAgentConfigId || selectedAcpAgentConfigId;
         if (!nextAcpAgentConfigId)
             return;
+        setToolStatus(null);
         setAcpRuntimeSelection(nextAcpAgentConfigId, providerModel);
         setModelListOpen(false);
         setEffortListOpen(false);
         setAcpCliListOpen(false);
         setAcpModelListOpen(false);
-    }, [selectedAcpAgentConfigId, setAcpRuntimeSelection]);
+    }, [selectedAcpAgentConfigId, setAcpRuntimeSelection, setToolStatus]);
     // Delay model selector visibility - hide instantly on expand, show after collapse animation (200ms)
     useEffect(() => {
         if (modeExpanded) {
@@ -3969,12 +4149,15 @@ export function AgentView(props) {
         && !!selectedAcpAgentConfigId
         && !acpRuntimeAgentDetails[selectedAcpAgentConfigId]
         && !acpRuntimeAgentDetailErrors[selectedAcpAgentConfigId];
-    const inputLocked = workspaceBinding.mode === 'unselected'
-        || !!props.externalInputLockReason
-        || isRunningCommand
-        || acpRuntimeReadinessPending
-        || (runtimeProvider.kind !== 'acp-provider' && !isModelReady)
-        || cloudModelUnavailable;
+    const inputLocked = isAgentComposerInputLocked({
+        workspaceUnselected: workspaceBinding.mode === 'unselected',
+        externalInputLocked: !!props.externalInputLockReason,
+        nativeTuiWriterAttached: !!props.onSendToNativeTui,
+        commandRunning: isRunningCommand,
+        acpRuntimeReadinessPending,
+        nonAcpModelNotReady: runtimeProvider.kind !== 'acp-provider' && !isModelReady,
+        cloudModelUnavailable,
+    });
     const queuedTurnCount = conversation?.pendingTurns?.length ?? 0;
     const checkpoints = conversation?.checkpoints || [];
     const pendingTurns = conversation?.pendingTurns || [];
@@ -5968,6 +6151,30 @@ export function AgentView(props) {
         const hasAttachments = attachmentsToSend.length > 0;
         if ((!trimmed && !hasAttachments) || inputLocked)
             return;
+        if (props.onSendToNativeTui) {
+            const targetConversationId = ensureConversationId(conversationId);
+            if (hasAttachments) {
+                appendMessage(targetConversationId, {
+                    role: 'assistant',
+                    content: 'Attach files from the native provider TUI or return to structured chat before sending attachments.',
+                    error: 'Native provider TUI input accepts text only.',
+                });
+                return;
+            }
+            setInput('');
+            if (textareaRef.current)
+                textareaRef.current.style.height = 'auto';
+            const delivered = await props.onSendToNativeTui(trimmed);
+            if (!delivered.success) {
+                setInput(trimmed);
+                appendMessage(targetConversationId, {
+                    role: 'assistant',
+                    content: delivered.error || 'The native provider TUI could not receive the message.',
+                    error: delivered.error || 'Native provider TUI input failed.',
+                });
+            }
+            return;
+        }
         const useLegacyDeterministicFileActions = isLegacyDeterministicFileActionCompatibilityEnabled();
         const replaceExistingFileCreate = useLegacyDeterministicFileActions && !hasAttachments && isReplaceExistingFileIntent(trimmed)
             ? findLastExistingFileWriteRequest(messages)
@@ -7271,18 +7478,17 @@ export function AgentView(props) {
                                         const fixture = agent.certification?.status === 'fixture_only';
                                         const ready = fixture || (agent.certification?.status === 'certified' && agent.providerReview?.runnable === true);
                                         return (_jsxs("button", { onClick: () => { selectAcpRuntime(agent.id, selected ? acpProviderModel : undefined); }, role: "option", "aria-selected": selected, className: `w-full flex items-center justify-between gap-2 px-3 py-1.5 text-left transition-colors cursor-pointer ${selected ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'}`, children: [_jsx("span", { className: `min-w-0 flex-1 text-[11px] truncate ${selected ? 'text-white/70' : 'text-white/40'}`, children: acpAgentDisplayName(agent) }), _jsx("span", { className: `text-[8px] uppercase tracking-wide ${ready ? 'text-[#96e59d]/70' : 'text-[#ffd38a]/70'}`, children: ready ? 'ready' : 'check' })] }, agent.id));
-                                    })) : (_jsx("div", { className: "px-3 py-2.5 text-[10px] text-white/25 text-center", children: "No enabled ACP CLI configs. Use Settings to enable one." }))] })), runtimeMode === 'acp' && acpModelListOpen && (_jsxs("div", { ref: acpModelListRef, className: "xeno-elevated-shell xeno-border-subtle absolute left-[170px] bottom-[44px] z-50 flex max-h-[280px] w-[220px] flex-col overflow-hidden rounded-md border", children: [renderModelSearch(), _jsxs("div", { role: "listbox", className: "min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 pt-2 pb-1 text-[9px] uppercase tracking-[0.14em] text-white/25", children: [_jsx("span", { children: "ACP model" }), sharedProviderCatalogRefreshing && !acpModelsLoading && _jsx("span", { children: "Refreshing..." })] }), _jsx("button", { onClick: () => { if (selectedAcpAgentConfigId)
+                                    })) : (_jsx("div", { className: "px-3 py-2.5 text-[10px] text-white/25 text-center", children: "No available ACP CLI providers. Enable or repair one in Settings." }))] })), runtimeMode === 'acp' && acpModelListOpen && (_jsxs("div", { ref: acpModelListRef, className: "xeno-elevated-shell xeno-border-subtle absolute left-[170px] bottom-[44px] z-50 flex max-h-[280px] w-[220px] flex-col overflow-hidden rounded-md border", children: [renderModelSearch(), _jsxs("div", { role: "listbox", className: "min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 pt-2 pb-1 text-[9px] uppercase tracking-[0.14em] text-white/25", children: [_jsx("span", { children: "ACP model" }), sharedProviderCatalogRefreshing && !acpModelsLoading && _jsx("span", { children: "Refreshing..." })] }), _jsx("button", { onClick: () => { if (selectedAcpAgentConfigId)
                                                     selectAcpRuntime(selectedAcpAgentConfigId, undefined); }, disabled: !selectedAcpAgentConfigId, role: "option", "aria-selected": !acpProviderModel, className: `w-full flex items-center justify-between px-3 py-1.5 text-left transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed ${!acpProviderModel ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'}`, children: _jsx("span", { className: `text-[11px] truncate ${!acpProviderModel ? 'text-white/70' : 'text-white/40'}`, children: "CLI default" }) }), acpModelsLoading ? (_jsx("div", { className: "px-3 py-2.5 text-[10px] text-white/25 text-center", children: "Loading models..." })) : acpModelOptions.length > 0 ? (filteredAcpModelOptions.length > 0 ? filteredAcpModelOptions.map((entry) => {
                                                 const selected = entry.selectionKey === (selectedAcpEffortFamily?.baseId || acpProviderModel);
                                                 return (_jsxs("button", { onClick: () => { if (selectedAcpAgentConfigId)
                                                         selectAcpRuntime(selectedAcpAgentConfigId, entry.id); }, disabled: !selectedAcpAgentConfigId || !entry.available, role: "option", "aria-selected": selected, className: `w-full flex items-center justify-between px-3 py-1.5 text-left transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed ${selected ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'}`, title: entry.reason || undefined, children: [_jsx("span", { className: `min-w-0 flex-1 text-[11px] truncate ${selected ? 'text-white/70' : 'text-white/40'}`, children: entry.name }), !entry.available && _jsx("span", { className: "ml-2 flex-shrink-0 text-[8px] uppercase tracking-wide text-[#ff8f8f]", children: "Unavailable" })] }, entry.selectionKey));
-                                            }) : (_jsx("div", { className: "px-3 py-2.5 text-[10px] text-white/25 text-center", children: "No matching models" }))) : (_jsx("div", { className: "px-3 py-2.5 text-[10px] text-white/25 text-center", children: selectedAcpAgentConfigId ? (acpModelMessage || 'No preset models for this ACP CLI') : 'Select a CLI first' }))] })] })), modelListOpen && runtimeMode !== 'acp' && (_jsxs("div", { ref: modelListRef, className: "xeno-elevated-shell xeno-border-subtle absolute left-3 bottom-[44px] z-50 flex max-h-[340px] w-[280px] flex-col overflow-hidden rounded-md border", children: [renderModelSearch(), _jsx("div", { role: "listbox", className: "min-h-0 overflow-y-auto", children: runtimeMode === 'cloud' ? (cloudModels.length > 0 ? (filteredCloudModelOptions.length > 0 ? filteredCloudModelOptions.map(entry => ((() => {
+                                            }) : (_jsx("div", { className: "px-3 py-2.5 text-[10px] text-white/25 text-center", children: "No matching models" }))) : (_jsx("div", { className: "px-3 py-2.5 text-[10px] text-white/25 text-center", children: selectedAcpAgentConfigId ? (acpModelMessage || 'No preset models for this ACP CLI') : 'Select a CLI first' }))] })] })), modelListOpen && runtimeMode !== 'acp' && (_jsxs("div", { ref: modelListRef, className: "xeno-elevated-shell xeno-border-subtle absolute left-3 bottom-[44px] z-50 flex max-h-[340px] w-[280px] flex-col overflow-hidden rounded-md border", children: [renderModelSearch(), _jsx("div", { role: "listbox", className: "min-h-0 overflow-y-auto", children: runtimeMode === 'cloud' ? (sharedProviderCatalogRefreshing ? (_jsx("div", { className: "px-3 py-3 text-[10px] text-white/25 text-center", children: "Refreshing available models..." })) : cloudModels.length > 0 ? (filteredCloudModelOptions.length > 0 ? filteredCloudModelOptions.map(entry => ((() => {
                                             const modelMeta = cloudModels.find(cm => cm.id === entry.id.replace(/:thinking$/, ''));
-                                            const unavailable = modelMeta?.availability === 'unavailable';
                                             const degraded = modelMeta?.availability === 'degraded';
                                             const selected = entry.selectionKey === (selectedCloudEffortFamily?.baseId || selectedModel);
-                                            return (_jsxs("button", { onClick: () => { setInferenceMode('cloud'); setSelectedModel(entry.id); setModelListOpen(false); setEffortListOpen(false); }, role: "option", "aria-selected": selected, className: `w-full flex items-center justify-between px-3 py-1.5 text-left transition-colors cursor-pointer ${selected ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'} ${unavailable ? 'opacity-60' : ''}`, title: modelMeta?.availabilityReason || undefined, children: [_jsxs("div", { className: "min-w-0 flex-1 flex items-center gap-2", children: [_jsx("span", { className: `text-[11px] truncate ${selected ? 'text-white/70' : 'text-white/40'}`, children: entry.name }), unavailable && _jsx("span", { className: "text-[8px] uppercase tracking-wide text-[#ff8f8f]", children: "Unavailable" }), !unavailable && degraded && _jsx("span", { className: "text-[8px] uppercase tracking-wide text-[#ffd38a]", children: "Fallback" })] }), _jsx("span", { className: "text-[9px] text-white/20 flex-shrink-0 ml-2 tabular-nums", children: (() => { const m = cloudModels.find(cm => cm.id === entry.id.replace(/:thinking$/, '')); return m?.creditsPerKToken != null ? `${m.creditsPerKToken}/1k` : ''; })() })] }, entry.id));
-                                        })())) : (_jsx("div", { className: "px-3 py-3 text-[10px] text-white/25 text-center", children: "No matching models" }))) : (_jsx("div", { className: "px-3 py-3 text-[10px] text-white/25 text-center", children: "Loading models..." }))) : (_jsxs(_Fragment, { children: [localModels.length > 0 ? (filteredLocalModels.length > 0 ? filteredLocalModels.map(m => {
+                                            return (_jsxs("button", { onClick: () => { setInferenceMode('cloud'); setSelectedModel(entry.id); setModelListOpen(false); setEffortListOpen(false); }, role: "option", "aria-selected": selected, className: `w-full flex items-center justify-between px-3 py-1.5 text-left transition-colors cursor-pointer ${selected ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'}`, title: modelMeta?.availabilityReason || undefined, children: [_jsxs("div", { className: "min-w-0 flex-1 flex items-center gap-2", children: [_jsx("span", { className: `text-[11px] truncate ${selected ? 'text-white/70' : 'text-white/40'}`, children: entry.name }), degraded && _jsx("span", { className: "text-[8px] uppercase tracking-wide text-[#ffd38a]", children: "Fallback" })] }), _jsx("span", { className: "text-[9px] text-white/20 flex-shrink-0 ml-2 tabular-nums", children: (() => { const m = cloudModels.find(cm => cm.id === entry.id.replace(/:thinking$/, '')); return m?.creditsPerKToken != null ? `${m.creditsPerKToken}/1k` : ''; })() })] }, entry.id));
+                                        })())) : (_jsx("div", { className: "px-3 py-3 text-[10px] text-white/25 text-center", children: "No matching models" }))) : (_jsx("div", { className: "px-3 py-3 text-[10px] leading-relaxed text-white/35 text-center", children: cloudCatalogUnavailableReason }))) : (_jsxs(_Fragment, { children: [localModels.length > 0 ? (filteredLocalModels.length > 0 ? filteredLocalModels.map(m => {
                                                     const selected = m.id === (selectedLocalEffortFamily?.baseId || selectedModel);
                                                     return (_jsxs("button", { onClick: () => { setInferenceMode('local'); setSelectedModel(m.id); setModelListOpen(false); setEffortListOpen(false); }, role: "option", "aria-selected": selected, className: `w-full flex items-center gap-2 px-3 py-1.5 text-left transition-colors cursor-pointer ${selected ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'}`, children: [_jsx("span", { className: `text-[11px] truncate ${selected ? 'text-white/70' : 'text-white/40'}`, children: m.name }), m.parameterSize && _jsx("span", { className: "text-[8px] text-white/20 flex-shrink-0 ml-auto", children: m.parameterSize })] }, m.id));
                                                 }) : (_jsx("div", { className: "px-3 py-2.5 text-[10px] text-white/25 text-center", children: "No matching models" }))) : (_jsx("div", { className: "px-3 py-2.5 text-[10px] text-white/25 text-center", children: "No local models installed" })), _jsx("button", { onClick: () => { setModelListOpen(false); goToModelsMarketplace(); }, className: "w-full flex items-center justify-center gap-1.5 px-3 py-2 border-t border-white/[0.06] text-[10px] text-white/35 hover:text-white/60 hover:bg-white/[0.04] transition-colors cursor-pointer", children: "Browse models" })] })) })] })), _jsxs("div", { className: "space-y-0", children: [pendingTurns.length > 0 && (_jsxs("div", { className: "xeno-border-subtle rounded-t-md border border-b-0 bg-[#111111] overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2 border-b xeno-border-subtle", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: "text-[10px] uppercase tracking-[0.14em] xeno-text-faint whitespace-nowrap", children: "Queued Messages" }), _jsx("span", { className: "text-[10px] xeno-text-muted tabular-nums whitespace-nowrap", children: pendingTurns.length })] }), _jsx("button", { onClick: () => patchSessionUi({ panelOpen: true }), className: "text-[10px] xeno-text-faint hover:text-[color:var(--xeno-ink-secondary)] transition-colors whitespace-nowrap cursor-pointer focus-visible:outline focus-visible:outline-1 focus-visible:outline-white/35", children: "Manage queue" })] }), _jsxs("div", { className: "divide-y xeno-border-subtle", children: [pendingTurns.slice(0, 3).map((turn) => (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2", children: [_jsx("span", { className: "inline-flex h-5 min-w-5 items-center justify-center rounded-[4px] bg-white/[0.04] px-1.5 text-[10px] xeno-text-faint tabular-nums", children: new Date(turn.queuedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }), _jsx("span", { className: "min-w-0 flex-1 text-[12px] leading-4 xeno-text-secondary truncate", children: turn.content }), _jsx("button", { onClick: () => handleRemoveQueuedConversationTurn(turn.id), className: "text-[10px] xeno-text-faint hover:text-[color:var(--xeno-ink-secondary)] transition-colors whitespace-nowrap cursor-pointer focus-visible:outline focus-visible:outline-1 focus-visible:outline-white/35", title: "Remove queued message", children: "Remove" })] }, turn.id))), pendingTurns.length > 3 && (_jsxs("div", { className: "px-3 py-2 text-[11px] xeno-text-faint", children: [pendingTurns.length - 3, " more queued"] }))] })] })), _jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", "data-agent-workspace-binding": workspaceBinding.mode, children: [_jsxs("div", { className: "inline-flex items-center rounded-md border border-white/[0.08] bg-white/[0.025] p-0.5 text-[11px]", children: [_jsx("button", { type: "button", onClick: () => { void handleSelectWorkspaceMode('chat-only'); }, disabled: isBusy || !!props.externalInputLockReason || isSelectingConversationWorkspace, className: `rounded px-2.5 py-1 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${workspaceBinding.mode !== 'workspace'