@jini-ai/chat 0.6.6 → 0.6.7

package/dist/react/components/TodoCard.js

@@ -12,18 +12,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useT } from '../hooks/context.js';
 import { Icon } from './Icon.js';
-export function TodoCard({ todos, runStreaming = false, onDismiss }) {
+export function TodoCard({ todos, runStreaming, onDismiss }) {
     const t = useT();
-    const hasInProgress = todos.some((todo) => todo.status === 'in_progress');
-    const hasPending = todos.some((todo) => todo.status === 'pending' || todo.status === 'in_progress');
-    const defaultExpanded = todos.length > 0 && (hasInProgress || hasPending || runStreaming);
+    const { defaultExpanded, inProgressTodo, done, allComplete } = todoProgress({ todos }, { runStreaming });
     const [overrideExpanded, setOverrideExpanded] = useState(null);
     const expanded = overrideExpanded ?? defaultExpanded;
+    const showDismiss = Boolean(onDismiss) && allComplete;
+    return (_jsxs("div", { className: `op-card op-todo${expanded ? '' : ' op-todo-collapsed'}`, children: [_jsxs("div", { className: "op-card-head op-todo-head", children: [_jsxs("button", { type: "button", className: "op-todo-toggle", "aria-expanded": expanded, onClick: () => setOverrideExpanded(!expanded), title: expanded ? t('Collapse todos') : t('Expand todos'), children: [_jsx("span", { className: "op-icon", "aria-hidden": true, children: "\u2610" }), _jsx("span", { className: "op-title", children: t('Todos') }), _jsxs("span", { className: "op-meta", children: [done, "/", todos.length] }), !expanded && inProgressTodo ? _jsx("span", { className: "op-todo-current", children: todoLabel({ todo: inProgressTodo }) }) : null, _jsx("span", { className: "op-todo-chev", "aria-hidden": true, children: expanded ? _jsx(Icon, { name: "chevron-down", size: 11 }) : _jsx(Icon, { name: "chevron-right", size: 11 }) })] }), showDismiss ? (_jsx("button", { type: "button", className: "op-todo-done", onClick: () => onDismiss?.(), title: t('Dismiss'), children: t('Done') })) : null] }), _jsx("div", { className: `accordion-collapsible${expanded ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsx("ul", { className: "todo-list", children: todos.map((todo, i) => (_jsxs("li", { className: `todo-item todo-${todo.status}`, children: [_jsx("span", { className: "todo-check", "aria-hidden": true, children: todo.status === 'completed' ? '✓' : todo.status === 'in_progress' ? '◐' : todo.status === 'stopped' ? '!' : '○' }), _jsx("span", { className: "todo-text", children: todoLabel({ todo }) })] }, i))) }) }) })] }));
+}
+function todoProgress({ todos }, { runStreaming = false } = {}) {
+    const hasPending = todos.some((todo) => todo.status === 'pending' || todo.status === 'in_progress');
+    const defaultExpanded = todos.length > 0 && (hasPending || runStreaming);
     const inProgressTodo = todos.find((todo) => todo.status === 'in_progress');
     const completed = todos.filter((todo) => todo.status === 'completed').length;
     const done = todos.filter((todo) => todo.status === 'completed' || todo.status === 'in_progress').length;
     const allComplete = todos.length > 0 && completed === todos.length;
-    const showDismiss = Boolean(onDismiss) && allComplete;
-    return (_jsxs("div", { className: `op-card op-todo${expanded ? '' : ' op-todo-collapsed'}`, children: [_jsxs("div", { className: "op-card-head op-todo-head", children: [_jsxs("button", { type: "button", className: "op-todo-toggle", "aria-expanded": expanded, onClick: () => setOverrideExpanded(!expanded), title: expanded ? t('Collapse todos') : t('Expand todos'), children: [_jsx("span", { className: "op-icon", "aria-hidden": true, children: "\u2610" }), _jsx("span", { className: "op-title", children: t('Todos') }), _jsxs("span", { className: "op-meta", children: [done, "/", todos.length] }), !expanded && inProgressTodo ? _jsx("span", { className: "op-todo-current", children: inProgressTodo.activeForm || inProgressTodo.content }) : null, _jsx("span", { className: "op-todo-chev", "aria-hidden": true, children: expanded ? _jsx(Icon, { name: "chevron-down", size: 11 }) : _jsx(Icon, { name: "chevron-right", size: 11 }) })] }), showDismiss ? (_jsx("button", { type: "button", className: "op-todo-done", onClick: () => onDismiss?.(), title: t('Dismiss'), children: t('Done') })) : null] }), _jsx("div", { className: `accordion-collapsible${expanded ? ' open' : ''}`, children: _jsx("div", { className: "accordion-collapsible-inner", children: _jsx("ul", { className: "todo-list", children: todos.map((todo, i) => (_jsxs("li", { className: `todo-item todo-${todo.status}`, children: [_jsx("span", { className: "todo-check", "aria-hidden": true, children: todo.status === 'completed' ? '✓' : todo.status === 'in_progress' ? '◐' : todo.status === 'stopped' ? '!' : '○' }), _jsx("span", { className: "todo-text", children: todo.status === 'in_progress' && todo.activeForm ? todo.activeForm : todo.content })] }, i))) }) }) })] }));
+    return { defaultExpanded, inProgressTodo, done, allComplete };
+}
+function todoLabel({ todo }, _options = {}) {
+    return todo.status === 'in_progress' && todo.activeForm ? todo.activeForm : todo.content;
 }
 //# sourceMappingURL=TodoCard.js.map

package/dist/react/components/ToolCard.js

@@ -27,14 +27,11 @@ import { Icon } from './Icon.js';
 import { TodoCard } from './TodoCard.js';
 /** A Jini registry tool id: dotted, lowercase, snake_case segments — `page.fill`, `daemon.db.vacuum`, `chat.send_message`. Never matches an agent-vendor tool name (`Bash`, `Write`, `mcp__jini__execute_delegated_tool`), which is the point — this is how a canonical delegated-tool event is told apart from everything else. */
 const JINI_TOOL_ID_PATTERN = /^[a-z][a-z_]*(\.[a-z][a-z_]*)+$/;
-const SEARCH_TOOLS_NAMES = new Set(['search_tools', 'mcp__jini__search_tools']);
-const DESCRIBE_TOOL_NAMES = new Set(['describe_tool', 'mcp__jini__describe_tool']);
 export function ToolCard({ use, result, runStreaming, runSucceeded, projectFileNames, onRequestOpenFile }) {
     const registry = useToolRendererRegistry();
     const name = use.name;
-    const isStreaming = runStreaming ?? false;
-    const isSucceeded = runSucceeded ?? false;
-    const content = renderToolCardBody(name, use, result, isStreaming, isSucceeded, { projectFileNames, onRequestOpenFile }, registry);
+    const card = { input: use.input, result: result, runStreaming: runStreaming ?? false, runSucceeded: runSucceeded ?? false };
+    const content = renderToolCardBody({ use, card, fileCtx: { projectFileNames, onRequestOpenFile }, registry });
     if (content === null)
         return null;
     // Tagged once here, at the single dispatch point every branch below funnels through, rather than
@@ -44,18 +41,42 @@ export function ToolCard({ use, result, runStreaming, runSucceeded, projectFileN
     // ambiguous the way a repeated literal handle would be.
     return (_jsx("div", { "data-agent-element": `tool-call-${use.id}`, "data-agent-role": "region", "data-agent-label": `A ${humanizeToolId(name)} tool call the AI made`, children: content }));
 }
-function renderToolCardBody(name, use, result, isStreaming, isSucceeded, fileCtx, registry) {
-    const custom = registry.get({ name });
-    if (custom) {
-        try {
-            const node = custom(toRenderProps({ use: use, result: result, runStreaming: isStreaming }, { runSucceeded: isSucceeded }));
-            if (node !== undefined && node !== null && node !== false)
-                return node;
-        }
-        catch (err) {
-            console.error(`[ToolCard] custom renderer for "${name}" threw; falling back`, err);
-        }
+// Hardcoded family cards for tools shipped with this package, keyed by every name each tool goes
+// by. A `Map`, not an object literal, so a tool named `constructor`/`toString` can never resolve
+// to an inherited `Object.prototype` member.
+const FAMILY_CARDS = new Map([
+    [['Write', 'write', 'create_file'], (card, fileCtx) => _jsx(FileWriteCard, { ...card, ctx: fileCtx })],
+    [['Edit', 'str_replace_edit'], (card, fileCtx) => _jsx(FileEditCard, { ...card, ctx: fileCtx })],
+    [['Read', 'read_file'], (card, fileCtx) => _jsx(FileReadCard, { ...card, ctx: fileCtx })],
+    [['Bash'], (card) => _jsx(BashCard, { ...card })],
+    [['Glob', 'list_files'], (card) => _jsx(GlobCard, { ...card })],
+    [['Grep'], (card) => _jsx(GrepCard, { ...card })],
+    [['WebFetch', 'web_fetch'], (card) => _jsx(WebFetchCard, { ...card })],
+    [['WebSearch', 'web_search'], (card) => _jsx(WebSearchCard, { ...card })],
+    [['search_tools', 'mcp__jini__search_tools'], (card) => _jsx(SearchToolsCard, { ...card })],
+    [['describe_tool', 'mcp__jini__describe_tool'], (card) => _jsx(DescribeToolCard, { ...card })],
+].flatMap(([names, render]) => names.map((name) => [name, render])));
+/** A host-registered renderer's output, or `undefined` when none is registered, it renders nothing, or it throws (logged) — every one of those falls back to the built-in cards. */
+function renderRegistered({ use, card, registry }) {
+    const custom = registry.get({ name: use.name });
+    if (!custom)
+        return undefined;
+    try {
+        const node = custom(toRenderProps({ use: use, result: card.result, runStreaming: card.runStreaming }, { runSucceeded: card.runSucceeded }));
+        if (node !== undefined && node !== null && node !== false)
+            return node;
+    }
+    catch (err) {
+        console.error(`[ToolCard] custom renderer for "${use.name}" threw; falling back`, err);
     }
+    return undefined;
+}
+function renderToolCardBody(args) {
+    const custom = renderRegistered(args);
+    if (custom !== undefined)
+        return custom;
+    const { use, card, fileCtx } = args;
+    const name = use.name;
     // `execute_delegated_tool` is a transport wrapper: `@jini-ai/daemon`'s `delegated-tool-bridge.ts`
     // always emits a second, canonical `tool_use` named after the real Jini tool id (`page.fill`,
     // not `execute_delegated_tool`) alongside it — before calling `ToolExecutor`, so it exists even
@@ -68,37 +89,23 @@ function renderToolCardBody(name, use, result, isStreaming, isSucceeded, fileCtx
     // `useToolTimeline`: `foldDelegatedWrapperCalls` drops it in favour of that canonical row. This
     // check still covers a host that renders `<ToolCard>` straight from raw events.)
     // Covers the read-only gateway (`execute_readonly_delegated_tool`) too.
-    if (isDelegatedWrapperToolName({ name: name }) && result && !result.isError)
+    if (isDelegatedWrapperToolName({ name: name }) && card.result && !card.result.isError)
         return null;
     if (isTodoWriteToolName({ name: name }))
-        return _jsx(TodoCard, { todos: parseTodoWriteInput({ input: use.input }), runStreaming: isStreaming });
-    if (name === 'Write' || name === 'write' || name === 'create_file')
-        return _jsx(FileWriteCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded, ctx: fileCtx });
-    if (name === 'Edit' || name === 'str_replace_edit')
-        return _jsx(FileEditCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded, ctx: fileCtx });
-    if (name === 'Read' || name === 'read_file')
-        return _jsx(FileReadCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded, ctx: fileCtx });
-    if (name === 'Bash')
-        return _jsx(BashCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    if (name === 'Glob' || name === 'list_files')
-        return _jsx(GlobCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    if (name === 'Grep')
-        return _jsx(GrepCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    if (name === 'WebFetch' || name === 'web_fetch')
-        return _jsx(WebFetchCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    if (name === 'WebSearch' || name === 'web_search')
-        return _jsx(WebSearchCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
+        return _jsx(TodoCard, { todos: parseTodoWriteInput({ input: use.input }), runStreaming: card.runStreaming });
+    // Jini tool ids are dotted and wrapper names are `execute_*delegated_tool`, so neither ever
+    // collides with a family name — the search/describe cards can sit in the same table as the rest
+    // even though they are looked up ahead of the Jini-id check below.
+    const family = FAMILY_CARDS.get(name);
+    if (family)
+        return family(card, fileCtx);
     if (JINI_TOOL_ID_PATTERN.test(name) || isDelegatedWrapperToolName({ name: name })) {
         // The unsuppressed (failed-wrapper) case falls through here too: `name` is still
         // `execute_delegated_tool`, so `jiniToolIdFromInput` recovers the real id from
         // `{toolId, input}` instead of `DelegatedToolCard` receiving its own wrapper name as the title.
-        return _jsx(DelegatedToolCard, { name: name, input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
+        return _jsx(DelegatedToolCard, { name: name, ...card });
     }
-    if (SEARCH_TOOLS_NAMES.has(name))
-        return _jsx(SearchToolsCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    if (DESCRIBE_TOOL_NAMES.has(name))
-        return _jsx(DescribeToolCard, { input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
-    return _jsx(GenericCard, { name: name, input: use.input, result: result, runStreaming: isStreaming, runSucceeded: isSucceeded });
+    return _jsx(GenericCard, { name: name, ...card });
 }
 /** `"page.fill"` -> `"Page Fill"`, `"daemon.db.vacuum"` -> `"Daemon Db Vacuum"`. Cosmetic only — never used to make a routing decision. */
 function humanizeToolId(id) {

package/dist/react/components/composer-discovery.js

@@ -9,8 +9,13 @@ export function parseComposerSlashQuery({ draft }) {
     const match = SLASH_QUERY_RE.exec(draft);
     if (!match)
         return null;
+    // The `as string` casts are guaranteed by SLASH_QUERY_RE itself, not assumed: group 1 is a bare
+    // `*` capture outside any optional group, so it always participates (possibly as ''); group 3 is
+    // `*` inside the same optional group as group 2, so it participates whenever a separator does.
+    // `noUncheckedIndexedAccess` cannot see either guarantee, and the `?? ''` fallbacks that used to
+    // satisfy it were unreachable branches.
     const [, command, separator, rest] = match;
-    return { command: command ?? '', argument: separator === undefined ? null : (rest ?? '') };
+    return { command: command, argument: separator === undefined ? null : rest };
 }
 /**
  * Once a separator has been typed, only an item whose declared `command` exactly equals the typed

package/dist/react/components/mcp-ui-surface-state.d.ts

@@ -1,10 +1,3 @@
-/**
- * @module components/mcp-ui-surface-state
- *
- * Whether an MCP-UI card in a chat transcript is closed, and with which label. Kept out of
- * `McpUiSurfaceCard.tsx` so the component only renders; moved here from that file 2026-10-04 when
- * the card's own deadline (`useSurfaceExpiry`) became a second reason to close it.
- */
 import type { McpUiToolCallHandler } from '@jini-ai/ui/mcp-ui';
 import type { ExtEventCall } from '../ext-event-renderer-registry.js';
 import type { useT } from '../hooks/context.js';
@@ -35,14 +28,16 @@ export declare function closedSurfaceLabel({ t, call, runStreaming, documentsFor
 export declare function isDeliveredAnswer(result: unknown): boolean;
 /**
  * Wraps a card's tool executor so a delivered answer is reported once it resolves. The result is
- * passed through unchanged, and a rejected call reports nothing (the dialog shows its error and can
- * be answered again).
+ * passed through unchanged; onAnswerText receives readable choice text when available. A rejected call
+ * reports nothing (the dialog shows its error and can be answered again).
  *
- * @complexity O(1) per call, plus `onToolCall`'s own cost.
+ * @complexity O(p + s*m) answer-label mapping, plus `onToolCall`'s own cost (see questionAnswerText).
  */
-export declare function reportDeliveredAnswer({ onToolCall, onAnswered }: {
+export declare function reportDeliveredAnswer({ onToolCall, onAnswered, onAnswerText, input }: {
     onToolCall: McpUiToolCallHandler;
     onAnswered: () => void;
+    onAnswerText?: ((answerText: string) => void) | undefined;
+    input?: unknown;
 }): McpUiToolCallHandler;
 export {};
 //# sourceMappingURL=mcp-ui-surface-state.d.ts.map

package/dist/react/components/mcp-ui-surface-state.js

@@ -1,3 +1,11 @@
+/**
+ * @module components/mcp-ui-surface-state
+ *
+ * Whether an MCP-UI card in a chat transcript is closed, and with which label. Kept out of
+ * `McpUiSurfaceCard.tsx` so the component only renders; moved here from that file 2026-10-04 when
+ * the card's own deadline (`useSurfaceExpiry`) became a second reason to close it.
+ */
+import { questionAnswerText } from '../../core/question-answer.js';
 /** Words in a finished call's result that mean nobody answered in time. */
 const UNANSWERED_RESULT = /\b(expired|abandoned|did not respond|run ended)\b/i;
 /**
@@ -6,17 +14,20 @@ const UNANSWERED_RESULT = /\b(expired|abandoned|did not respond|run ended)\b/i;
  * A held-open question (the tool shows the card and waits) is over once its tool call returns, and
  * dead once its run ends without that return. Its first document stays on screen either way, so
  * without this an expired, answered or orphaned question still looked answerable (host stuck-chat
- * investigation, 2026-09-27). Only a card still showing that FIRST document closes: a tool that sent
- * a follow-up document for the same `ui://` URI (an outcome after the answer) keeps showing it.
+ * investigation, 2026-09-27). A completed tool's follow-up document for the same `ui://` URI remains
+ * visible as its outcome; repeated documents without a tool result cannot reopen an orphaned question.
  *
  * The labels are read from the call's result text, so they are a best guess for a producer this
  * package has not seen; the card is closed either way, which is the property that matters.
  */
 function settledLabel(t, call, runStreaming, documentsForUri) {
-    if (call === undefined || documentsForUri > 1)
+    if (call === undefined)
         return undefined;
+    // MOVE: Replayed surface documents cannot keep an orphaned question live after its run ends.
     if (call.result === undefined)
         return runStreaming ? undefined : t('This question expired');
+    if (documentsForUri > 1)
+        return undefined;
     return UNANSWERED_RESULT.test(call.result.content) ? t('This question expired') : t('Answered');
 }
 /**
@@ -43,16 +54,20 @@ export function isDeliveredAnswer(result) {
 }
 /**
  * Wraps a card's tool executor so a delivered answer is reported once it resolves. The result is
- * passed through unchanged, and a rejected call reports nothing (the dialog shows its error and can
- * be answered again).
+ * passed through unchanged; onAnswerText receives readable choice text when available. A rejected call
+ * reports nothing (the dialog shows its error and can be answered again).
  *
- * @complexity O(1) per call, plus `onToolCall`'s own cost.
+ * @complexity O(p + s*m) answer-label mapping, plus `onToolCall`'s own cost (see questionAnswerText).
  */
-export function reportDeliveredAnswer({ onToolCall, onAnswered }) {
+export function reportDeliveredAnswer({ onToolCall, onAnswered, onAnswerText, input }) {
     return async (call) => {
         const result = await onToolCall(call);
-        if (isDeliveredAnswer(result))
+        if (isDeliveredAnswer(result)) {
+            const text = questionAnswerText({ answer: call.arguments, input });
+            if (text !== undefined)
+                onAnswerText?.(text);
             onAnswered();
+        }
         return result;
     };
 }

package/dist/react/ext-event-renderer-registry.d.ts

@@ -26,6 +26,8 @@ import type { ReactNode } from 'react';
  * the call is still waiting, or its run ended before it returned.
  */
 export interface ExtEventCall {
+    /** Stable owning tool identity for matching persisted answer receipts. */
+    readonly id?: string;
     readonly name: string;
     readonly input: unknown;
     readonly result?: {
@@ -58,6 +60,12 @@ export interface ExtEventRenderProps {
      * the work the answer started, and the run must stop reading as "waiting for your answer".
      */
     onAnswered?: () => void;
+    /** Optional readable answer delivered through the card; emitted before onAnswered. */
+    onAnswerText?: (answerText: string) => void;
+    /** Delivered answer text while the owning tool is still finishing. */
+    answerText?: string;
+    /** A matching user_message receipt already owns the visible bubble. */
+    answerRecorded?: boolean;
 }
 /**
  * Ext-event render callback. Runs inline during `MessageRow`'s render — hook-free, like

package/dist/react/ext-event-renderer-registry.js

@@ -1,3 +1,4 @@
+import { acceptedInputEvent } from '../core/accepted-input.js';
 /** Create independent extension renderer state, including each protocol's slot grouping.
  * @returns A keyed registry with identity-safe unregister handles.
  * @example const extensions = createExtEventRendererRegistry({}); extensions.register({ name: 'card', renderer });
@@ -26,8 +27,10 @@ export function createExtEventRendererRegistry(_required = {}) {
      */
     function slot({ name, data }) {
         const slotKey = renderers.get(name)?.slotKey;
-        if (!slotKey)
-            return name;
+        if (!slotKey) {
+            const input = acceptedInputEvent({ event: { kind: 'ext', name, data } });
+            return input ? `${name}:${input.data.id}` : name;
+        }
         let key;
         try {
             key = slotKey({ data });

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

@@ -0,0 +1,7 @@
+import type { ChatMessage } from '../../../../core/messages.js';
+/** One per-chat usage strip; removing a name persists its exclusion for future turns. */
+export declare function AgentPluginUsage({ conversationId, messages }: {
+    conversationId?: string | null;
+    messages: readonly ChatMessage[];
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=AgentPluginUsage.d.ts.map

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { AGENT_PLUGIN_STATE_CHANGED, readAgentPluginChatState, writeAgentPluginChatState } from '../../../../core/agent-plugin-chat-state.js';
+import { useT } from '../../../hooks/context.js';
+/** The newest `agent_plugins` usage event across the transcript, if any turn reported one. */
+function findLatestAgentPluginUsage(messages) {
+    let latest;
+    for (const message of messages)
+        for (const event of message.events ?? []) {
+            if (event.kind === 'ext' && event.name === 'agent_plugins')
+                latest = event.data;
+        }
+    return latest;
+}
+/** What the strip shows for this chat: the latest usage's plugins minus the ones the human
+ * excluded — or `null` when the latest usage belongs to another chat or nothing is left. */
+function resolveAgentPluginStrip({ messages }, { conversationId }) {
+    const latest = findLatestAgentPluginUsage(messages);
+    const id = conversationId ?? latest?.conversationId;
+    if (!id || !latest || latest.conversationId !== id)
+        return null;
+    const state = readAgentPluginChatState({ conversationId: id });
+    const plugins = latest.plugins.filter(plugin => !state.excluded.includes(plugin.id));
+    if (!plugins.length)
+        return null;
+    return { id, state, plugins };
+}
+/** One per-chat usage strip; removing a name persists its exclusion for future turns. */
+export function AgentPluginUsage({ conversationId, messages }) {
+    const t = useT();
+    const [revision, setRevision] = useState(0);
+    useEffect(() => {
+        const refresh = () => setRevision(value => value + 1);
+        window.addEventListener(AGENT_PLUGIN_STATE_CHANGED, refresh);
+        window.addEventListener('storage', refresh);
+        return () => { window.removeEventListener(AGENT_PLUGIN_STATE_CHANGED, refresh); window.removeEventListener('storage', refresh); };
+    }, []);
+    void revision;
+    const strip = resolveAgentPluginStrip({ messages }, { conversationId });
+    if (!strip)
+        return null;
+    const { id, state, plugins } = strip;
+    return _jsxs("div", { role: "status", style: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 6, padding: '6px 12px', fontSize: 12 }, children: [_jsx("span", { children: t('Using:') }), plugins.map(plugin => _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 4, border: '1px solid currentColor', borderRadius: 12, padding: '1px 7px' }, children: [plugin.name, _jsx("button", { type: "button", "aria-label": `${t('Stop using')} ${plugin.name}`, title: t('Stops future use in this chat. Guidance already loaded stays in the current context.'), onClick: () => writeAgentPluginChatState({ conversationId: id, state: { ...state, excluded: [...state.excluded, plugin.id] } }), style: { background: 'none', border: 0, color: 'inherit', cursor: 'pointer', padding: '0 2px', fontSize: 16 }, children: "\u00D7" })] }, plugin.id))] });
+}
+//# sourceMappingURL=AgentPluginUsage.js.map

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { pickerModelValue, pickerCatalogNote, pickerModelOptions } from '../model-options.js';
+import { pickerModelValue, pickerCatalogNote, pickerModelOptions, shortModelLabel } from '../model-options.js';
 import { createPortal } from 'react-dom';
 import { AgentIcon, RemixIcon, SearchableModelSelect } from '@jini-ai/ui';
 import { useT } from '../../../hooks/context.js';
+import { definedProps } from '../../../util/defined-props.js';
+import { RuntimeDropUp } from './RuntimeDropUp.js';
 import { defaultChatPaneSelection } from '../rules.js';
 import { runtimeOptionLabel, runtimePopoverPosition, useAgentRuntimePicker, } from '../hooks/useAgentRuntimePicker.hooks.js';
 // Re-exported so this module's public surface is unchanged by the behavior extraction; both are
@@ -25,23 +27,34 @@ function RuntimeAgentList({ orderedAgents, value, onChange, agentIconBasePath, t
     return (_jsx(_Fragment, { children: orderedAgents.map((agent) => {
             const active = agent.id === value.agentId;
             const status = runtimeAgentStatus({ agent: agent });
-            return (_jsxs("button", { type: "button", role: "radio", "aria-checked": active, className: `jini-runtime-agent${active ? ' is-active' : ''}`, "aria-current": active ? 'true' : undefined, "aria-label": `${agent.name} · ${status}`, onClick: () => onChange(defaultChatPaneSelection({ agent: agent })), children: [_jsx(AgentIcon, { id: agent.id, size: 20, className: "jini-runtime-agent-icon", ...(agentIconBasePath === undefined ? {} : { basePath: agentIconBasePath }) }), _jsx("span", { className: "jini-runtime-agent__copy", children: _jsx("strong", { children: agent.name }) }), agent.supportsTools === false ? (_jsx("span", { className: "jini-runtime-agent__badge", title: t("This CLI has no MCP support, so it cannot use this app's tools."), children: t('No tools') })) : null, _jsx("span", { className: "jini-runtime-agent__status", children: active ? t('selected') : status }), active ? (_jsx(RemixIcon, { name: "check-line", size: 19, className: "jini-runtime-check" })) : null] }, agent.id));
+            return (_jsxs("button", { type: "button", role: "radio", "aria-checked": active, className: `jini-runtime-agent${active ? ' is-active' : ''}`, "aria-current": active ? 'true' : undefined, "aria-label": `${agent.name} · ${status}`, onClick: () => onChange(defaultChatPaneSelection({ agent: agent })), children: [_jsx(AgentIcon, { id: agent.id, size: 20, className: "jini-runtime-agent-icon", ...definedProps({ source: { basePath: agentIconBasePath } }) }), _jsx("span", { className: "jini-runtime-agent__copy", children: _jsx("strong", { children: agent.name }) }), agent.supportsTools === false ? (_jsx("span", { className: "jini-runtime-agent__badge", title: t("This CLI has no MCP support, so it cannot use this app's tools."), children: t('No tools') })) : null, _jsx("span", { className: "jini-runtime-agent__status", children: active ? t('selected') : status }), active ? (_jsx(RemixIcon, { name: "check-line", size: 19, className: "jini-runtime-check" })) : null] }, agent.id));
         }) }));
 }
-function RuntimeModelSelects({ selectedAgent, value, onChange, t }) {
+/**
+ * The composer bar's "Model ⌄" and "Effort ⌄" drop-ups for the selected CLI. These replace the
+ * Model / Reasoning selects that used to sit in the runtime popover under the agent list (owner
+ * 2026-10-18: pick them from the bar and keep the popover small); they read and write the same
+ * selection, so nothing else changed. Either one renders nothing when the agent publishes no
+ * choices for it, rather than an empty menu.
+ */
+function RuntimeBarMenus({ selectedAgent, value, onChange, modelLabel, t }) {
     if (!selectedAgent)
         return null;
     const models = pickerModelOptions(selectedAgent);
-    const note = pickerCatalogNote(selectedAgent, t);
-    return (_jsxs("div", { className: "jini-runtime-models", children: [note ? _jsx("small", { children: note }) : null, models.length > 0 ? (_jsxs("label", { className: "jini-runtime-select", children: [_jsx("span", { children: t('Model') }), _jsxs("select", { "aria-label": t('Model'), value: pickerModelValue(selectedAgent, value.model), onChange: (event) => onChange({
-                            agentId: value.agentId,
-                            model: event.target.value,
-                            ...(value.reasoning ? { reasoning: value.reasoning } : {}),
-                        }), children: [_jsx("option", { value: "", disabled: true, children: t('Choose model') }), models.map((model) => (_jsx("option", { value: model.id, children: model.label }, model.id)))] })] })) : null, (selectedAgent.reasoningOptions?.length ?? 0) > 0 ? (_jsxs("label", { className: "jini-runtime-select", children: [_jsx("span", { children: t('Reasoning') }), _jsx("select", { "aria-label": t('Reasoning'), value: value.reasoning ?? '', onChange: (event) => onChange({
-                            agentId: value.agentId,
-                            ...(value.model ? { model: value.model } : {}),
-                            reasoning: event.target.value,
-                        }), children: selectedAgent.reasoningOptions?.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) })] })) : null] }));
+    const efforts = selectedAgent.reasoningOptions ?? [];
+    return (_jsxs(_Fragment, { children: [models.length > 0 ? (_jsx(RuntimeDropUp, { label: t('Model'), valueLabel: modelLabel, 
+                // The agent icon sits right beside it, so the bar drops the vendor word and caps the rest.
+                triggerLabel: shortModelLabel({ label: modelLabel, agentId: selectedAgent.id }), value: pickerModelValue(selectedAgent, value.model), options: models, note: pickerCatalogNote(selectedAgent, t), width: 260, onSelect: (model) => onChange({
+                    agentId: value.agentId,
+                    model,
+                    ...(value.reasoning ? { reasoning: value.reasoning } : {}),
+                }) })) : null, efforts.length > 0 ? (_jsx(RuntimeDropUp, { label: t('Reasoning'), 
+                // An unset reasoning shows the first option, as the old native select did.
+                valueLabel: efforts.find((option) => option.id === value.reasoning)?.label ?? efforts[0].label, value: value.reasoning ?? '', options: efforts, width: 180, className: "jini-runtime-dropup-trigger--effort", onSelect: (reasoning) => onChange({
+                    agentId: value.agentId,
+                    ...(value.model ? { model: value.model } : {}),
+                    reasoning,
+                }) })) : null] }));
 }
 /**
  * What the popover shows in place of the CLI inventory while `executionMode` is `'api'`: the model
@@ -64,17 +77,21 @@ function RuntimeModelSelects({ selectedAgent, value, onChange, t }) {
  * disabled dropdown would read as "editable once something is enabled" when nothing here will
  * enable it.
  */
-function RuntimeByokDetails({ byokRuntime, onByokModelChange, t }) {
+function resolveByokModel({ onByokModelChange }, { byokRuntime }) {
     const model = byokRuntime?.model?.trim();
     const models = byokRuntime?.models ?? [];
-    const editable = onByokModelChange !== undefined && models.length > 0;
-    return (_jsxs("div", { className: "jini-runtime-models", children: [_jsxs("div", { className: "jini-runtime-select jini-runtime-byok-model", children: [_jsx("span", { children: t('Model') }), editable ? (_jsx(SearchableModelSelect, { models: models, value: model ?? '', onChange: (next) => onByokModelChange(next), ariaLabel: t('Model'), searchPlaceholder: t('Search models'), 
+    const pickModel = onByokModelChange !== undefined && models.length > 0 ? onByokModelChange : undefined;
+    return { model, models, pickModel };
+}
+function RuntimeByokDetails({ byokRuntime, onByokModelChange, t }) {
+    const { model, models, pickModel } = resolveByokModel({ onByokModelChange }, { byokRuntime });
+    return (_jsxs("div", { className: "jini-runtime-models", children: [_jsxs("div", { className: "jini-runtime-select jini-runtime-byok-model", children: [_jsx("span", { children: t('Model') }), pickModel ? (_jsx(SearchableModelSelect, { models: models, value: model ?? '', onChange: (next) => pickModel(next), ariaLabel: t('Model'), searchPlaceholder: t('Search models'), 
                         // The menu portals to `document.body` at the package default `z-index: 60`, while this
                         // popover positions itself at 1000 — so without this the model list opens BEHIND the
                         // popover that owns it. Raised here rather than in the shared stylesheet because 60 is
                         // right for every other consumer; only this one opens a portalled menu from inside an
                         // already-elevated surface.
-                        menuClassName: "jini-runtime-model-menu" })) : (_jsx("strong", { children: model || t('No model configured') }))] }), !model && !editable ? (_jsx("div", { className: "jini-runtime-empty", children: t('Set a model in the BYOK settings before sending a message.') })) : null] }));
+                        menuClassName: "jini-runtime-model-menu" })) : (_jsx("strong", { children: model || t('No model configured') }))] }), !model && !pickModel ? (_jsx("div", { className: "jini-runtime-empty", children: t('Set a model in the BYOK settings before sending a message.') })) : null] }));
 }
 function RuntimeRescanFooter({ onRescan, scanning, t }) {
     if (onRescan) {
@@ -85,6 +102,25 @@ function RuntimeRescanFooter({ onRescan, scanning, t }) {
     }
     return null;
 }
+function RuntimeTriggerIcon({ picker, isApi, byokRuntime, agentIconBasePath }) {
+    const basePath = definedProps({ source: { basePath: agentIconBasePath } });
+    if (!isApi) {
+        return _jsx(AgentIcon, { id: picker.selectedAgent?.id ?? '', size: 22, className: "jini-runtime-agent-icon", ...basePath });
+    }
+    if (byokRuntime?.iconId) {
+        return _jsx(AgentIcon, { id: byokRuntime.iconId, size: 22, className: "jini-runtime-agent-icon", ...basePath });
+    }
+    return _jsx(RemixIcon, { name: "link", size: 20, className: "jini-runtime-agent-icon" });
+}
+function RuntimeTrigger({ picker, isApi, byokRuntime, agentIconBasePath, t }) {
+    return (_jsxs("button", { ref: picker.triggerRef, type: "button", className: isApi ? 'jini-runtime-trigger' : 'jini-runtime-trigger jini-runtime-trigger--icon-only', "aria-label": t('Choose AI runtime'), "aria-haspopup": "dialog", "aria-expanded": picker.open, "aria-controls": picker.dialogId, title: `${picker.triggerTitle} · ${picker.modelLabel}`, onClick: picker.toggleOpen, children: [_jsx(RuntimeTriggerIcon, { picker: picker, isApi: isApi, byokRuntime: byokRuntime, agentIconBasePath: agentIconBasePath }), _jsxs("span", { className: "jini-runtime-trigger__copy", children: [_jsx("strong", { children: picker.triggerTitle }), isApi ? _jsx("small", { children: picker.modelLabel }) : null] }), isApi ? (_jsx(RemixIcon, { name: "arrow-down-s-line", size: 15, className: "jini-runtime-trigger__chevron" })) : null] }));
+}
+function RuntimePopover({ picker, value, onChange, onRescan, scanning, daemonOnline, executionMode, apiModeAvailable, onExecutionModeChange, byokRuntime, onByokModelChange, agentIconBasePath, t, }) {
+    if (!picker.open || !picker.position)
+        return null;
+    const isApi = executionMode === 'api';
+    return createPortal(_jsxs("div", { ref: picker.popoverRef, className: "jini-runtime-popover", ...(picker.originTheme ? { 'data-theme': picker.originTheme } : {}), id: picker.dialogId, role: "dialog", "aria-label": t('Choose AI runtime'), "aria-modal": "false", style: picker.position, onKeyDown: picker.handlePopoverKeyDown, children: [_jsxs("div", { className: "jini-runtime-popover__head", children: [_jsx("strong", { children: executionMode === 'local' ? t('Local CLI') : t('API · BYOK') }), _jsx("span", { children: picker.runtimeSummary })] }), _jsx(RuntimeModeButtons, { executionMode: executionMode, daemonOnline: daemonOnline, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, t: t }), isApi ? (_jsx(RuntimeByokDetails, { byokRuntime: byokRuntime, onByokModelChange: onByokModelChange, t: t })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "jini-runtime-section-label", children: t('Code agent') }), _jsx("div", { role: "radiogroup", "aria-label": t('Code agent'), children: _jsx(RuntimeAgentList, { orderedAgents: picker.orderedAgents, value: value, onChange: onChange, ...definedProps({ source: { agentIconBasePath } }), t: t }) }), _jsx(RuntimeRescanFooter, { onRescan: onRescan, scanning: scanning, t: t })] }))] }), document.body);
+}
 /**
  * Renders the package-owned local/API, agent, model, and reasoning picker.
  *
@@ -97,13 +133,13 @@ export function AgentRuntimePicker({ agents, value, onChange, onRescan, scanning
 // its own asset directory can pass this explicitly, same as before.
 agentIconBasePath, }) {
     const t = useT();
-    const { dialogId, open, position, triggerRef, popoverRef, orderedAgents, selectedAgent, modelLabel, runtimeSummary, triggerTitle, originTheme, toggleOpen, handlePopoverKeyDown, } = useAgentRuntimePicker({ agents, value, placement, t, executionMode, byokRuntime });
+    const picker = useAgentRuntimePicker({ agents, value, placement, t, executionMode, byokRuntime });
     // The one branch this component makes. Everything below the mode buttons describes a detected CLI
     // — the agent radios, its model and reasoning selects, and the PATH rescan — and none of it is
     // true of, or has any effect on, an API turn. Previously all of it rendered in both modes, so an
     // operator on BYOK saw a CLI named as "selected" and a model reading "Default (CLI config)"
     // while their messages went to a provider over an API key.
     const isApi = executionMode === 'api';
-    return (_jsxs("div", { className: "jini-runtime-picker", children: [_jsxs("button", { ref: triggerRef, type: "button", className: "jini-runtime-trigger", "aria-label": t('Choose AI runtime'), "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": dialogId, onClick: toggleOpen, children: [isApi ? (byokRuntime?.iconId ? (_jsx(AgentIcon, { id: byokRuntime.iconId, size: 22, className: "jini-runtime-agent-icon", ...(agentIconBasePath === undefined ? {} : { basePath: agentIconBasePath }) })) : (_jsx(RemixIcon, { name: "link", size: 20, className: "jini-runtime-agent-icon" }))) : (_jsx(AgentIcon, { id: selectedAgent?.id ?? '', size: 22, className: "jini-runtime-agent-icon", ...(agentIconBasePath === undefined ? {} : { basePath: agentIconBasePath }) })), _jsxs("span", { className: "jini-runtime-trigger__copy", children: [_jsx("strong", { children: triggerTitle }), _jsx("small", { children: modelLabel })] }), _jsx(RemixIcon, { name: "arrow-down-s-line", size: 15, className: "jini-runtime-trigger__chevron" })] }), open && position ? createPortal(_jsxs("div", { ref: popoverRef, className: "jini-runtime-popover", ...(originTheme ? { 'data-theme': originTheme } : {}), id: dialogId, role: "dialog", "aria-label": t('Choose AI runtime'), "aria-modal": "false", style: position, onKeyDown: handlePopoverKeyDown, children: [_jsxs("div", { className: "jini-runtime-popover__head", children: [_jsx("strong", { children: executionMode === 'local' ? t('Local CLI') : t('API · BYOK') }), _jsx("span", { children: runtimeSummary })] }), _jsx(RuntimeModeButtons, { executionMode: executionMode, daemonOnline: daemonOnline, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, t: t }), isApi ? (_jsx(RuntimeByokDetails, { byokRuntime: byokRuntime, onByokModelChange: onByokModelChange, t: t })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "jini-runtime-section-label", children: t('Code agent') }), _jsx("div", { role: "radiogroup", "aria-label": t('Code agent'), children: _jsx(RuntimeAgentList, { orderedAgents: orderedAgents, value: value, onChange: onChange, ...(agentIconBasePath === undefined ? {} : { agentIconBasePath }), t: t }) }), _jsx(RuntimeModelSelects, { selectedAgent: selectedAgent, value: value, onChange: onChange, t: t }), _jsx(RuntimeRescanFooter, { onRescan: onRescan, scanning: scanning, t: t })] }))] }), document.body) : null] }));
+    return (_jsxs("div", { className: "jini-runtime-picker", children: [_jsx(RuntimeTrigger, { picker: picker, isApi: isApi, byokRuntime: byokRuntime, agentIconBasePath: agentIconBasePath, t: t }), isApi ? null : (_jsx(RuntimeBarMenus, { selectedAgent: picker.selectedAgent, value: value, onChange: onChange, modelLabel: picker.modelLabel, t: t })), _jsx(RuntimePopover, { picker: picker, value: value, onChange: onChange, onRescan: onRescan, scanning: scanning, daemonOnline: daemonOnline, executionMode: executionMode, apiModeAvailable: apiModeAvailable, onExecutionModeChange: onExecutionModeChange, byokRuntime: byokRuntime, onByokModelChange: onByokModelChange, agentIconBasePath: agentIconBasePath, t: t })] }));
 }
 //# sourceMappingURL=AgentRuntimePicker.js.map

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

@@ -6,5 +6,5 @@ import type { ChatPaneProps } from '../types.js';
  * @complexity Time/space: O(n) in rendered messages, agents, and suggestions.
  * @overallScore 100/100
  */
-export declare function ChatPane({ transport, agents: injectedAgents, runtimeAccess, runtimeStatusPollMs, title, variant, initialMessages, refreshSignal, conversationId, initialSelection, selection: controlledSelection, onSelectionChange, runContext, agentControl, onActivityChange, onMessagesChange, redactUserText, onSecretRedacted, onRescanAgents, scanningAgents, daemonOnline, executionMode, apiModeAvailable, onExecutionModeChange, byokRuntime, onByokModelChange, initialDraft, composerHistoryScope, composerHistoryStorage, validateAttachments, deliverTypedAnswer, deliverMidRunMessage, composerHandle, placeholder, placeholders, suggestions, emptyState, workingDirectory, initialWorkingDirectory, onChangeWorkingDirectory, workingDirectoryAccess, workingDirectoryControlPlacement, projectFileNames, toolCallDisplay, showUsageLine, showThinking, uploadAttachments, attachmentAccept, disabled, runtimePickerPlacement, composerSlots, header, leadingAccessory, footer, className, style, }: ChatPaneProps): import("react").JSX.Element;
+export declare function ChatPane(props: ChatPaneProps): import("react").JSX.Element;
 //# sourceMappingURL=ChatPane.d.ts.map