@jini-ai/chat 0.6.5 → 0.6.7

package/dist/react/features/chat-pane/components/ChatPane.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AgentPluginUsage } from './AgentPluginUsage.js';
 import { SECRET_REDACTED_NOTICE } from '../../../../core/user-text-redaction.js';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useId, useMemo, useRef } from 'react';
 import { WorkingDirPicker } from '@jini-ai/ui';
 import { Composer } from '../../../components/Composer.js';
 import { appendComposerDiscovery } from '../../../components/composer-discovery.js';
 import { MessageList } from '../../../components/MessageList.js';
 import { useT } from '../../../hooks/context.js';
 import { definedProps } from '../../../util/defined-props.js';
-import { describeTypedAnswerNotice, isChatPaneApiModeConfigured, isChatPaneFileDropEnabled } from '../rules.js';
+import { describeChatPaneSendBlocker, describeTypedAnswerNotice, isChatPaneApiModeConfigured, isChatPaneFileDropEnabled } from '../rules.js';
 import { useChatPane } from '../hooks/useChatPane.hooks.js';
 import { useChatPaneAgentControl } from '../hooks/useChatPaneAgentControl.hooks.js';
 import { useChatPaneComposerPlaceholder } from '../hooks/useChatPaneComposerPlaceholder.hooks.js';
@@ -75,10 +76,54 @@ function ChatPaneNoUsableCliMessage({ executionMode, apiModeAvailable, onExecuti
     }
     return (_jsxs("div", { className: "jini-chat-pane__error", role: "alert", children: [t('No usable CLI is selected.'), ' ', _jsx("button", { type: "button", className: "jini-chat-pane__error-action", onClick: () => onExecutionModeChange('api'), children: t('Switch to BYOK') })] }));
 }
+/**
+ * `unavailable` alone conflates "inventory still loading" with "inventory loaded, nothing
+ * usable" — both present as `selectedAgent === undefined`. `scanningAgents` is the signal
+ * that tells them apart, mirroring the `workingDirectoryPending`/`workingDirectoryInvalid`
+ * pair below: a pending detection is a `status`, only a *finished* detection that found
+ * nothing is an `alert`. `connectingAgents` is a third state: the inventory could not be
+ * read at all (the host is unreachable, typically a daemon restart) and a retry is
+ * pending — a plain status too, never "No usable CLI", which only a SUCCESSFUL answer can
+ * establish.
+ */
+function ChatPaneAvailabilityStatus({ unavailable, scanningAgents, connectingAgents, executionMode, apiModeAvailable, onExecutionModeChange, t, }) {
+    if (!unavailable)
+        return null;
+    if (connectingAgents) {
+        return (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Connecting to the assistant…') }));
+    }
+    if (scanningAgents) {
+        return (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Loading available CLIs') }));
+    }
+    return (_jsx(ChatPaneNoUsableCliMessage, { executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, t: t }));
+}
+function ChatPaneWorkingDirectoryStatus({ workingDirectoryPending, workingDirectoryInvalid, t, }) {
+    if (workingDirectoryPending) {
+        return (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Checking working directory…') }));
+    }
+    if (!workingDirectoryInvalid)
+        return null;
+    return (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: t('Working directory is unavailable.') }));
+}
+/**
+ * The typed-answer delivery notice. Only `'failed'` ever reaches it: `useChatPane` queues a
+ * `'not-pending'` refusal as one ordinary message itself (`answerWaitingQuestion`), without a notice.
+ *
+ * MOVE (from the retired "Send as a new message" button this notice once rendered for
+ * `'not-pending'`): the held answer's only way into a new run besides clearing the draft — an
+ * explicit choice, so a closed question never turns an answer into a paid run on a second Enter.
+ * The hook's automatic one-time fallback now owns that guarantee, which left the button unreachable.
+ */
+function ChatPaneTypedAnswerNotice({ typedAnswerNotice, t, }) {
+    if (!typedAnswerNotice)
+        return null;
+    return (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: t(describeTypedAnswerNotice({ notice: typedAnswerNotice })) }));
+}
 /** The pane's stack of mutually-independent error/status banners — each condition is its own
  * source of truth, so they are rendered as siblings rather than folded into one derived state. */
-function ChatPaneStatusMessages({ unavailable, scanningAgents, connectingAgents, executionMode, apiModeAvailable, onExecutionModeChange, attachmentError, dropReadError, workingDirectoryError, workingDirectoryPending, workingDirectoryInvalid, runtimeInventoryError, typedAnswerNotice, onSendAsNewMessage, t, }) {
-    return (_jsxs(_Fragment, { children: [unavailable && connectingAgents ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Connecting to the assistant…') })) : unavailable && scanningAgents ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Loading available CLIs') })) : unavailable ? (_jsx(ChatPaneNoUsableCliMessage, { executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, t: t })) : null, attachmentError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: attachmentError.message })) : null, dropReadError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: dropReadError })) : null, workingDirectoryError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: workingDirectoryError.message })) : null, workingDirectoryPending ? (_jsx("div", { className: "jini-chat-pane__status", role: "status", children: t('Checking working directory…') })) : workingDirectoryInvalid ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: t('Working directory is unavailable.') })) : null, runtimeInventoryError && !connectingAgents ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: runtimeInventoryError.message })) : null, typedAnswerNotice ? (_jsxs("div", { className: "jini-chat-pane__error", role: "alert", children: [t(describeTypedAnswerNotice({ notice: typedAnswerNotice })), typedAnswerNotice === 'not-pending' ? (_jsxs(_Fragment, { children: [' ', _jsx("button", { type: "button", className: "jini-chat-pane__error-action", onClick: onSendAsNewMessage, children: t('Send as a new message') })] })) : null] })) : null] }));
+function ChatPaneStatusMessages({ attachmentError, dropReadError, workingDirectoryError, workingDirectoryPending, workingDirectoryInvalid, runtimeInventoryError, typedAnswerNotice, ...availability }) {
+    const { t } = availability;
+    return (_jsxs(_Fragment, { children: [_jsx(ChatPaneAvailabilityStatus, { ...availability }), attachmentError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: attachmentError.message })) : null, dropReadError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: dropReadError })) : null, workingDirectoryError ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: workingDirectoryError.message })) : null, _jsx(ChatPaneWorkingDirectoryStatus, { workingDirectoryPending: workingDirectoryPending, workingDirectoryInvalid: workingDirectoryInvalid, t: t }), runtimeInventoryError && !availability.connectingAgents ? (_jsx("div", { className: "jini-chat-pane__error", role: "alert", children: runtimeInventoryError.message })) : null, _jsx(ChatPaneTypedAnswerNotice, { typedAnswerNotice: typedAnswerNotice, t: t })] }));
 }
 function ChatPaneWorkingDirectoryBlock({ workingDirectoryAccess, workingDirectoryControlPlacement, pane, t, }) {
     if (workingDirectoryAccess && workingDirectoryControlPlacement === 'below') {
@@ -166,63 +211,53 @@ function resolveComposerWorkingDirectory(workingDirectoryAccess, workingDirector
  *
  * The pending-turn strip previously lived here (a banner bolted above the composer). It now
  * renders inside `<MessageList>` itself, as the newest transcript entry — see that component's
- * `pendingPrompt` prop and this component's own call site below. */
+ * `pendingPrompts` prop and this component's own call site below. */
 function ChatPaneComposerArea({ fileDrop, uploadAttachments, pane, disabled, unavailable, placeholder, slots, attachmentAccept, workingDirectoryAccess, workingDirectoryControlPlacement, t, }) {
+    const sendDisabledReasonId = useId();
+    const sendDisabledReason = pane.sendBlocker && pane.sendBlocker !== 'streaming'
+        ? t(describeChatPaneSendBlocker(pane.sendBlocker))
+        : undefined;
     return (_jsxs("div", { className: `jini-chat-pane__drop-target${fileDrop.draggingFiles ? ' is-dragging-files' : ''}`, "data-testid": "chat-pane-file-drop-target", "data-dragging-files": fileDrop.draggingFiles ? 'true' : 'false', ...resolveDropTargetProps(uploadAttachments, fileDrop), children: [fileDrop.draggingFiles ? (_jsx("span", { className: "jini-chat-pane__drop-announcement", role: "status", children: t('Drop files to attach') })) : null, _jsx(Composer, { composer: pane.composer, onSend: () => void pane.send(), 
                 // Streaming no longer locks the textarea: `pane.send()` queues a turn typed during a run
                 // rather than refusing it, so the operator can keep writing while the agent thinks.
                 disabled: disabled || unavailable, 
                 // The one blocker `send()` handles itself. Every other refusal still greys out the button.
-                sendDisabled: !pane.canSend && pane.sendBlocker !== 'streaming', running: pane.conversation.isStreaming, onCancel: pane.conversation.cancel, onInterrupt: pane.interruptSend, ...definedProps({ source: { placeholder } }), slots: slots, ...resolveComposerAttachmentPicker(uploadAttachments, pane, attachmentAccept), ...resolveComposerWorkingDirectory(workingDirectoryAccess, workingDirectoryControlPlacement, pane) }), _jsx(ChatPaneWorkingDirectoryBlock, { workingDirectoryAccess: workingDirectoryAccess, workingDirectoryControlPlacement: workingDirectoryControlPlacement, pane: pane, t: t })] }));
+                sendDisabled: !pane.canSend && pane.sendBlocker !== 'streaming', ...definedProps({ source: { sendDisabledReason, sendDisabledReasonId: sendDisabledReason ? sendDisabledReasonId : undefined } }), running: pane.conversation.isStreaming, onCancel: pane.conversation.cancel, onInterrupt: pane.interruptSend, ...definedProps({ source: { placeholder } }), slots: { ...slots, footerAccessories: _jsxs(_Fragment, { children: [sendDisabledReason ? _jsx("small", { id: sendDisabledReasonId, className: "jini-composer-send-blocker", children: sendDisabledReason }) : null, slots.footerAccessories] }) }, ...resolveComposerAttachmentPicker(uploadAttachments, pane, attachmentAccept), ...resolveComposerWorkingDirectory(workingDirectoryAccess, workingDirectoryControlPlacement, pane) }), _jsx(ChatPaneWorkingDirectoryBlock, { workingDirectoryAccess: workingDirectoryAccess, workingDirectoryControlPlacement: workingDirectoryControlPlacement, pane: pane, t: t })] }));
 }
-/**
- * Renders the self-contained chat-pane composition, including runtime and
- * working-directory orchestration owned by `@jini-ai/chat-react`.
- *
- * @complexity Time/space: O(n) in rendered messages, agents, and suggestions.
- * @overallScore 100/100
- */
-export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, runtimeAccess, runtimeStatusPollMs = 5_000, title, variant = 'workspace', initialMessages, refreshSignal, conversationId, initialSelection, selection: controlledSelection, onSelectionChange, runContext, agentControl, onActivityChange, onMessagesChange, redactUserText, onSecretRedacted, onRescanAgents, scanningAgents = false, daemonOnline = true, executionMode = 'local', apiModeAvailable = false, onExecutionModeChange, byokRuntime, onByokModelChange, initialDraft, composerHistoryScope, composerHistoryStorage, validateAttachments, deliverTypedAnswer, deliverMidRunMessage, composerHandle, placeholder, placeholders, suggestions = [], emptyState, workingDirectory, initialWorkingDirectory, onChangeWorkingDirectory, workingDirectoryAccess, workingDirectoryControlPlacement = 'below', projectFileNames, toolCallDisplay = 'show', showUsageLine = true, showThinking = false, uploadAttachments, attachmentAccept, disabled = false, runtimePickerPlacement = 'up', composerSlots, header, leadingAccessory, footer, className, style, }) {
-    const t = useT();
-    const surface = useChatPaneSurface({ variant, composerSlots, workingDirectoryControlPlacement, uploadAttachments });
-    const composerPlaceholder = useChatPaneComposerPlaceholder({ placeholder: placeholder, placeholders: placeholders });
-    const inventory = useChatPaneRuntimeInventory(definedProps({ source: {
-            access: runtimeAccess,
-            initialAgents: injectedAgents,
-            pollIntervalMs: runtimeStatusPollMs,
-        } }));
-    const runtimeView = resolveRuntimeAccessView(runtimeAccess, injectedAgents, scanningAgents, daemonOnline, onRescanAgents, inventory);
-    // Computed once and threaded into both `useChatPane` (so `sendBlocker` agrees) and this
-    // component's own `unavailable` below (so the status banner and composer agree) — see
-    // `isChatPaneApiModeConfigured` for why API mode alone isn't enough.
-    const apiModeConfigured = isChatPaneApiModeConfigured({ executionMode, apiModeAvailable, byokRuntime });
-    const pane = useChatPane(definedProps({ source: {
-            transport,
-            agents: runtimeView.agents,
-            initialMessages,
-            refreshSignal,
-            conversationId,
-            initialSelection,
-            selection: controlledSelection,
-            onSelectionChange,
-            runContext,
-            initialDraft,
-            composerHistoryScope,
-            composerHistoryStorage,
-            validateAttachments,
-            uploadAttachments,
-            onActivityChange,
-            onMessagesChange,
-            redactUserText,
-            onSecretRedacted,
-            workingDirectory,
-            initialWorkingDirectory,
-            onChangeWorkingDirectory,
-            workingDirectoryAccess,
-            apiModeConfigured,
-            deliverTypedAnswer,
-            deliverMidRunMessage,
-        } }));
+const EMPTY_SUGGESTIONS = [];
+const CHAT_PANE_DEFAULTS = {
+    agents: EMPTY_AGENTS,
+    runtimeStatusPollMs: 5_000,
+    variant: 'workspace',
+    scanningAgents: false,
+    daemonOnline: true,
+    executionMode: 'local',
+    apiModeAvailable: false,
+    suggestions: EMPTY_SUGGESTIONS,
+    workingDirectoryControlPlacement: 'below',
+    toolCallDisplay: 'show',
+    showUsageLine: true,
+    showThinking: false,
+    agentPluginsMode: 'auto',
+    disabled: false,
+    runtimePickerPlacement: 'up',
+};
+function applyChatPaneDefaults(props) {
+    const resolved = { ...props, ...CHAT_PANE_DEFAULTS };
+    for (const key of Object.keys(CHAT_PANE_DEFAULTS)) {
+        if (props[key] !== undefined)
+            Object.assign(resolved, { [key]: props[key] });
+    }
+    return resolved;
+}
+function resolveAgentControlOptions(agentControl) {
+    return definedProps({ source: {
+            enabled: agentControl?.enabled ?? false,
+            bridgeAccess: agentControl?.bridgeAccess,
+            webmcp: agentControl?.webmcp,
+        } });
+}
+function useComposerHandlePublisher({ pane }, { composerHandle }) {
     // Mirrors `Composer.tsx`'s own `draftRef`: `composerHandle.insertText` (below) is called from
     // OUTSIDE any render, so it cannot close over `pane.composer.draft` directly — that would freeze
     // it at whatever the draft was on the render that captured it. Reassigned unconditionally every
@@ -245,14 +280,100 @@ export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, run
         // closure on every render rather than genuinely skipping renders — cheap, and it keeps
         // `pane.composer.setDraft` from ever going stale if that reference ever changes.
     }, [composerHandle, pane.composer]);
+}
+function useChatPaneTranscriptProps({ pane }, { projectFileNames }) {
+    // `MessageList` is memoized so a composer keystroke does not re-render the transcript; these two
+    // props would otherwise be fresh objects on every render and defeat it.
+    const { queuedMessages, cancelQueuedMessage } = pane;
+    const pendingPrompts = useMemo(() => queuedMessages.map(input => ({ ...input, onCancel: () => cancelQueuedMessage({ id: input.id }) })), [queuedMessages, cancelQueuedMessage]);
+    const projectFileNameSet = useMemo(() => (projectFileNames === undefined ? undefined : new Set(projectFileNames)), [projectFileNames]);
+    return { pendingPrompts, projectFileNameSet };
+}
+/** `composerSlots`'s type excludes both `leadingAccessories` and `footerAccessories` (see
+ * `ChatPaneProps.composerSlots`'s doc), so the two explicit keys below are never overwriting a
+ * caller-supplied value — they are the ONLY source for both. */
+function buildChatPaneSlots({ surfaceSlots, embed, renderRuntimePicker }, { leadingAccessory }) {
+    return definedProps({ source: {
+            ...surfaceSlots,
+            leadingAccessories: embed ? undefined : leadingAccessory,
+            footerAccessories: embed ? undefined : renderRuntimePicker(),
+        } });
+}
+function ChatPaneTranscript({ pane, emptyState, embed, suggestions, onSelectSuggestion, pendingPrompts, projectFileNameSet, toolCallDisplay, showUsageLine, showThinking, t, }) {
+    if (pane.conversation.messages.length === 0 && emptyState) {
+        return (_jsxs("div", { className: "jini-message-list jini-message-list--empty", children: [emptyState, embed && _jsx(ChatPaneSuggestionsRow, { suggestions: suggestions, onSelect: onSelectSuggestion, t: t })] }));
+    }
+    return (_jsx(MessageList, { messages: pane.conversation.messages, isStreaming: pane.conversation.isStreaming, scrollIntent: pane.conversation.scrollIntent, onScrolled: pane.conversation.acknowledgeScroll, pendingPrompts: pendingPrompts, toolCallDisplay: toolCallDisplay, showUsageLine: showUsageLine, showThinking: showThinking, ...(projectFileNameSet === undefined ? {} : { projectFileNames: projectFileNameSet }) }));
+}
+/** The controls-area suggestions row shows on every workspace surface, and on the embed surface
+ * only when the empty transcript has no `emptyState` to host it instead. */
+function showsControlsSuggestions(embed, messageCount, emptyState) {
+    return !embed || (messageCount === 0 && !emptyState);
+}
+/**
+ * Renders the self-contained chat-pane composition, including runtime and
+ * working-directory orchestration owned by `@jini-ai/chat-react`.
+ *
+ * @complexity Time/space: O(n) in rendered messages, agents, and suggestions.
+ * @overallScore 100/100
+ */
+export function ChatPane(props) {
+    const p = applyChatPaneDefaults(props);
+    const t = useT();
+    const surface = useChatPaneSurface({
+        variant: p.variant,
+        composerSlots: p.composerSlots,
+        workingDirectoryControlPlacement: p.workingDirectoryControlPlacement,
+        uploadAttachments: p.uploadAttachments,
+    });
+    const composerPlaceholder = useChatPaneComposerPlaceholder({ placeholder: p.placeholder, placeholders: p.placeholders });
+    const inventory = useChatPaneRuntimeInventory(definedProps({ source: {
+            access: p.runtimeAccess,
+            initialAgents: p.agents,
+            pollIntervalMs: p.runtimeStatusPollMs,
+        } }));
+    const runtimeView = resolveRuntimeAccessView(p.runtimeAccess, p.agents, p.scanningAgents, p.daemonOnline, p.onRescanAgents, inventory);
+    // Computed once and threaded into both `useChatPane` (so `sendBlocker` agrees) and this
+    // component's own `unavailable` below (so the status banner and composer agree) — see
+    // `isChatPaneApiModeConfigured` for why API mode alone isn't enough.
+    const apiModeConfigured = isChatPaneApiModeConfigured({
+        executionMode: p.executionMode,
+        apiModeAvailable: p.apiModeAvailable,
+        byokRuntime: p.byokRuntime,
+    });
+    const pane = useChatPane(definedProps({ source: {
+            transport: p.transport,
+            agents: runtimeView.agents,
+            initialMessages: p.initialMessages,
+            refreshSignal: p.refreshSignal,
+            conversationId: p.conversationId,
+            initialSelection: p.initialSelection,
+            selection: p.selection,
+            onSelectionChange: p.onSelectionChange,
+            runContext: p.runContext,
+            initialDraft: p.initialDraft,
+            composerHistoryScope: p.composerHistoryScope,
+            composerHistoryStorage: p.composerHistoryStorage,
+            composerHistoryCap: p.composerHistoryCap,
+            validateAttachments: p.validateAttachments,
+            uploadAttachments: p.uploadAttachments,
+            onActivityChange: p.onActivityChange,
+            onMessagesChange: p.onMessagesChange,
+            redactUserText: p.redactUserText,
+            onSecretRedacted: p.onSecretRedacted,
+            workingDirectory: p.workingDirectory,
+            initialWorkingDirectory: p.initialWorkingDirectory,
+            onChangeWorkingDirectory: p.onChangeWorkingDirectory,
+            workingDirectoryAccess: p.workingDirectoryAccess,
+            apiModeConfigured,
+            deliverTypedAnswer: p.deliverTypedAnswer,
+            deliverMidRunMessage: p.deliverMidRunMessage,
+        } }));
+    useComposerHandlePublisher({ pane }, definedProps({ source: { composerHandle: p.composerHandle } }));
     // No `runContext` here on purpose: agent-driven sends go through `pane.sendPrompt`, which builds
     // the context from the SAME `runContext` already handed to `useChatPane` above. A second copy
     // would be a second source of truth that could silently drift from the composer's.
-    useChatPaneAgentControl({ pane: pane }, definedProps({ source: {
-            enabled: agentControl?.enabled ?? false,
-            bridgeAccess: agentControl?.bridgeAccess,
-            webmcp: agentControl?.webmcp,
-        } }));
+    useChatPaneAgentControl({ pane: pane }, resolveAgentControlOptions(p.agentControl));
     // Selection resolution only returns available agents, so absence normally means nothing usable
     // is selected — except a configured BYOK turn (`apiModeConfigured`, computed above), which calls
     // the provider directly over HTTP and never touches the CLI inventory.
@@ -260,28 +381,25 @@ export function ChatPane({ transport, agents: injectedAgents = EMPTY_AGENTS, run
     const fileDrop = useChatPaneFileDrop({
         enabled: isChatPaneFileDropEnabled({
             canUpload: surface.uploadAttachments !== undefined,
-            disabled,
+            disabled: p.disabled,
             unavailable,
             uploading: pane.isUploadingAttachments,
         }),
         onFiles: pane.addAttachments,
     });
-    // `composerSlots`'s type excludes both `leadingAccessories` and `footerAccessories` (see
-    // `ChatPaneProps.composerSlots`'s doc), so the two explicit keys below are never overwriting a
-    // caller-supplied value — they are the ONLY source for both.
-    const slots = definedProps({ source: {
-            ...surface.composerSlots,
-            leadingAccessories: surface.embed ? undefined : leadingAccessory,
-            footerAccessories: surface.embed ? undefined : (_jsx(AgentRuntimePicker, { agents: runtimeView.agents, value: pane.selection, onChange: pane.setSelection, ...definedProps({ source: { onRescan: runtimeView.rescanAgents } }), scanning: runtimeView.scanningAgents, daemonOnline: runtimeView.daemonOnline, placement: runtimePickerPlacement, executionMode: executionMode, apiModeAvailable: apiModeAvailable, ...definedProps({ source: { onExecutionModeChange, byokRuntime, onByokModelChange } }) })),
-        } });
+    const slots = buildChatPaneSlots({
+        surfaceSlots: surface.composerSlots,
+        embed: surface.embed,
+        renderRuntimePicker: () => (_jsx(AgentRuntimePicker, { agents: runtimeView.agents, value: pane.selection, onChange: pane.setSelection, ...definedProps({ source: { onRescan: runtimeView.rescanAgents } }), scanning: runtimeView.scanningAgents, daemonOnline: runtimeView.daemonOnline, placement: p.runtimePickerPlacement, executionMode: p.executionMode, apiModeAvailable: p.apiModeAvailable, ...definedProps({ source: {
+                    onExecutionModeChange: p.onExecutionModeChange,
+                    byokRuntime: p.byokRuntime,
+                    onByokModelChange: p.onByokModelChange,
+                } }) })),
+    }, { leadingAccessory: p.leadingAccessory });
     const { rootRef, controlsRef } = useChatPaneControlsHeight();
     const selectSuggestion = useChatPaneSuggestion({ rootRef, setDraft: pane.composer.setDraft });
     const openLinkInNewTab = useChatPaneNewTabLinks();
-    // `MessageList` is memoized so a composer keystroke does not re-render the transcript; these two
-    // props would otherwise be fresh objects on every render and defeat it.
-    const { queuedPrompt, cancelQueued } = pane;
-    const pendingPrompt = useMemo(() => (queuedPrompt === null ? null : { text: queuedPrompt, onCancel: cancelQueued }), [queuedPrompt, cancelQueued]);
-    const projectFileNameSet = useMemo(() => (projectFileNames === undefined ? undefined : new Set(projectFileNames)), [projectFileNames]);
-    return (_jsxs("section", { className: chatPaneClassName(variant, className), style: style, "data-activity": pane.activity, ref: rootRef, onClickCapture: openLinkInNewTab, children: [_jsx("style", { "data-jini-chat-pane-styles": "true", children: CHAT_PANE_STYLES }), resolveChatPaneHeader(header, title, pane.reset, t), _jsxs("div", { className: "jini-chat-pane__body", children: [pane.conversation.messages.length === 0 && emptyState ? (_jsxs("div", { className: "jini-message-list jini-message-list--empty", children: [emptyState, surface.embed && _jsx(ChatPaneSuggestionsRow, { suggestions: suggestions, onSelect: selectSuggestion, t: t })] })) : (_jsx(MessageList, { messages: pane.conversation.messages, isStreaming: pane.conversation.isStreaming, scrollIntent: pane.conversation.scrollIntent, onScrolled: pane.conversation.acknowledgeScroll, pendingPrompt: pendingPrompt, toolCallDisplay: toolCallDisplay, showUsageLine: showUsageLine, showThinking: showThinking, ...(projectFileNameSet === undefined ? {} : { projectFileNames: projectFileNameSet }) })), _jsxs("div", { className: "jini-chat-pane__controls", ref: controlsRef, children: [(!surface.embed || (pane.conversation.messages.length === 0 && !emptyState)) && (_jsx(ChatPaneSuggestionsRow, { suggestions: suggestions, onSelect: selectSuggestion, t: t })), pane.secretRedacted ? _jsx("div", { className: "jini-chat-pane__notice", role: "status", children: t(SECRET_REDACTED_NOTICE) }) : null, _jsx(ChatPaneStatusMessages, { unavailable: unavailable, scanningAgents: runtimeView.scanningAgents, connectingAgents: runtimeView.connectingAgents, executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, conversationError: pane.conversation.error, attachmentError: pane.attachmentError, dropReadError: fileDrop.dropReadError, workingDirectoryError: pane.workingDirectoryError, workingDirectoryPending: pane.workingDirectoryPending, workingDirectoryInvalid: pane.workingDirectoryInvalid, runtimeInventoryError: inventory.runtimeInventoryError, typedAnswerNotice: pane.typedAnswerNotice, onSendAsNewMessage: () => void pane.sendAsNewMessage(), t: t }), _jsx(ChatPaneComposerArea, { fileDrop: fileDrop, uploadAttachments: surface.uploadAttachments, pane: pane, disabled: disabled, unavailable: unavailable, placeholder: composerPlaceholder, slots: slots, attachmentAccept: attachmentAccept, workingDirectoryAccess: workingDirectoryAccess, workingDirectoryControlPlacement: surface.workingDirectoryControlPlacement, t: t })] })] }), footer] }));
+    const { pendingPrompts, projectFileNameSet } = useChatPaneTranscriptProps({ pane }, definedProps({ source: { projectFileNames: p.projectFileNames } }));
+    return (_jsxs("section", { className: chatPaneClassName(p.variant, p.className), style: p.style, "data-activity": pane.activity, ref: rootRef, onClickCapture: openLinkInNewTab, children: [_jsx("style", { "data-jini-chat-pane-styles": "true", children: CHAT_PANE_STYLES }), resolveChatPaneHeader(p.header, p.title, pane.reset, t), p.agentPluginsMode !== 'off' && _jsx(AgentPluginUsage, { conversationId: pane.conversation.conversationId, messages: pane.conversation.messages }), _jsxs("div", { className: "jini-chat-pane__body", children: [_jsx(ChatPaneTranscript, { pane: pane, emptyState: p.emptyState, embed: surface.embed, suggestions: p.suggestions, onSelectSuggestion: selectSuggestion, pendingPrompts: pendingPrompts, projectFileNameSet: projectFileNameSet, toolCallDisplay: p.toolCallDisplay, showUsageLine: p.showUsageLine, showThinking: p.showThinking, t: t }), _jsxs("div", { className: "jini-chat-pane__controls", ref: controlsRef, children: [showsControlsSuggestions(surface.embed, pane.conversation.messages.length, p.emptyState) && (_jsx(ChatPaneSuggestionsRow, { suggestions: p.suggestions, onSelect: selectSuggestion, t: t })), pane.secretRedacted ? _jsx("div", { className: "jini-chat-pane__notice", role: "status", children: t(SECRET_REDACTED_NOTICE) }) : null, _jsx(ChatPaneStatusMessages, { unavailable: unavailable, scanningAgents: runtimeView.scanningAgents, connectingAgents: runtimeView.connectingAgents, executionMode: p.executionMode, apiModeAvailable: p.apiModeAvailable, onExecutionModeChange: p.onExecutionModeChange, attachmentError: pane.attachmentError, dropReadError: fileDrop.dropReadError, workingDirectoryError: pane.workingDirectoryError, workingDirectoryPending: pane.workingDirectoryPending, workingDirectoryInvalid: pane.workingDirectoryInvalid, runtimeInventoryError: inventory.runtimeInventoryError, typedAnswerNotice: pane.typedAnswerNotice, t: t }), _jsx(ChatPaneComposerArea, { fileDrop: fileDrop, uploadAttachments: surface.uploadAttachments, pane: pane, disabled: p.disabled, unavailable: unavailable, placeholder: composerPlaceholder, slots: slots, attachmentAccept: p.attachmentAccept, workingDirectoryAccess: p.workingDirectoryAccess, workingDirectoryControlPlacement: surface.workingDirectoryControlPlacement, t: t })] })] }), p.footer] }));
 }
 //# sourceMappingURL=ChatPane.js.map

package/dist/react/features/chat-pane/components/RuntimeDropUp.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export interface RuntimeDropUpProps {
+    /** Names both the trigger (with the current value appended) and the menu. */
+    label: string;
+    /** What the trigger shows: the current choice's display label. */
+    valueLabel: string;
+    /** A shorter form the trigger shows instead (e.g. "Opus 5.5"); the full `valueLabel` then
+     *  appears in a hover/focus tooltip and stays the trigger's accessible name. */
+    triggerLabel?: string | undefined;
+    value: string;
+    options: readonly {
+        id: string;
+        label: string;
+    }[];
+    onSelect: (id: string) => void;
+    /** Small muted line above the options (e.g. the model catalog's "Cached · …" note). */
+    note?: string | undefined;
+    /** Menu width cap in px; the menu is also clamped to the viewport. */
+    width: number;
+    className?: string;
+}
+/**
+ * A compact, borderless "Label ⌄" trigger in the composer bar that opens a menu of choices above
+ * itself. Used for the model and the reasoning effort; the selection itself stays with the caller.
+ *
+ * @complexity Time/space: O(n) in the option count.
+ */
+export declare function RuntimeDropUp({ label, valueLabel, triggerLabel, value, options, onSelect, note, width, className, }: RuntimeDropUpProps): ReactNode;
+//# sourceMappingURL=RuntimeDropUp.d.ts.map

package/dist/react/features/chat-pane/components/RuntimeDropUp.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { RemixIcon, infoTipBubbleStyle, useInfoTip } from '@jini-ai/ui';
+import { useRuntimeDropUp } from '../hooks/useRuntimeDropUp.hooks.js';
+/** The full `valueLabel` in the same white bubble `InfoTip` uses, portalled to `document.body`. */
+function RuntimeDropUpTipBubble({ tip, valueLabel }) {
+    return createPortal(_jsx("span", { ref: tip.bubbleRef, className: tip.placement === 'below' ? 'info-tip-bubble info-tip-bubble-below' : 'info-tip-bubble', role: "presentation", "aria-hidden": "true", style: infoTipBubbleStyle(tip.coords), children: valueLabel }), document.body);
+}
+function RuntimeDropUpMenu({ dropUp, label, value, options, onSelect, note }) {
+    if (!dropUp.open || !dropUp.position)
+        return null;
+    return (_jsxs("div", { ref: dropUp.menuRef, id: dropUp.menuId, role: "menu", "aria-label": label, className: "jini-runtime-dropup", style: dropUp.position, onKeyDown: dropUp.handleMenuKeyDown, children: [note ? _jsx("div", { className: "jini-runtime-dropup__note", children: note }) : null, options.map((option) => {
+                const active = option.id === value;
+                return (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": active, className: `jini-runtime-dropup__item${active ? ' is-active' : ''}`, onClick: () => dropUp.choose(() => onSelect(option.id)), children: [_jsx("span", { className: "jini-runtime-dropup__item-label", children: option.label }), active ? _jsx(RemixIcon, { name: "check-line", size: 16, className: "jini-runtime-check" }) : null] }, option.id));
+            })] }));
+}
+/**
+ * A compact, borderless "Label ⌄" trigger in the composer bar that opens a menu of choices above
+ * itself. Used for the model and the reasoning effort; the selection itself stays with the caller.
+ *
+ * @complexity Time/space: O(n) in the option count.
+ */
+export function RuntimeDropUp({ label, valueLabel, triggerLabel, value, options, onSelect, note, width, className, }) {
+    const dropUp = useRuntimeDropUp({ width });
+    const { menuId, open, triggerRef, toggleOpen, handleTriggerKeyDown } = dropUp;
+    // The same white bubble as `InfoTip` (its hook places it), rather than the browser's own title
+    // tooltip; only when the trigger shows a shortened label, so there is something to reveal.
+    const tip = useInfoTip({}, { placement: 'top' });
+    const shortened = triggerLabel !== undefined && triggerLabel !== valueLabel;
+    // No tip over the open menu, which already lists the full name.
+    const tipVisible = shortened && !open;
+    const showTip = () => {
+        if (tipVisible)
+            tip.show();
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", className: `jini-runtime-dropup-trigger${className ? ` ${className}` : ''}`, "aria-label": `${label}: ${valueLabel}`, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": menuId, ...(shortened ? {} : { title: valueLabel }), onClick: () => {
+                    tip.hide();
+                    toggleOpen();
+                }, onKeyDown: (event) => {
+                    if (event.key === 'Escape')
+                        tip.hide();
+                    handleTriggerKeyDown(event);
+                }, onMouseEnter: showTip, onMouseLeave: tip.leave, onFocus: showTip, onBlur: tip.hide, children: [_jsx("span", { ref: tip.iconRef, className: "jini-runtime-dropup-trigger__label", children: triggerLabel ?? valueLabel }), _jsx(RemixIcon, { name: "arrow-down-s-line", size: 15, className: "jini-runtime-trigger__chevron" })] }), tip.open && tipVisible ? _jsx(RuntimeDropUpTipBubble, { tip: tip, valueLabel: valueLabel }) : null, _jsx(RuntimeDropUpMenu, { dropUp: dropUp, label: label, value: value, options: options, onSelect: onSelect, note: note })] }));
+}
+//# sourceMappingURL=RuntimeDropUp.js.map

package/dist/react/features/chat-pane/create-daemon-attachment-uploader.js

@@ -43,6 +43,66 @@ async function messageForFailedUpload(response, fallback) {
         return fallback;
     }
 }
+/** Refuses a selection that would break a per-file, per-turn count, or per-turn byte quota. */
+function assertWithinQuota({ files, current, incomingBytes, quota }) {
+    if (files.some((file) => file.size > quota.maxAttachmentBytes)) {
+        throw new Error(`Each attachment must be ${formatByteLimit(quota.maxAttachmentBytes)} or smaller.`);
+    }
+    if (current.count + files.length > quota.maxAttachmentCount) {
+        throw new Error(`You can attach at most ${quota.maxAttachmentCount} files to one message.`);
+    }
+    if (current.bytes + incomingBytes > quota.maxBatchBytes) {
+        throw new Error(`Attachments for one message must total ${formatByteLimit(quota.maxBatchBytes)} or less.`);
+    }
+}
+/** Forwards the composer's abort (including one that already happened) into `controller`; returns the unlink. */
+function linkParentAbort({ controller, parent }) {
+    if (parent === undefined)
+        return () => { };
+    const abortFromParent = () => controller.abort(parent.reason);
+    parent.addEventListener('abort', abortFromParent, { once: true });
+    if (parent.aborted)
+        abortFromParent();
+    return () => parent.removeEventListener('abort', abortFromParent);
+}
+/**
+ * Runs `concurrency` workers over a shared index, writing each result at its input position in
+ * `uploaded`. Never rejects: the first failure is returned (and aborts the rest) instead.
+ */
+async function uploadInOrder({ files, concurrency, controller, uploaded, uploadOne }) {
+    let nextIndex = 0;
+    let firstError;
+    const worker = async () => {
+        while (!controller.signal.aborted) {
+            const index = nextIndex;
+            nextIndex += 1;
+            const file = files[index];
+            if (file === undefined)
+                return;
+            try {
+                uploaded[index] = await uploadOne(file);
+            }
+            catch (error) {
+                // Kept, not thrown: aborting stops the sibling worker, and the *first* failure is the one
+                // worth reporting — the aborts it causes are noise.
+                firstError ??= error;
+                controller.abort();
+            }
+        }
+    };
+    await Promise.all(Array.from({ length: concurrency }, worker));
+    return firstError;
+}
+/** Throws the turn's first upload failure, else the abort that stopped it; returns when neither happened. */
+function throwIfUploadFailed({ firstError, signal }) {
+    if (firstError !== undefined)
+        throw firstError;
+    if (signal.aborted) {
+        throw signal.reason instanceof Error
+            ? signal.reason
+            : new Error('Attachment upload was canceled.');
+    }
+}
 /**
  * Builds a `ChatPaneProps['uploadAttachments']` bound to one daemon.
  *
@@ -50,17 +110,21 @@ async function messageForFailedUpload(response, fallback) {
  * when the page is served through a proxy that already forwards `/api`.
  */
 export function createDaemonAttachmentUploader({ baseUrl, fetch }, options = {}) {
-    const maxAttachmentBytes = options.maxAttachmentBytes ?? DEFAULTS.maxAttachmentBytes;
-    const maxAttachmentCount = options.maxAttachmentCount ?? DEFAULTS.maxAttachmentCount;
-    const maxBatchBytes = options.maxBatchBytes ?? DEFAULTS.maxBatchBytes;
+    const quota = {
+        maxAttachmentBytes: options.maxAttachmentBytes ?? DEFAULTS.maxAttachmentBytes,
+        maxAttachmentCount: options.maxAttachmentCount ?? DEFAULTS.maxAttachmentCount,
+        maxBatchBytes: options.maxBatchBytes ?? DEFAULTS.maxBatchBytes,
+    };
     const timeoutMs = options.timeoutMs ?? DEFAULTS.timeoutMs;
     const concurrency = options.concurrency ?? DEFAULTS.concurrency;
     const endpoint = `${baseUrl.replace(/\/$/u, '')}/api/attachments`;
+    // Read per request rather than captured once, so a global installed after construction is used.
+    const send = (input, init) => (fetch ?? globalThis.fetch)(input, init);
     // Per-uploader, not module-level: two panes pointed at two daemons must not share a quota.
     const batchUsage = new Map();
     async function uploadOne(file, batchId, signal) {
         const query = new URLSearchParams({ batch: batchId, name: file.name });
-        const response = await (fetch ?? globalThis.fetch)(`${endpoint}?${query}`, {
+        const response = await send(`${endpoint}?${query}`, {
             method: 'POST',
             // Fixed, not `file.type` — see this module's doc.
             headers: { 'content-type': 'application/octet-stream' },
@@ -84,7 +148,7 @@ export function createDaemonAttachmentUploader({ baseUrl, fetch }, options = {})
             // caller-supplied signal to compose with and no large body — it is a small best-effort JSON
             // DELETE, and an unprotected `fetch` here would hang `uploadAttachments`'s rejection (the
             // `await` below) on a stalled daemon instead of surfacing `firstError` promptly.
-            await (fetch ?? globalThis.fetch)(endpoint, {
+            await send(endpoint, {
                 method: 'DELETE',
                 signal: AbortSignal.timeout(15_000),
                 headers: { 'content-type': 'application/json' },
@@ -104,15 +168,7 @@ export function createDaemonAttachmentUploader({ baseUrl, fetch }, options = {})
         const batchId = uploadOptions?.batchId ?? crypto.randomUUID();
         const incomingBytes = files.reduce((total, file) => total + file.size, 0);
         const current = batchUsage.get(batchId) ?? { count: 0, bytes: 0, touchedAt: now };
-        if (files.some((file) => file.size > maxAttachmentBytes)) {
-            throw new Error(`Each attachment must be ${formatByteLimit(maxAttachmentBytes)} or smaller.`);
-        }
-        if (current.count + files.length > maxAttachmentCount) {
-            throw new Error(`You can attach at most ${maxAttachmentCount} files to one message.`);
-        }
-        if (current.bytes + incomingBytes > maxBatchBytes) {
-            throw new Error(`Attachments for one message must total ${formatByteLimit(maxBatchBytes)} or less.`);
-        }
+        assertWithinQuota({ files, current, incomingBytes, quota });
         // Reserved up front and rolled back on failure, so two overlapping calls for the same turn
         // cannot each see the same free headroom.
         batchUsage.set(batchId, {
@@ -121,32 +177,9 @@ export function createDaemonAttachmentUploader({ baseUrl, fetch }, options = {})
             touchedAt: now,
         });
         const controller = new AbortController();
-        const abortFromParent = () => controller.abort(uploadOptions?.signal.reason);
-        uploadOptions?.signal.addEventListener('abort', abortFromParent, { once: true });
-        if (uploadOptions?.signal.aborted)
-            abortFromParent();
+        const unlinkParentAbort = linkParentAbort({ controller, parent: uploadOptions?.signal });
         const timeout = globalThis.setTimeout(() => controller.abort(new DOMException('Attachment upload timed out', 'TimeoutError')), timeoutMs);
         const uploaded = new Array(files.length);
-        let nextIndex = 0;
-        let firstError;
-        const worker = async () => {
-            while (!controller.signal.aborted) {
-                const index = nextIndex;
-                nextIndex += 1;
-                const file = files[index];
-                if (file === undefined)
-                    return;
-                try {
-                    uploaded[index] = await uploadOne(file, batchId, controller.signal);
-                }
-                catch (error) {
-                    // Kept, not thrown: aborting stops the sibling worker, and the *first* failure is the one
-                    // worth reporting — the aborts it causes are noise.
-                    firstError ??= error;
-                    controller.abort();
-                }
-            }
-        };
         const settled = () => uploaded.filter((attachment) => attachment !== undefined);
         // The failure is captured rather than rethrown from inside the `try`, so that the timer/listener
         // teardown in `finally` has exactly two reachable paths (the turn succeeded, or it did not)
@@ -154,14 +187,14 @@ export function createDaemonAttachmentUploader({ baseUrl, fetch }, options = {})
         let failure;
         let succeeded = false;
         try {
-            await Promise.all(Array.from({ length: concurrency }, worker));
-            if (firstError !== undefined)
-                throw firstError;
-            if (controller.signal.aborted) {
-                throw controller.signal.reason instanceof Error
-                    ? controller.signal.reason
-                    : new Error('Attachment upload was canceled.');
-            }
+            const firstError = await uploadInOrder({
+                files,
+                concurrency,
+                controller,
+                uploaded,
+                uploadOne: (file) => uploadOne(file, batchId, controller.signal),
+            });
+            throwIfUploadFailed({ firstError, signal: controller.signal });
             succeeded = true;
         }
         catch (error) {
@@ -169,7 +202,7 @@ export function createDaemonAttachmentUploader({ baseUrl, fetch }, options = {})
         }
         finally {
             globalThis.clearTimeout(timeout);
-            uploadOptions?.signal.removeEventListener('abort', abortFromParent);
+            unlinkParentAbort();
         }
         if (succeeded)
             return settled();